Você está visualizando atualmente How to Create a Portfolio Site on WordPress (In 8 Steps)

How to Create a Portfolio Site on WordPress (In 8 Steps)

  • Autor do post:
  • Categoria do post:Dicas WordPress
  • Tempo de leitura:26 minutos de leitura

Lacking a professional portfolio can severely impact the types of client or employer you attract – especially if you’re a freelancer. Many won’t give this step due care and attention because they think it’s too complicated, or don’t know where to start. However, creating a professional-looking portfolio site on WordPress is a piece of cake!

WordPress is the perfect solution for freelancers who are looking to showcase their work on a budget. It’s got everything you’ll need – power out of the box, and plenty of additional functionality through the myriad of available themes and plugins.

By the time we wrap this article up, you’ll know how to create a basic (but elegant) portfolio site on WordPress in eight steps – and we’ll start right at the beginning, for those of you unfamiliar with aspects such as web hosts and WordPress installs. Let’s get started!

Table of contents:

  1. Choose a good WordPress host
  2. Install WordPress
  3. Find and install the right themes and plugins
  4. Build a header
  5. Build a project gallery
  6. Build an About Me section
  7. Build a contact form
  8. Flesh out your new portfolio site on WordPress

1. Choose a good WordPress host

We’ve discussed this topic to death in the past, but if you want to jump right in, here are the four things you’ll need to keep in mind when choosing a WordPress host:

  1. Scalability: Your host should be able to handle demanding sites, in case you want to pursue new projects in the future.
  2. Security: A good host should take web security seriously and offer features to keep you safe.
  3. Support: This one is critical. If anything goes wrong with your site, you’ll want to have access to a reliable support team.
  4. Reputation: Every web host will have its detractors, but overall you’ll want to go with one that has a proven track record.

If we were to give you a recommendation of a good host, that would be Bluehost. It is not only cheap but also provides all the services for small to large businesses. Bluehost also automatically installs WordPress for you during the setup, so it makes things as simple as it gets for you. 

If you click on our Bluehost link, you can buy the hosting even cheaper. Use it to get a discount, which applies automatically when you enter the page.

But Bluehost is not the only great hosting service on the market. If you are interested in learning more about other hosts and comparing the options, our roundups on the best WordPress hosting companies on the market or the best WordPress hosting for beginners will give you a clear view of what solution will work best for your needs.

Let’s now move onto installing WordPress.

2. Install WordPress

This process might look a bit different depending on the web host you’ve settled on, but the basic steps remain the same. After signing up with a provider, you’ll gain access to a private cPanel for your hosting plan. This will likely include a one-click option for installing WordPress, or the Softaculous Apps Installer:

Click on the Softaculous Apps Installer icon, and find the WordPress option on the next screen. Then, click on Install Now to begin the process:

On the next screen, you’ll be prompted to fill in the details of your WordPress site, including its name, description, account name, and password, among others. Most of these are self-explanatory, but for security reasons, do remember to change the default admin username and database name:

Once you click on Install, and waited a few moments, you’ve created your first WordPress site! Next we’re going to turn it into a handsome portfolio.

3. Find and install the right themes and plugins

This step is a bit more open-ended than the rest of this guide, for the simple reason that we can’t pick the perfect theme and plugins for your own needs. We’re saying this because there’s a lot of variety in WordPress right now and the user’s needs are so diverse that it’s hard to recommend one single tool that can satisfy everyone’s needs in one go.

We’ll give it a try, though, and propose some themes and plugins that do cover essential needs you might have as a user who wants to build a portfolio website by themselves.

Themes

Let’s start with the themes.

For example, one of the main decisions that people have to make nowadays is choosing between a classic theme like Neve and a block theme like Neve FSE.

If you choose Neve, it’s very easy to load up a portfolio-based starter site in just a few clicks. This will already have a lot of the features that a good portfolio website should have, and all you’ll need to do is plug in your own content.

While Neve is a perfectly solid choice, we urge you to look around and find a theme that feels just right for you. You can settle on either a multipurpose theme (such as Neve or Neve FSE) or look for something tailored to visual portfolios. As long as your theme has decent ratings and good documentation, you should be okay.

After finding the perfect portfolio WordPress theme, you’ll need to install it. To do that, you should start in the WordPress dashboard. You can access it by going to YOURSITE.com/wp-admin. Log in and familiarize yourself with that dashboard:

Ours already has a few extra options, but don’t concern yourself with those right now. Instead, look to the Appearance tab. Click on Appearance, and on the next screen you’ll find an Add New option.

Clicking that will bring you to a new screen where you can either search for a WordPress theme that you can install and activate right through the dashboard, or upload a new one.

Most themes will already be available directly inside the dashboard. So, for example, if you want to use Neve FSE, then just type in “Neve FSE” in the search bar on the top right. Then click Install and Activate.

Otherwise, if you’ve downloaded a theme from somewhere else, then you can select Upload Theme, brings up a prompt to locate your downloaded theme on your computer. Select the folder, click on Install Now, then Activate and you’re all set.

Plugins

Dealing with plugins poses a similar issue. Shooting off random plugin recommendations would be irresponsible (although some are downright essential). However, we can teach you how to spot the best free ones. Once you’ve learned that, you’ll be ready to delve into the official plugin directory and see what piques your interest.

If you are using the WordPress block editor and full site editing as the main method to customize your website, plugins that provide blocks for multiple purposes should be a must. Otter Blocks is one of these plugins. With it, you can insert sections, forms, design elements, and new functionality to your site. We’re going to use Otter later on in this tutorial to show you how to build a contact form for your portfolio website.

To install any plugins, the process is very similar. It all happens in the Plugins tab, instead of the Appearance > Themes tab. Here’s our in-depth guide on how to install WordPress plugins.

Lastly, please bear in mind that any new plugins you install need to be activated in order to work. If you skip the activation, your plugins won’t function.

For the purposes of this tutorial, we’re going to use the Neve FSE theme as our foundation (which is 100% free). We installed the Neve FSE theme and the Otter Blocks plugin for this tutorial, to keep things simple.

We have WordPress installed and a working theme, now it’s time to actually create our portfolio page. Its first component will be a header – a simple full-width image with a clear message and a call to action for any potential clients visiting your site. Head to Appearance > Editor, and check out how the Neve theme looks out of the box:

Let’s take that big header section and adjust it for our needs using the WordPress Editor – a place to tweak your theme to your desired needs. This involves three steps:

  1. Editing the text block in the header to change the content.
  2. Adjusting the text of the first button and removing the second in that same section.
  3. Uploading a new image by clicking on the current one and replacing it. Use the Replace button in the Image block.

Here’s the result after implementing those tweaks:

That’s our header ready for action, and we’ll take a look at the site as a whole at the end. You’ll notice that the button below doesn’t link to anywhere at this stage. After building the pages for your websites – which we will show you throughout this post – you can then link them to this header button.

For example, you can add a link to your Contact page so people can easily propose you jobs or professional opportunities.

5. Build a project gallery

The project gallery is the heart and soul of any portfolio site on WordPress. It’s essentially a collective display of your latest projects, with links to each entry. You can build a project gallery in WordPress in two ways:

Use the block patterns in Neve FSE

One method to build a portfolio is to use the Neve FSE theme’s block patterns. Go to Pages > Add New to enter the block editor. Here, click on the + icon to insert the block patterns that Neve FSE provides.

To show you how to do it, we selected a pattern that is closer to what we want to achieve with this post. So, we inserted the Featured Work pattern that Neve FSE provides.

For this example, we’ve added three of our past articles and set featured images for each:

Aside from creating three individual projects, here’s what else we did using the WordPress Editor:

  1. We added a new Portfolio section underneath our header on the homepage. We did that by replicating the projects via blocks.
  2. We modified the main title of the Portfolio page.
  3. We added featured images to each project in the My Latest Projects block.
  4. Added a link to each image to lead visitors to the respective project.

Use the Template Kits available in WordPress

If you’re using WordPress 6.3 or above, you can benefit from many pre-built templates, which enable you to create new portfolio pages. Here’s how to create a project gallery via the WordPress editor.

Go to Appearance > Editor > Templates > Add New (the + icon). Choose Custom template from the list and give it a name.

A new blank page appears. Click on the Template Kits button at the top right of the editor and search for Portfolio. Once you imported your favorite template kit, edit it via blocks.

To replace the items in the portfolio, select each portfolio image and replace it with your own. You can also add links and customize the styling of the images. Click Save.

Next, we’ll tackle adding some additional content – specifically an About Me section.

6. Build an About Me section

We’re already making great headway into our portfolio, but we still need to flesh things out. An excellent way to do that is to provide your visitors with some insight into who you are – for example, the key facts employers would love to know about you. To do that, we’re going to use Neve FSE to divide all of the information into digestible bites.

To create an About Me page, go to Appearance > Editor > Pages. Click on the + icon to add a new page, then name it. When the blank page shows up, you can customize it the same way you customize the other pages in the previous sections.

Insert your preferred blocks and/or Neve FSE patterns to make it look the way you want. Once you’re done customizing it, click Save. Here’s an example of customizing the Neve FSE Services pattern and turning it into an About Me page.

Now let’s see how the finished product looks:

Looking good! We’re getting pretty close to the end; now it’s time to deal with the last big section of our portfolio site on WordPress – the contact form.

Now that you’ve reeled in employers, it’s time to get them to contact you. Sure – you could just drop your email in there, but a contact form looks much more professional. Here’s how to do it.

Neve FSE doesn’t include a Contact Us page, so we recommend the Otter Blocks or WPForms plugin.

To build a contact form with Neve FSE and Otter Blocks plugin, go to Plugins > Add New. Search for Otter Blocks, then install and activate it.

The next step is to add a new page to your WordPress site by accessing Appearance> Editor > Pages > Add New. On this page, insert a new block by clicking on the + icon and searching for Otter. Choose the Form block and then Contact Form. Customize its content and hit Publish (top right of the page).

Next, it’s time to view our site as a whole, and look at where you can go from here.

8. Flesh out your new portfolio site on WordPress

Take a moment to step back and admire your work – we’ve just built a simple, professional looking portfolio site on WordPress together!

What comes next is up to you. Firstly, you’ll want to read up on everything you can do with Neve FSE, whether that’s adding more projects, creating individual pages for each of them, or playing around with new sections.

Next, you’ll want to learn some of the advanced techniques to take your portfolio even further using the Neve FSE theme – for that, check out our piece on how to tweak your portfolio to make your WordPress site more engaging.

Conclusion 🧐

A good-looking portfolio site on WordPress can open a lot of doors to meeting (and impressing) potential clients. It provides employers with a better idea of your capabilities and enables you to set yourself apart from the competition.

The entire process will take some time – especially if you aren’t familiar with WordPress – but as we’ve shown, it’s definitely achievable with minimal effort.

Here are the eight basic steps you’ll need to follow in order to make a portfolio site:

  1. Choose a good WordPress host. ️
  2. Install WordPress.
  3. Find and install the right theme and plugins. ️
  4. Build a header. ️
  5. Build a project gallery. ️
  6. Put together an About Me section.
  7. Set up a contact form.
  8. Flesh out your brand new WordPress portfolio site.

Do you have any questions about how to build a portfolio site on WordPress? Feel free to ask away in the comments section below!

Softaculous Apps Installer icon, and find the WordPress option on the next screen; Then, click on Install Now to begin the process:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/wordpress-install-now-e1477358771833.png” }, { “@type”: “HowToDirection”, “text”: “On the next screen, you’ll be prompted to fill in the details of your WordPress site, including its name, description, account name, and password, among others; Most of these are self-explanatory, but for security reasons, do remember to change the default admin username and database name:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/admin-account-details.png” }, { “@type”: “HowToDirection”, “text”: “Once you click on Install, and waited a few moments, you’ve created your first WordPress site; Next we’re going to turn it into a handsome portfolio.” } ] }, { “@type”: “HowToStep”, “position”: “3”, “name”: “Install themes and plugins”, “text”: “Find and install the right themes and plugins – This step is a bit more open-ended than the rest of this guide, for the simple reason that we can’t pick the perfect theme and plugins for your own needs.”, “url”: “https://themeisle.com/blog/portfolio-site-on-wordpress/#find-theme-plugin”, “itemListElement”: [ { “@type”: “HowToDirection”, “text”: “For the purposes of this tutorial, we’re going to use the Zelle Pro theme as our foundation (which also comes with a free version):”, “duringMedia”: “https://themeisle.com/blog/wp-content/uploads/2016/11/zellepro.gif” }, { “@type”: “HowToTip”, “text”: “While ZellePro is a perfectly solid choice, we urge you to look around and find a theme that feels just right for you; As long as your theme has decent ratings and good documentation, you should be okay.” }, { “@type”: “HowToDirection”, “text”: “After finding the perfect portfolio WordPress theme and a promising plugin or two, you’ll need to install them; To do that, you should start in the WordPress dashboard; You can access it by going to YOURSITE.com/wp-admin; Log in and familiarize yourself with that dashboard:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/wordress-dashboard.png” }, { “@type”: “HowToDirection”, “text”: “Look to the Appearance and Plugins tabs. Click on Appearance, and on the next screen you’ll find an Add New option; Clicking that will bring you to a new screen where you can either select one of WordPress’ default themes or upload a new one; Selecting Upload Theme brings up a prompt to locate your downloaded theme on your computer; Select the folder, click on Install Now, and you’re all set.”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/add-themes.png” }, { “@type”: “HowToDirection”, “text”: “To install any plugins, the process is very similar; It all happens in the Plugins tab, instead of the Appearance > Themes tab.” }, { “@type”: “HowToTip”, “text”: “Lsatly, please bear in mind that your new theme and any new plugins you install need to be activated in order to work; If you skip the activation, your themes and plugins won’t function.” } ] }, { “@type”: “HowToStep”, “position”: “4”, “name”: “Build a header”, “text”: “Build a header – We have WordPress installed and a working theme, now it’s time to actually create our portfolio page; Its first component will be a header – a simple full-width image with a clear message and a call to action for any potential clients visiting your site.”, “url”: “https://themeisle.com/blog/portfolio-site-on-wordpress/#build-header”, “itemListElement”: [ { “@type”: “HowToDirection”, “text”: “Head to Appearance > Customize, and check out how the Zelle theme looks out of the box:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/customizer-header.png” }, { “@type”: “HowToDirection”, “text”: “Let’s take that big header section and adjust it for our needs using the WordPress Customizer; This involves: Replacing the text under Content, in the Big title section ; Adjusting the text of the first button and removing the second in that same section; Uploading a new image under the Parallax tab and turning on the effect; Here’s the result after implementing those tweaks:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/finished-header-e1477360538363.png” } ] }, { “@type”: “HowToStep”, “position”: “5”, “name”: “Build a project gallery”, “text”: “Build a project gallery – The project gallery is the heart and soul of any portfolio site on WordPress; It’s essentially a collective display of your latest projects, with links to each entry.”, “url”: “https://themeisle.com/blog/portfolio-site-on-wordpress/#build-project-gallery”, “itemListElement”: [ { “@type”: “HowToDirection”, “text”: ” The Zelle theme includes a custom post type called Portfolio, which enables you to add new projects from the dashboard:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/portfolio-dashboard.png” }, { “@type”: “HowToDirection”, “text”: “For this example, we’ve added four of our past articles and set featured images for each; Once set, these will appear on your main portfolio page:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/4-portfolio-images-1.jpg” }, { “@type”: “HowToDirection”, “text”: “Aside from creating four individual projects, here’s what else we did using the WordPress Customizer: We added a new Portfolio section underneath our header; We modified the main title under the Content tab of the Portfolio section; We added featured images to each project under the Portfolio custom posts section; Finally, we enabled the Open portfolio in a lightbox option under the Settings tab – That way, you don’t need to create individual pages for each project to get up and running; Just assign a good image that exemplifies your work, and flesh out each page later if necessary.” } ] }, { “@type”: “HowToStep”, “position”: “6”, “name”: “Build About Me section”, “text”: “Build an About Me section – We’re already making great headway into our portfolio, but we still need to flesh things out; An excellent way to do that is to provide your visitors with some insight into who you are – for example, the key facts employers would love to know about you.”, “url”: “https://themeisle.com/blog/portfolio-site-on-wordpress/#build-about-me-section”, “itemListElement”: [ { “@type”: “HowToDirection”, “text”: ” To do that, we’re going to use Zelle Pro to divide all of the information into digestible bites:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/about-me-widget.png” }, { “@type”: “HowToDirection”, “text”: “Those types of items are called blurbs, and they’re part of Zelle’s Our focus section in the Customizer; Here are the steps you need to follow, in order: Add an Our focus section to your portfolio page, using the Sections order tab; Enter the Our focus section and change the content under Header to About Me; Create three (or more) individual widgets under the Our focus section widgets; Each should include a title, some body text, and an image from your WordPress media library.”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/about-me-finished.png” } ] }, { “@type”: “HowToStep”, “position”: “7”, “name”: “Build a contact form”, “text”: “Build a contact form – Now that you’ve reeled in employers, it’s time to get them to contact you; Sure – you could just drop your email in there, but a contact form looks much more professional; Here’s how to do it.”, “url”: “https://themeisle.com/blog/portfolio-site-on-wordpress/#build-contact-form”, “itemListElement”: [ { “@type”: “HowToDirection”, “text”: “We recommend the WPForms plugin; If you’re using Zelle, jump back into the Customizer and add a Contact Us section within the Sections order tab, right after About Me; Then head into it, go to Settings, and enter your email address into the relevant field:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/contact-us-email-e1477360980697.png” }, { “@type”: “HowToDirection”, “text”: “The contact form included in this section is perfect for our needs, so all we have to do is edit its titles; We can do this using the Main content tab:”, “duringMedia”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/contact-us-content-e1477361043871.png” }, { “@type”: “HowToDirection”, “text”: “Before moving onto the final step, head back to the Big title section, into Content, and add #contact under First button link. That’s called anchor text, and it will link your call to action to the contact form below it.” } ] }, { “@type”: “HowToStep”, “position”: “8”, “name”: “Flesh out your new portfolio”, “text”: “Flesh out your new portfolio site on WordPress – Take a moment to step back and admire your work – we’ve just built a simple, professional looking portfolio site on WordPress together!”, “url”: “https://themeisle.com/blog/portfolio-site-on-wordpress/#flesh-out”, “image”: “https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:auto/h:auto/q:90/f:avif/https://themeisle.com/blog/wp-content/uploads/2016/10/Portfolio-Site-on-WordPress.jpg” } ] } ] } ]]>

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 

Was this article helpful?

No Thanks for your feedback! { item.addEventListener(“click”, event => { var voting = document.querySelector(“.article-feedback-voting”); var response = document.querySelector(“.article-feedback-response”); voting.style.display = “none”; response.style.display = “flex”; }) }) ]]>

Source