This tutorial will focus on building a complete portfolio style website in WordPress. The final version of the website can be found at http://wordpress.keefstudio.com/mayagwen and you may also download the image assets for the site below:
Steps
- Create an Account
- Log In to WordPress
- Configure Settings
- Activate/Customize Theme
- Create Pages
- Create Navigation Menus
- Configure Widget Areas
- Create Posts
- Configure Featured Content
- Create a Sticky Post
- Create Contact Form
- Apply Custom CSS
Create an Account
First, create an account with WordPress Playground to get a site of your own.
- Provide a user name for the WordPress admin
- Enter a valid email account where the account activation link can be sent
- Confirm or change the name for the website – this will be part of the url: https://wordpress.keefstudio.com/[site name]
- Create the site title
- Open the confirmation email sent to the address entered in the first step and click the activation link
- On the activation success page, copy the user name and password. These will be required to log in to WordPress
- The password can be changed once logged in
Log In to WordPress
Once your account has been activated, log in to your installation of WordPress by going to wordpress.keefstudio.com/[site name]/wp-admin, and enter your user name and the password provided by the account activation success screen. Once logged in, you can change your password in the Users section of the WordPress Admin Panel.
Configure Settings
For this site, there are a few setting that would be helpful to change in the beginning:
- Change Site Tagline
- Deselect “Allow users to post comments”
- Update Permalinks to use “Post Name”
Activate/Customize Theme
This site will use the Canard theme and it’s documentation page can be found at https://wordpress.com/theme/canard. It is a basic WordPress theme that has very few options available for customization, but is easy to use. It’s layout is also fitting for a portfolio style website, making this a good option for a starter theme. To activate the theme, navigate to Appearance > Themes, find Canard and click “Activate”. Once active, visit your website at wordpress.keefstudio.com/[site name] to verify the site’s appearance has changed.
Note: It is helpful to have the WordPress Admin and your website open in separate browser tabs.
To view the theme’s customization options, go to Appearance > Customize. Here you can update the site identity to use a logo rather than the site title, in the header portion of the website.
Create Pages
Navigate to Pages > Add New to create a page for “About me” and “Contact” pages. For each, enter title and content and click “Publish” to save. For building complex layouts using the block editor, refer to the Using the Block Editor guide.
Create Menus
Now that the pages have been created, a navigation menu can be made for the site. The Canard them has several menu locations and this site will use all of them.
- Create menu for main navigation and assign to Primary and Footer locations
- Create menu for social links and assign to Social location
- Create menu for site title and assign to Secondary location
Configure Widget Areas
There are two widget areas in the theme with predefined widget content. For this site the sidebar widget area will be reconfigured to present an author bio rather than what it currently there, and the footer widget area will not be used.
- Delete the current widget blocks in the sidebar area and drag/drop an Image block and a Text block to create the author bio
- Delete the current widget blocks in the footer area and leave blank
Create Posts
The Portfolio section of this site will take advantage of the default WordPress blog/posts functionality and the Canard theme’s Featured Content section. Each portfolio item will be an individual Post with it’s own content layout, that will also be listed on the site’s home/portfolio page. Again, don’t overthink it, this is built into the system. Just create the posts and the platform does the rest, mostly.
Create a post for each of the items in the portfolio. Be sure to set a Featured Image in each of the posts setting as this will be used by the theme to create the portfolio layout.
Note: posts are arranged in order of publish time/date. To rearrange posts, you may manually edit the publish time/date settings in each post.
Once created, the posts will display in order on the home page.
Note: If a static page is desired to be used as the home page rather than the default blog layout, that can be configured in the Settings > Reading section, as well as under Appearance > Customize > Homepage.
Configure Featured Content
The Canard theme includes a special Featured Content section to showcase (5) select posts. Enable this section, as directed by the theme documentation:
- Enter a tag name to be used to designate a post as featured in Appearance > Customize > Featured Content
- Enter the same tag name in the Tags section of each post to be featured.
Create a Sticky Post
Another feature of the Post Content Type is the ability to change the display and order in which the appear on the blog page. In this final step, we’ll create a post to act as a note from the author, change the Post Type and set it to display as the first item in the post list
- Create a post and set Post Format to “Image” in order to change it’s appearance in the post list
- Select “Stick to the top of blog”
Create a Contact Form
Adding a form to the contact page using the Contact 7 plugin
- Activate the Contact 7 plugin
- Navigate to the new Contact section added to the WordPress Admin and click “edit” under the contact form within
- Ensure the email address in the Mail > To field is correct
- Copy the shortcode provided under the form title
- Add a Shortcode Widget block to the Contact page content section and paste in the code
Additional CSS
Now that the site is complete, there may still a few places where changes are desired that are not directly editable by the theme’s customize options. In this case there were several undesirable design choices that need to be addressed. This is more of and advanced technique, but for the purpose of demonstration, the theme can be further modified in the Appearance > Customize > Additional CSS section. Edits include:
- Change accent colors
- Remove featured image from single post layouts
- Rework next/previous navigation on single post layouts
CSS Used (copy and paste into Appearance > Customize > Additional CSS code area):
a, .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a{
color: #209422;
}
.sticky-post{
background:#209422;
}
a:hover, .main-navigation a:active, .main-navigation a:focus, .main-navigation a:hover {
color: #b31528;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
background:#209422;
border:0;
}
button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background: #b31528;
color:#fff;
}
.post-navigation .nav-previous, .post-navigation .nav-next {
background:none;
width:50%;
float:left;
}
.post-navigation .nav-next {
float:right;
}
.post-navigation .nav-previous a, .post-navigation .nav-next a, .post-navigation .nav-previous + .nav-next a {
text-align:center;
background:none;
border:1px solid #ccc;
}
.post-navigation .nav-previous a:focus, .post-navigation .nav-previous a:hover, .post-navigation .nav-next a:focus, .post-navigation .nav-next a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.post-navigation .nav-previous .post-title, .post-navigation .nav-previous .meta-nav, .post-navigation .nav-next .post-title, .post-navigation .nav-next .meta-nav {
color: #777;
text-shadow:none;
}
.post-navigation .nav-previous a:hover .post-title, .post-navigation .nav-next a:focus .post-title, .post-navigation .nav-next a:hover .post-title, .post-navigation .nav-next a:focus .post-title {
color: #222;
text-shadow:none;
}
.entry-hero{
height:140px;
}
.entry-hero h1{
height:140px;
color:#fff;
}
.entry-header-wrapper {
padding-bottom: 40px;
padding-top: 40px;
position:absolute;
top:0;
}
.entry-hero .post-thumbnail{
background-color:#333;
}
.entry-hero .post-thumbnail img{
display:none;
}