In coming lessons, we will learn how to customize or “hack” WordPress themes authored by other web developers. To be able to “hack” a WordPress theme, we first need to get a sense of how it was developed. Each WordPress theme (free or paid) is different, with different CSS style rules and PHP. Then we will want to test the changes we want to make. Developer tools help us do both.

Outcomes:

  • Learn how to use Google Chrome Developer Tools for inspecting page elements.
  • Learn how to use the Firebug extension for Firefox to inspect page elements.
  • Use developer tools to test our changes and debug problems.

Developer Tools

Most, if not all, web browsers come with developer tools. Developer tools are a suite of helpful utilities that range from allowing you to inspect elements on a webpage and their associated CSS, to being able to see communications between the web server and browser. In this lab, we will be focusing on the tools that best aid us in customizing our WordPress websites.

For this lab, we will be teaching Google Chrome Developer Tools and Firebug, which is a developer tools extension for Firefox.

Please use either Chrome Developer Tools or Firebug. Most browsers have developer tools and each one is slightly different.

It is important to learn these for the upcoming lessons. Developer tools are going to help us to unmask any WordPress theme.

Note About Editing While Using Developer Tools

As you will see in the next two sections, developer tools enable us to “edit on the fly” or simply: edit the web page we are currently using developer tools on. You will be able to change or create HTML elements, and change or edit CSS style rules. This is a powerful capability, but there is a drawback.

ALL of the edits you make to a web page while using developer tools are NOT permanent! If you refresh or close the web page, the changes you make will go away.

We call this Live editing. You aren’t editing the actual source files on the web server that stores that website. You are editing the web browser’s computed version of the website.

Developer tools are a great way to debug your WordPress customizations and test new styling without having to save and refresh from a stylesheet.

Chrome Developer Tools

For the purpose of customizing WordPress, we are going to be using the elements panel which all developer tools include. Tuts+ is a paid course website and they have a full course on Chrome Developer Tools. Lucky for us, they let you preview the video on the Elements Panel! Just what we need.

To open Chrome developer tools, right click on any web page and select “Inspect Element”. Also, make sure you are using Google Chrome.

At times during the video, the instructor is going to use some terminology we are not familiar with and do not really need to know. I’m going to define one term that is used so it does not sound like total gibberish.

DOM. DOM stands for Document Object Model. The Document Object Model can be thought of as the computed version of the HTML the web browser renders. The DOM is shown on the left side of the Elements Panel in the developer tools. It is represented as a “Tree”, called the “DOM Tree”, where it indents and builds the webpage’s HTML in a tree format, with branches and nodes (leaves). Note: This is not the proper formal definition.

Ignore what the instructor talks about when discussing Event Listeners from 8:40 until 10:30. We will not be using this, but it is interesting.

As Everett does not own this content, you will need to navigate to the video here:

Chrome Dev Tools

Firebug

Firebug is a Firefox add on that allows you to inspect a webpage and see the HTML and CSS that comprise it. Download it here while using FireFox. Once you do, right-click anywhere on a webpage and select “Inspect Element With Firebug”.

Firebug Basic Text Walkthrough

Step 1: Identify An Element

I want to change the way the menu looks in the Twenty Twelve Theme. Specifically, I want to make the menu items centered instead of left-aligned.

Open up Firebug and click the select tool. Then select the menu area. Look to make sure that you’ve got the right thing selected by looking at the HTML. The class on that unordered list (remember that we used unordered lists to make the nave menus?) is “nav-menu” so this is probably the thing we want to alter

Step 2: Mess with the CSS

Here is where you get to play around. On the right hand side of the Firebug pane, you’ll see the style tab. This will tell you all the style rules affecting the element that you have selected. Double click on values to change them. Since we wanted to make the menu aligned in the center, let’s alter the “text-align” property to “center”. Don’t worry about all the other stuff.

You’ll notice that the change takes effect immediately on the page so you know what you did worked.

Step 3: Copy Pasta

Now all you have to do is copy the rule you just made.

Which one to use?

It is more of a personal preference. I personally use Chrome Developer Tools. One reason is it already comes with Google Chrome. There are differences between the two, but for this lab, it does not matter. You can decide for yourself.

Homework Assignment

Part 1

I have made changes to the default Twenty Fifteen WordPress theme here.

Download this text file.

Your job is to use either Chrome Developer Tools or Firebug to figure out the values for each CSS property I made a change to. This text file contains a skeleton of properties that I changed. Properties that have been changed are sectioned by the HTML element they style. After you have filled in all of the values, save this text file with the following name format: lastname_lesson2_part1.txt. Make sure to fill out the information with your lastname, firstname, and UCSC email in the text file as well.

Part 2

Time to have some fun! With developer tools we can make test changes to a website.

For part 2, you will make some changes to a webpage using developer tools and take a screenshot of your changes.

Let’s make some changes to one of our other Fellow’s labs. Go to CiviCRM’s second lesson here.

We are going to have some respectful fun! Follow these instructions:

  • Change the text of the lesson title “Lesson 2 …” to “Lesson 1.5: Installing the Kinda Cool CiviCRM”. Give this title a font-family of Cursive.
  • Give the title “Installion and basics of CiviCRM” a margin of 50px 5px.
  • Give the h3 with text “Outcome” a color of #E52FDC.
  • Change the text of the three list items under Outcome to something different.
  • On the right, give the title of “Contact” a font-size of 2em.
  • On the right, give the both the h3 titles “Leader” and “Facilitator” a font-size of 25px.
  • Change the text of the title “Leader” to “CiviCRM Geek”.
  • Change the text of the title “Facilitator” to “CiviCRM Geek Helper”

Take a screenshot of the webpage after you have made these test changes. Make sure to not refresh the page. You are able to close the developer tools panel without the changes reverting back.

Save the screenshot as: lastname_part2. (whatever the picture file extension is, for example mine was .png).

Submission

Email wordpress@labs.everettprogram.org as follows:

  • Your email subject should be in the following format: HW#2 Firstname Lastname
  • In the body of the email, email me what type of computer you use at home (PC/Mac/Linux) and what developer tool you are using (Chrome dev tools/Firebug).
  • your Part1 text file answers and your Part2 screenshot as attachments.