A portfolio website is the perfect platform to showcase anything you want. It could be a product you sell, a project you’ve completed, an award you’ve won, an inspiring photo, or a piece of art you’re proud of. A portfolio website will market your products, services and skills to your target audience. Also, it helps to generate leads. If you are a creative professional (web designer, artist, painter, writer, graphic illustrator), a well-designed website is especially important for attracting clients and growing your business.
In this post, we’ll walk through the steps to build a portfolio website with WordPress, using all theme. At the beginning, you should know that the Total theme includes a built-in custom post type for portfolios. So you can create portfolios and add portfolio items more easily. And if you know how to use standard posts, creating a portfolio will be much simpler for you.
Step 1: Choose a Web Host
When it comes to hosting, there are tons of hosting options to suit everyone’s needs. However, if you can’t choose one, check out WPExplorer’s recommended WordPress hosting solutions.
If you’re just starting out, Bluehost is a great option because it offers a lot of resources at low prices – even lower prices when you use our links. Get Bluehost for just $2.95 for the first year!
However, if you want easy hosting, Flywheel and WP Engine are two of the best managed WordPress hosting companies. Both offer great features at a reasonable price, and best of all you don’t have to think about your server as they handle everything for you.
Step 2: Choose a Domain Name
When registering server space with hosting, you need to have your domain name ready. Your domain name is unique to your website, and you can get these names from registrars like NameCheap and GoDaddy. Choose a name carefully, as changing it later can get very confusing.
Step 3: Install WordPress
Installing WordPress is easy! With managed hosting, your WordPress installation is already set up for you. If you choose Bluehost, just follow the 1-click installation process and you should have WordPress ready in minutes.
When you get to the login screen, enter the username and password you created when you installed WordPress and go to your website. There, you can start creating your actual portfolio website.
Step 4: Select and activate the theme
This step is easy for us because we will choose all. In our opinion, it’s one of the best themes you can choose for any project, as the theme has tons of features and options that you can use for businesses, charities, portfolios, and more. With a simple demo import, you can use Total to create a beautiful portfolio website in just a few clicks, like this:
After installing the Total theme, activate it from the Dashboard by clicking Appearance > Themes > Add New.
At this stage you have a choice – you can import any demo site from Total using Demo importer. Total has over 40 pre-built websites, including portfolio demos. You can choose any demo, import it and add your own content.
Just choose the demo you like and follow the on-screen prompts to install, then activate any desired plugins and import the sample content (posts, post types, widgets, menus, etc.).
Step 5: Create and Edit Portfolio Items and Create a Portfolio Item List
Of course, you don’t have to import the demo to get started, you can always build your own website from scratch. When using the Total theme, you can easily create your own portfolio.
But before we can create our portfolio page, we need to create the portfolio items that will go into it. With Total, you have two options to create your portfolio items.
Option 1: Use Total’s portfolio custom post type as-is
Your first option is to use the portfolio post type to create your portfolio.In the WordPress dashboard, click Portfolio > Add New.
Add your portfolio item titles, tags, categories and any text content. Total supports various content types – add a Featured Image If you want to display a single image, add multiple images to image gallery section to create a slider, or in Portfolio Project part. But in all these cases, you may also want to choose a page layout under the main settings (left, right, or no sidebar) and set featured images for your posts for use in portfolio grids, carousels and related posts. Save the post when done.
next step is to go Appearance > Customize > Portfolio Customize your portfolio archive pages (main, tags and categories) as well as your individual portfolio item pages. From here you can choose a sidebar layout, related post counts and enable various page elements, then drag and drop them into the order you want.
That’s it! Just add more items to fill out your portfolio.
Option 2: Build Your Own Portfolio Template Using Visual Composer
If you want to get more hands-on, you can become your own designer using Total’s features and the Visual Composer page builder. Visual Composer is a visual page builder that helps you create beautiful layouts using a drag and drop method. As a user, this means you don’t have to know any coding and can really enjoy the web building process. Total is free, and when you activate the theme, you should see a prompt to install the plugin on your website. Just remember to activate it too.
Access Visual Composer Settings from the Dashboard to set up the plugin.click Visual Composer > Role Manager and adjust the settings. Most importantly, enable composer for the post types you want to use it for. By default, Visual Composer is only enabled on pages. Also enable it for the portfolio post type so that you can build portfolio items with the help of Visual Composer.
Just like the last option, you need to create a new post by clicking Portfolio > Add New. Name your post, choose a category or tag, choose a sidebar layout and set a featured image under the main settings section. Save a draft of your post. Now you can start building!
You can choose to start editing portfolio items using Visual Composer’s front-end (visual) or back-end (block) editor. We prefer the front-end editor because you can see your page elements, custom colors, padding/margins, and more. But no matter which you choose to use, just choose Visual Composer add element button to start.
You will see all available elements in the element library. In addition to the standard Visual Composer elements, Total has a number of specially designed elements in the library.You can see that the snapshot above uses image slider and a text box Create portfolio items. However, you can use almost any other element in the library.
When finished editing, save the portfolio post and click release. If you are creating many similar projects, you can even save template reuse. To save the layout as a template, go back to the backend editor.
Click the Templatera button (looks like a little gray layout icon).
Then give your template a name and save it. To use your template on new posts, just click the Templatera icon to insert your saved layout. Alternatively, you can set the template as the default template for all new posts in a given post type.
To do so, navigate to Visual Composer > General Settings And set your favorite template for each post type. This will really save you some time if you plan to add many items to your portfolio, staff, etc., as all your standard page elements will be automatically inserted and formatted for you.
Step 6: Create a Portfolio Page
Now that we have a list of portfolio items that we want to display in our portfolio, it’s time to create a page containing these portfolio items. Create pages the way you would normally use WordPress.go with page > add new. Name and save the new page.
Next, click on the Visual Composer option you want to use – again you can choose to use the front-end editor or the back-end editor. This will open the live drag and drop editor.click blue add element button. We will use the Portfolio Grid element to build our portfolio page. Select Portfolio Grid. Select the Portfolio Carousel element if it is the carousel you want on your portfolio page.
You can adjust settings in the Portfolio grid element to fine-tune how the portfolio pages are displayed. You can choose the size of the image, add borders, titles, sSpecify categories, choose the order, columns and posts per page, enable pagination, choose a grid style, add excerpts, and more. save Portfolio page after filling out the settings options below the text editor.
View changes even as you make them. After saving the changes to the portfolio grid element, this is how my portfolio page looks on the front end.
Step 7: Customize Your Portfolio
You can use the settings in the live WordPress customizer to set options for breadcrumbs, profile layout, individual post styles, image cropping, and more.
If you want to change the admin icon, post type name, slug and taxonomy, use Portfolio Post Type Editor.
Step 8: Add your portfolio to the menu
On a portfolio website, it makes sense for the portfolio page to appear in the main menu, so visitors can go directly to “Portfolio” and view the portfolio page.To add a new portfolio page, visit Appearance > Menu, select the Portfolio page and click add to menu.
Portfolios now appear as an easy-to-access menu item on the home page (and any other page that enables the main menu).
If you want your portfolio page to be your home page, just navigate to Settings > Read, Set your homepage display to a static page and select your portfolio. It’s very simple!
Now that you have a portfolio section of your website, you may want to keep adding more pages to your website. Consider a very useful contact page, about or service, which are necessary parts of a portfolio website. Create as many pages as you want, remember to include important pages in the menu to have a full portfolio website.
After completing your portfolio, you can continue to generate traffic to your portfolio, optimize your images, and even monetize your website. What other tips do you have for building your portfolio online?