Installing a WordPress Theme
Installing a WordPress theme
Installing a WordPress theme is like installing a plugin. To begin installing a wordpress theme, go to Appearance -> Themes then click ‘Add new’. Notice the themes already installed on the themes page. These are standard themes designed by WordPress and are fully functional. However, I’m going to search for and install a theme called Hueman, it’s a personal favourite. If you’re interested in installing another theme you can still follow along, most of the principles will remain the same. Good places to start looking for premium themes are ThemeForest and Elegant Themes.
Enter ‘Hueman’ into the search bar, hit Enter and install and activate the result when it shows up. Going back to the Themes page, Hueman will appear in the first position with ‘Active’ in the title bar. Now navigate to the sites home page url. Notice the entire look the site has changed. The theme governs the way the site looks. Now the theme is installed, there’s just one more thing to do, and that is create a child theme.
What is a child theme and why do we need one?
Child themes can be created a couple of ways. The manual way, and the automated way which can be done using a plugin called ‘Childify Me’. Once installed and activated, navigate to Appearance -> Customize in the WordPress dashboard. The dashboard will now show a menu in the sidebar on the left and a preview of your site on the right. Scroll down to the bottom of the menu to see the ‘Childify Me’ button and press it. When asked to enter a name enter the chosen theme name followed by a hyphen and the word ‘child’, for example ‘hueman-child’. Activate this newly created copy and we’re all done. We can now safely make changes to the theme without the changes being overwritten.
The newly created theme will appear in Appearance -> Themes, and should show as active. A ‘child’ banner should appear in the top left hand corner of the thumbnail. Go back to Appearance -> Customise to start customising the site.
Anatomy of a webpage in WordPress.
The visible portion of a webpage, in general, has three distinct areas: a header, a body and a footer. The header will normally contain the navigation, the body will hold the content and the footer will contain links to other important content such as legals etc. The layout of the content in the body will often be managed using sidebars, which can be seen to left and right of the main content. These sidebars will often contain widgets. A is some modular code wrapped up with a nice user interface and can be reused anywhere on the site. We’ll have a look at the widgets section in a minute, I just wanted to quickly describe what they are.
Let’s start customizing our site.
We’ll start customising the site. To start let’s change the logo and tagline. This can either be done through the ‘Header Design’ menu, or the ‘Web Page Design’ menu. I’m going to use the latter because I want to set the favicon and tagline as well. If you choose the Header Design menu, click the top link ‘Header Design: colors and others’ to access the logo option. Make sure the ‘Display a logo in your header’ checkbox is checked, then click the ‘here’ link. Upload the logo and click ‘Save and Publish’.
Next, change the tagline. This is done through the ‘Webpage Design’ menu, along with the favicon, which can be seen next to the page title in the browser tab at the very top of your page. Notice the tagline is set in a light grey colour. This doesn’t really fit the look I’m trying to achieve, and as there’s no option to change the colour of the font, we’ll have to go a little deeper.
To explain, we need to add something called CSS which is an acronym for Cascading Style Sheet. We won’t go too far into the semantics, so let’s leave it as we can change the look of anything on the page with CSS.
Using Developer Tools
There are a number of ways to add custom css, the easiest being Appearance -> Customize. Scroll to the bottom to the ‘Advanced Options’ menu item and look for the menu ‘Additional Css’. Click on that. Now we need to find out exactly what we’re trying to change. To do that we’re going to use the browser ‘Developer Tools’. Open them by pressing F12 on your keyboard or by going to the main menu and choosing Tools -> Developer Tools in the case of Chrome; or Tools -> Web Developer -> Firebug in the case of Firefox. Please note that Firebug needs to be installed for this to work. If not in the same flyout select Inspector. To use Developer Tools in Safari, look at this guide.
With the Developer Tools console open, use the mouse and right click on the element you’re looking to style, in this case the tagline. The element in question is a p ( for paragraph ) tag, with a class of ‘site-description’. Without going into too much detail, we want to update the color attribute to match the logo. Colors can be defined in both hexadecimal and RGBA format, which in this case would be #00b0ff or 0, 176, 255, 1 respectively. That probably is a bit much at this stage, but if you want to find out more about CSS I suggest that you start here.
Enter the new color for the tagline into the css pane in the customizer, then Save & Publish. If you want to check the color in the browser first, double click in the Developer Tools console, which will then allow you to edit the value. If you need some help with color codes or conversions check out Palleton or ColorCodeHex.
Ok, I think I may have taken that a bit far, but hopefully you’ve now got a theme installed and have an idea at least of how what CSS is and how it applies to the web. In the next article we’ll begin building out our store. Stayed tuned.
#Note: I should add that I have recently upgraded to Hueman Pro, and it includes the ability to change the color of the tagline.