Modifying a Theme: Free WordPress Tutorial

Topics Covered in This WordPress Tutorial:

Adding a Header Graphic, Customizing Links, Changing the Header Background, Removing the Categories Menu

Exercise Preview

Exercise Overview

Now that we’ve created the child theme, it is time to customize the look of the Monteith Restoration & Performance blog. In this exercise, you will be modifying the look of your blog without having to touch any of the markup. Simply modifying the CSS and changing some of the theme’s options will be enough to give your site a complete makeover.

Setting Theme Options

Depending on your theme, you may have options available to help you customize your blog without having to write any code.

1. Open Chrome and go to:
   • Mac: localhost:8888/mrpBlog/wp-admin
   • Windows: localhost/mrpBlog/wp-admin

2. If asked, enter your username and password.

3. On the left side of the Dashboard, mouse over Appearance and click Obscure Theme Options to go to the General Settings page.

4. Notice that there is a field under Custom Logo where we can add the URL of an existing logo. We’ll have to upload a logo first and then add its URL here.

5. On the left side of the Dashboard, mouse over Media and click Add New.

6. Click the Select Files button. A window should open up for you to select your file. If it does not, complete the sidebar below to use your browser’s built-in file uploader.

   Uploading a File Using the Browser’s File Uploader

   If the WordPress Uploader is not working for you, don’t despair. You can also use your browser’s file uploader to upload files.

   1. Click the browser uploader link.
   2. Click the Choose File button.
   3. Navigate to the Desktop, then into Class Files > WordPress.org Class >
      Child Theme Files.
   4. Double–click mrp-logo-header.jpg to choose it.
   5. Click the Upload button.

7. Navigate to the Desktop, then go into Class Files > WordPress.org Class > Child Theme Files.

8. Double–click mrp-logo-header.jpg to choose it.

9. To the right of the image name, click on Edit.

10. On the right-hand side under File URL, highlight the entire URL.

11. Hit Cmd–C (Mac) or CTRL–C (Windows) to copy it.

12. On the left side of the Dashboard, mouse over Appearance and click Obscure Theme Options.

13. Click in the field under Custom Logo and press Cmd–V (Mac) or CTRL–V (Windows) to paste the file URL.

14. Click the Save Changes button at the top right of the page.

15. Click the Monteith Restoration & Performance link at the top left of the page to preview the site.

    The new logo is in place, but it doesn’t match the background. It would also be nice if all the link colors matched the orange color found in the logo. To fix this, we will need to modify the child theme’s style.css file.

Styling the Links

1. Switch to your code editor.

2. You should still have style.css open. If not, open style.css from the obscure-mrp folder now:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrpBlog > wp-content > themes > obscure-mrp
   • Windows: C: > xampp > htdocs > mrpBlog > wp-content >
     themes > obscure-mrp

3. It is very important that we make sure we are editing the style.css file in the obscure-mrp child theme and not the style.css file from the obscure parent theme. Make sure that the header information says:

   /*
   Theme Name:     Monteith Restoration and Performance
   Description:    Custom theme based on the Obscure theme. Obscure must be installed in order for this theme to work. 
   Author:         Your Name
   Author URI:     http://www.Noble Desktop.com/
   Template:       obscure
   Version:        1.0
   */

   If not, double-check that you have navigated to the obscure-mrp theme folder and not the obscure theme folder.

4. Let’s change the color of all the links to match the orange in the MRP logo. After the header text, around line 10, add the following rule:

   a {
      color: #e75c1b;
   }

5. Save the file.

6. In Chrome go to (or reload if already open):
   • Mac: localhost:8888/mrpBlog
   • Windows: localhost/mrpBlog

7. Notice that the color of the links on the page still do not match the logo. That’s odd, our link style is not working for some reason.

Using Developer Tools

We are going to use Chrome’s Developer Tools to figure out what’s going on with our link style. Developer Tools allow you to debug and inspect a live webpage’s HTML, CSS, and JavaScript code. We will use it to select items on our pages and see what CSS properties are being applied to them. It is especially useful for WordPress sites because the code is being generated dynamically, so finding specific code among many templates can be challenging.

NOTE: Most major browsers have Developer Tools built in. The steps in this workbook for working with the Developer Tools are written for Chrome. If you decide to use another browser, the steps will be similar.

1. Make sure you are viewing the page in Chrome:
   • Mac: localhost:8888/mrpBlog
   • Windows: localhost/mrpBlog

2. CTRL–click (Mac) or Right–click (Windows) on the 1 COMMENT link, and select Inspect.

3. The Developer Tools will open in the bottom of the window.

   

   The left panel of the Developer Tools console shows the page’s HTML code. The right panel shows the CSS styles applied to the element that is currently selected in the left panel.

4. In the left-hand panel, the <a> tag for the 1 COMMENT link is selected. The right-hand panel lists all CSS rules that apply to the tag. Scroll down until you find the rule we just created (about fourth on the list). Notice it is crossed out to signify that it is being overridden by the rules above it. We need to make our rule more specific so it won’t be overridden.

5. Switch back to your code editor.

6. Around line 10, change the a rule to the following:

   a:link, a:visited, a:hover, a:active {
      color: #e75c1b;
   }

7. Save the file.

8. Switch back to Chrome and reload the page. Notice that the color of our links have changed to match the orange in the logo!

   IMPORTANT: In recent versions of MAMP, there is a feature called OPcache that may cache the pages of the site you are developing. This may cause you to not see changes you make to the code when you reload the page in the browser. If this happens to you at any point, refer to the Disabling OPcache in MAMP page in the Reference section in the back of the workbook for steps on disabling this feature.

9. Click the 1 COMMENT link.

10. Notice that the color of the links in the comment section are a reddish brown color and don’t match the rest of the links on the page.

11. CTRL–click (Mac) or Right–click (Windows) on the PERMALINK link, and choose Inspect.

12. In the right-hand panel, notice that our rule is crossed out again. One rule is a little more specific than the one we created. No worries, we can simply incorporate that rule’s selector into our rule in the child theme’s style.css and override it that way.

13. Switch back to your code editor.

14. Around line 10, edit the a rule as follows (don’t forget the comma after active!):

    a:link, a:visited, a:hover, a:active,.comment-meta a:link,.comment-meta a:visited {
       color: #e75c1b;
    }

15. Save the file.

16. Switch back to Chrome and reload the page. Notice that the color of the links in the comments field matches the rest of the links on the page. Awesome!

Changing the Header Background

Let’s change the background of the header to match the logo. First, we need to find the style rule that needs to be overridden.

1. CTRL–click (Mac) or Right–click (Windows) on the dark gray background to the left of the logo, and choose Inspect.

   The left-hand panel will now highlight a div tag with an ID of wrapper. In the right-hand panel, the #wrapper rule includes a background property.

2. Let’s confirm that we have found the correct style for the background by disabling the property. In the right-hand panel, hover over the left of the background property to reveal a checkbox .

3. Click the icon to disable the property and see that the background disappears.

   

   It looks like the #wrapper uses a repeating image for the background image. To override this style, you will need new artwork and a new style in your child theme. Before creating a new style, you must add the new artwork to your theme folder.

4. Open a new Finder (Mac) or Explorer (Windows) window.

5. Navigate to the Desktop, then into Class Files > WordPress.org Class > Child Theme Files.

6. Click once on wrapper-bg-mrp.png to choose it.

7. Press Cmd–C (Mac) or CTRL–C (Windows) to copy it.

8. Go to the obscure-mrp theme folder:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrpBlog > wp-content > themes > obscure-mrp
   • Windows: C: > xampp > htdocs > mrpBlog > wp-content >
     themes > obscure-mrp

9. Create a new folder called: images

10. Open the images folder.

11. Press Cmd–V (Mac) or CTRL–V (Windows) to paste wrapper-bg-mrp.png.

12. Switch back to your code editor.

13. After the link style, around line 13, add the following rule:

    #wrapper {
       background-image: url(images/wrapper-bg-mrp.png);
    }

14. Save the file.

15. Switch back to Chrome and reload the page to see your new background. Cool!

16. Close the Developer Tools console.

Removing the Categories Menu

This theme has a menu underneath the logo that displays the blog’s categories. Because categories are already being displayed in the sidebar, let’s get rid of the menu. Menus can be controlled through the Dashboard, and we are just going to create an empty menu to override the default menu.

1. In Chrome, go to:
   • Mac: localhost:8888/mrpBlog/wp-admin
   • Windows: localhost/mrpBlog/wp-admin

2. Mouse over Appearance and click Menus.

3. To create a new menu called Empty, In the field next to Menu Name, type: Empty

4. Click the Create Menu button.

5. The menu we’re replacing is the secondary navigation menu. On the right side of the page next to Theme locations, check the box next to Secondary Navigation.

6. Click Save Menu.

7. Click the Monteith Restoration & Performance link at the top of the page to view your modified theme.

   We will explore menus in more depth later in the course.