This is the blog post that accompanies the following video:
Transcription:
This video is going to cover how to choose a theme for your website, before moving on to adding a free theme to the site we’ve been building so far, and once we’ve done that, we’ll set up our homepage. You should have a website set up with basic content at this point, and if you don’t, check out the earlier videos in this tutorial series.
There are plenty of websites out there with lists like the 10 best themes for a restaurant or 15 great themes for your small business. In this video, we’re going to cover how you should evaluate themes, rather than just listing a few good ones.
There are 3 main things to look at before deciding on a theme: first, does the theme have the features and look that you want for your website, second, is it responsive, meaning does it look good at all different screen sizes and work well on mobile, and finally, how much does it cost.
The best way to start is usually to list the features you want out of a theme. For example, maybe you want a theme that integrates well with a particular plugin, or is designed specifically for your industry. Once you’ve decided on the main features that you really need, you can rule out a lot of themes that don’t provide that core set of features.
Next, you can check if a theme is responsive by opening up the theme demo on your phone, and resizing your browser window while visiting the demo site. If the content overlaps at certain sizes, pictures become too small or text becomes difficult to read, it’s probably worth moving on to another theme candidate.
Last, if you’ve got a few possible themes that meet all of your criteria and are responsive, you can judge them based on their price as well as their features. Paid themes generally have better developer support and are less likely to be abandoned, but for certain types of sites, there are also some great free options that exist.
For our blog website, we’re going to use the free Kale theme available on WordPress.org, although you should definitely check to see if there’s a theme that is a better fit for your site. Kale is a theme that was created specifically for blogs, has over 20,000 users, and 175 five star reviews out of 177 total reviews. It has homepage sections to highlight content, is relatively straight-forward to customize and translatable.
To install Kale, log in to your WordPress site as the administrator. Next, go to “Appearance” -> “Themes” and click on the “Add New” button. In the “Search themes” box, type in “Kale”, hover over the theme and then click the “Install” button. Installing should take a couple of seconds, and once it’s done, click on the “Activate” button. That’s it, you’ve installed and switched to a new theme!
We’re also going to add in the suggested helper plugin for the theme. Go to “Plugins” -> “Add New”, and then search for “Kirki”. Click on the “Install” button, and once it’s installed, activate the plugin.
The first thing we’re going to do is set up our menu bar. To do that, head to “Appearance” -> “Menus”. We’ll call our menu “Main Menu”, and click “Save Changes”. Next, select the pages we created in the last video from the “Pages” box on the left-hand side of the page. Once you’ve selected them all, click on “Add to Menu”. You can drag and drop the pages into any order you’d like in the menu, and then press the “Save Menu” button. Click on “Manage Locations”, and select the menu we just created in the dropdown for the “Main” menu for the theme. Click “Save Changes”, and you should be all done with setting up the main menu for your site.
Once that’s done, let’s move on to customizing the theme’s color scheme. To make changes to the theme, head to “Appearance” -> “Customize”, which should bring up the WordPress customizer. Take a few minutes to set the colors up to match the style of your blog. In this video, we’ll change the background color of our website to light grey, set a logo for our site, and make the text color of the site a bit darker using CSS. Head to “Default Settings” -> “Colors” to open up a color picker. We’ll set our background to #eeeeee, but you can use the color picker to get whatever color is right for you. Next, click the back arrow and select “Site Identity” from the menu. Click the “Select Logo” button, upload an image file with your restaurant’s logo, crop it to your desired dimensions, and then select it.
Lastly, click on the back arrow twice, and then select “Additional CSS”. The additional CSS box is a really powerful tool to make styling changes to your site using cascading stylesheets, known as CSS. You can read a tonne about CSS online, but for now, just type the following ( body {color:#333333;}) into the box. Any CSS you add into the box will automatically be added to your site each time a page loads, and in the text we just entered, we’re saying that the text color for the body section of our site should be set to a dark grey. There are literally a million resources to learn about CSS and hexidecimal color codes on the internet, so we’ve linked to a couple of good ones in the description of the video.
As a next step in our theme tutorial, we’re going to set up our homepage. Click the back arrow and then select “Front Page”. We’re going to set up a posts slider as well as a featured posts section. You can include any of the other features in your homepage, just work at it a bit until you find a look that’s right for you.
Click on “Banner/Slider”, and select “Posts Slider”. This section lets you select a category of posts to feature on your homepage. We’re going to create a new post category called featured. Click on the “Save and Publish” button, then click on the “X” at the top left of the page to exit the customizer. Next, go to “Posts” -> “Categories” in the left-hand menu. Create a new category called “Featured”, enter a quick description of the category if you’d like, then hit the “Add New Category” button. You should see a “Featured” category now appearing in your categories list.
Next, select “Posts” -> “Add New” from the left-hand menu. We’ll create one fake featured post to test with. Enter “Test Featured Post” as the title, and “Testing featured content” into the body. Next, upload an image to the “Featured Image” section, and select the “Featured” category on the right-hand side of the page, and then hit “Publish”.
Next, head back to the “Customizer” in the left-hand menu, select “Front Page” -> “Banner/Slider” and then select the “Featured” category from the dropdown. Hit “Save and Publish”, and you should see your test post appear on the page if you browse to your homepage.
Next, go the the “Front Page” -> “Featured Posts” section of the customizer, and set the toggle to “Show”. We’ll title our featured posts section “Awesome Content”. If you’ve already created a few posts, you can select them here using the dropdowns. If not, come back after creating a few posts and use the dropdowns to add them to this section.
Finally, let’s set up our blog archive page. Go to the “Pages” table, and then select the blog archive page we created in the previous video. In the “Template” dropdown on the right-hand side of the page, select ________ from the list. This should turn the page into a posts archive page. Archive pages make it easier for visitors to be able to find older content on your site, so having one is an important tool for increasing the time that visitors spend on your site.
That’s about it for our theme setup for now, but there’s a tonne more that can be done to really get your theme customized for your organization. Check out our blog post on setting up your theme for this tutorial series to see additional changes we made to the demo site we’ve got set up. In the next video, we’ll cover selecting and adding plugins to your website, so that we can add in important features that are currently missing.
