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 organization’s website, we’re going to use the free Vega 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. Vega is WooCommerce compatible, which is great if you’re going to be handling any transactions through your website, loads quickly, is translatable, and has a featured pages section that we’ll set up later in the video.
To install Vega, 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 “Vega”, 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!
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 “Header” 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 to your organization’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 restaurant’s promotional material. In this video, we’ll change the color palette of our website to blue, set a logo for our site, and make the text color of the site a bit darker using CSS. Head to “Custom Colors” and select “Blue” to change the color set to the theme’s blue defaults. Next, click the back arrow and select “Site Identity” from the menu. Click the “Select Logo” button, upload an image file with your site’s logo, crop it to your desired dimensions, and then select it.
Lastly, click on the back arrow, 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 final 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 “Featured Pages” 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. Let’s turn off any sections that we aren’t using for now, so set everything other than “Show Call to Action Section” and “Show the 4 Columns Section” to “No”.
To set up the content for the featured pages section, click on the back arrow and then select “Front Page – Icon Columns”. Under “General” let’s change the text to something that explains that this is a featured pages section. Next, click the back arrow, and go through each of the featured pages to set up pages with icons that make sense for their content. We’ll link to our main pages, so About Us, Events, Programs and FAQs. Again, you can set this up in any way that works best for your organization. Once we’ve got our 4 pages set up and their icons select, let’s hit “Save and Publish”. You should see your featured pages section appear on the page if you browse to your homepage.
There are a tonne of other possible sections and menus that can be set up using the Vega theme options, so spend a bit of time finding a look that fits 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. That’s about it for our theme setup for now. 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.
