• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/7/20

Customize a WordPress theme's inner workings

Log in or subscribe for free to enjoy all this course has to offer!

If the customizations offered by the theme customizer weren't enough for you, you have virtually endless customization possibilities when you work within the WordPress editor. The customizer allowed you to handle many image, organization, and color related tweaks, but the editor will let you get down to the CSS level to change spacing, sizing, and more. The editor is accessed from the left hand menu of our page as usual: Appearance > Editor.

Theme editor (styles.css)
Theme editor (styles.css)

The theme's stylesheet will be open by default, which is called styles.css. You can see all available files to edit on the right-hand side. You don't need to worry about all the PHP files you see if backend code isn't really your thing; there's a lot you can accomplish just in CSS within this first file!

The first thing I recommend doing from the editor screen is to copy the contents ofstyles.css and paste them within a text editor. I use Sublime Text, but you can also use Atom or another editor of your choice. Save this file assydney_default_styles.css somewhere on your computer. This way you have a copy of the theme's default styles and can reset any changes you make.

I propose increasing the size of the big slider text for practice. This change will help you see how to locate a particular style rule and modify the right line of CSS!

Identifying elements

Here are several quick introductory tidbits you'll use in your hunt to find certain CSS within a theme's stylesheet.

CSS comments

Theme developers often leave comments within their code to help users understand how it works. A code comment, no matter the language, is text that does not have functionality beyond just being a human-readable note. A CSS comment starts with/* and ends with*/. For example, within the Sydney theme stylesheet, we see a comment like this:

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/

The theme's developers left this comment to introduce the style rules for the theme's header. Feel free to remove comments if you don't find them useful, or add and modify your own!

Inspect elements

Most HTML elements within a theme are identified with a class or ID. CSS rules then target these classes and IDs, so the right rules are applied to the right elements!

You'll need to know how to find the class, ID, or general element type of something on your page so you can then hunt down the relevant style rules. In most browsers, right-click on an element and select "Inspect" or "Inspect element" from the menu that appears.

Inspected element
Inspected element

Within these developer tools, you'll see all the HTML associated with a particular element. You could search the stylesheet for entry-title  now to find the associated styles with this element.

Identified class within stylesheet
Identified class within stylesheet

Increase slider text size

Slider defaults
Slider defaults

If this text isn't large enough for our design purposes, we should find the CSS line that defines the font size. The first step is to identify the element in order to find it within the stylesheet. By inspecting the element, you see it's an h2 element with the class maintitle. Simply using the find command (cmd-F on Mac, ctrl-F on Windows) within the theme editor pulls up the styles associated with the class!

The two relevant rules for adjusting the font size will be the following two lines:

font-size: 57px;
line-height: 67px;

Let's not pick new font sizes willy-nilly. Instead, we'll make sure we're sticking with a good ratio. I'm a fan of the 3:4 ratio (font sizes 5, 7, 9, 12, 16, 21, 28, 37, 50, 67, and 83) so will change the font-size to 67px and the line-height to 83px. You can, of course, always pick your own values based on your preferences or content needs! My CSS goes from this:

.text-slider .maintitle {
    position: relative;
    display: inline-block;
    font-size: 50px;
    line-height: 67px;
    font-weight: 700;
    padding-bottom: 10px;
}

to this:

.text-slider .maintitle {
    position: relative;
    display: inline-block;
    font-size: 67px;
    line-height: 83px;
    font-weight: 700;
    padding-bottom: 10px;
}

Click Update file to save your changes. Here's the before and after of our font size modification within the editor. Now the title pops!

Increased font size of slider text
Increased font size of slider text

Using this same method:

  1. Identify an element in the page

  2. Modify the CSS associated with that element in the theme stylesheet.

You can modify text styles (font-size,color...), element spacing (padding,margin...), arrangement (float,position), and more.

Install a plugin

You've customized your site appearance on a number of levels. You can also extend your site's functionality by tapping into the universe of plugins that other WordPress developers have made available to you. For example, my band would like to have a contact form on their Contact page that sends user messages by email. 

Since this is a common functionality, you can assume that someone else has already made it available as a plugin! Click Plugins on the left-side Dashboard menu and Add new. From there, you can search "contact" or whatever other functionality you seek.

Contact-related plugins
Contact-related plugins

I'll select "Contact Form Clean and Simple," since that's exactly the functionality I seek! Clicking "Install Now" will install the plugin, and after installing any plugin you need to also click Activate on the next screen. 

This new plugin now appears within my list of all plugins, and I'll click Settings in order to customize the plugin for my needs. I can decide whether to require users to do a reCAPTCHA before submitting a message, which email address the messages should be sent to, and more.

Contact plugin settings
Contact plugin settings

You may also notice the line,

Please Note: To add the contact form to your page please add the text [cscf-contact-form] to your post or page.

This is how you'll actually make the form show up on one of the pages! I'll navigate over to Pages > Contact, which is the contact page I set up in a previous chapter.

Integrating plugin into the Contact page
Integrating plugin into the Contact page

Now I can go to my live contact page to check out my snazzy contact form!

Contact form via plugin
Contact form via plugin

There are so many ways to customize WordPress, from pages, beautiful themes, personal theme customization, and plugins. Let WordPress help you build the exact site you need, however you need it!

Example of certificate of achievement
Example of certificate of achievement