This is the blog post that accompanies the following video:

W3Schools CSS Intro – https://www.w3schools.com/css/css_intro.asp
CSSTutorial.net – https://www.csstutorial.net/

Transcription:
BThis 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 restaurant website, we’re going to use the free Bakes and Cakes 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. Bakes and Cakes is WooCommerce compatible, which is great if you’re going to be selling foodstuffs through your website, loads quickly, is translatable, and has interesting homepage sections such as testimonials and calls to action that we’ll set up later in the video.

To install Bakes and Cakes, 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 “Bakes and Cakes”, 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 “Primary” 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 restaurant’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 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, a very light grey, 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 final step in our theme tutorial, we’re going to set up our homepage. Click the back arrow and then select “Home Page Settings”. We’re going to set up an “About Us” section, along with a couple of fake testimonials. 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 “About Us Section”, and select your “About Us” page.

For our testimonials, we’re going to create a new post category called testimonials. 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 “Testimonials”, enter a quick description of the category if you’d like, then hit the “Add New Category” button. You should see a “Testimonials” category now appearing in your categories list.

Next, select “Posts” -> “Add New” from the left-hand menu. We’ll create two clearly fake testimonials for the time being, but you should look for or solicit a few real ones from your customers. Testimonials have been shown to be one of the most effective tools to get people to believe your site it authentic. We’ll call our first testimonial “Fake Testimonial One”, and in the body write “This is a fake testimonial.”. In the right-hand column, select “Testimonials” from the “Categories” list. Click “Publish”, and then hit the “Add New” button create our second one. We’ll call this one “Fake Testimonial Two”, and write “This is also a fake testimonial.” in the body of it. Select the testimonials category again, and hit “Publish”.

Next, head back to the “Customizer” in the left-hand menu, select “Home Page Settings” and then click on “Testimonials Section”. Check the “Enable Testimonials” checkbox, select our newly created testimonials category from the “Categories” dropdown, hit “Save and Publish”, and you should see your fake testimonials appear on the page if you browse to your homepage.

That’s about it for our theme setup in this video, 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.