Having a professional portfolio website sounds great, right? But as appealing as creating one yourself can seem, it can feel tedious and confusing.
I started my blogging journey almost a decade back with WordPress, and over time, I became part of the WordPress community. Since then, I’ve built at least five websites for different purposes, constantly learning along the way. What I realized, though, is that many people, even those already in the system, struggle with the basics. And that’s okay! I’ve been there too, but thankfully, I had people to support me. And I’d like to be one for you!
So if you’re from a non-tech background like me, or even if you’re tech-savvy but feeling stuck when it comes to building a portfolio website, you’re in the right place. Let’s break it down into simple steps to get your WordPress site up and running with minimal fuss.
Let’s break it down into simple steps to get your WordPress site up and running with minimal fuss.
Before We Begin: Make sure you have your domain and hosting ready. Once that’s sorted and you’ve logged into your WordPress account, we’re all set to start building!
Go to the backend of your website by adding /wp-admin to your WordPress site URL. So, if your domain is example.com, go to example.com/wp-admin and log in.
Step 1: Install Essential Plugins
To make things easier, we’ll install some essential plugins. These will help speed up the process and make customization smoother.
- Starter Templates – Provides pre-designed layouts.
- Elementor – A drag-and-drop page builder for easy design.
I personally prefer the WordPress’ built-in Gutenberg editor, if you’d like to try your hands on it, you can skip Elementor for now.
- WP Forms – A simple form builder for contact forms.
- For SEO, Yoast & RankMath are top tiers, choose any.
To install them, go to Dashboard → look left-hand side Plugins → Add New, search for each plugin, then click Install Now → Activate. Done!
Step 2: Choose a Starter Template
Building from scratch is all cool, but let’s try using the available resources first (which are fantastic & cater a variety of requirements). We’d go with a Starter Template to speed things up.
- Go to Appearance → Starter Templates.
- Browse and choose a portfolio template that fits your style.
- Click Import to bring it to your site.
Some great free templates: Astra, Bravada, Kalium. Always check the live preview before selecting one.
Step 3: Customize Your Template with Gutenberg
Now, let’s make this website truly yours!
- Go to Pages → All Pages, find your homepage, and click Edit.
- Use blocks to add or edit content:
- Paragraph Block for text Image Block to upload pictures
- Tip: Upload pictures first to the media library and then select from there. This saves space and keeps your site organized. Columns Block to create layouts
- Tip: If you want to create a collage or display multiple images together, first add a column block, then insert 2–3 columns inside it and upload images. This simple hack makes it easier to align images, adjust background colors, and experiment with different layouts. Cover Block for stylish hero sections
- Want to add a new section? Click the ‘+’ icon, choose a block, and start designing!
- To add anchor links (e.g., ‘About’ or ‘Contact’), go to the Advanced settings of a block and enter a unique HTML anchor.
- Tip: To add an anchor link for “About,” select the heading block, go to Advanced settings, and enter about-section in the HTML Anchor field. Then, link any button or text to #about-section, and clicking it will scroll to that section instantly!
Step 4: Add Key Features
A strong portfolio website isn’t just about design, it should showcase your work and make it easy to connect with you. Here’s what you need:
- About Page: Give an overview of who you are, what you’re looking for, and what visitors can expect from your website.
- Portfolio Section: Showcase your work with images, descriptions, or case studies.
- Services Section: List your services so visitors know exactly how you can help them.
- Client Testimonials: To add social proof, use the Testimonial block (from Essential Addons for Gutenberg) or a simple text block.
- Contact Form: Use WPForms to add a contact form in just a few clicks.
- Call to Action: Add a button block that links to your email, resume, or social media profiles.
Tip: When creating a services section, use icon blocks or columns to neatly display different offerings. This improves readability and keeps things visually appealing.
Tip: For testimonials, keep them short and impactful. If possible, add a small image of the client for credibility.
Step 5: Final Touches & Publishing
See the logo on this website’s tab? That’s called a favicon! Here’s how to add it, along with some final tweaks to your site’s branding.
I used frontend customization for all of the following. To do this, simply go to the uppermost layer on the dashboard, click Visit Site, and then hit Customize to start making changes. But if you’d prefer the backend way, follow these steps:
1. Adding a Logo & Website Icon (Favicon)
- Go to Appearance → Customize → Site Identity.
- Upload your logo and site icon (favicon).
- Click Publish to save changes.
A favicon is a small icon that appears in the browser tab beside your website name!
2. Editing Header & Footer
Header:
- Go to Appearance → Customize → Header (or Site Editor → Header if using a block theme).
- Edit your menu, logo, and header layout as needed.
Footer:
- Navigate to Appearance → Customize → Footer (or Site Editor → Footer).
- Add copyright text, social links, or a call-to-action.
If you’re using a block theme, you can edit both the header and footer directly in the Site Editor using blocks!
3. Click Preview to check for:
- Uniform font sizes and colors
- Buttons and links working properly
- Responsive design (looks good on mobile too!)
Once happy, click Publish!
Need to update something later? No worries! Just go back to the Dashboard → Edit → Update whenever you want.
Congrats, you just built a professional portfolio website using Gutenberg! I hope this guide helped simplify the process. If you have any questions, drop them in the comments. Happy designing!
I have attached a resources page above, curated by WordPress Bhopal, to cater for all needs related to your WordPress site. Also, to begin, you could always start with platforms like TasteWP or InstaWP.