Customizing a Theme with Additional CSS

For this exercise, please select and activate the Twenty Nineteen theme, which should have been installed by default along with WordPress. Once you have activated Twenty Nineteen, click the Customize tab underneath the Appearance tab. You should see the same set of options shown at right. The first four options are not theme-specific and apply to your site regardless of the theme that you choose.

Site Identity allows you to change your site’s title, tagline, and icon. We will explore menus and widgets in subsequent lessons. You already changed your Homepage Settings as you will see once you click on this option.

Additional CSS is where you can unleash your inner creative and easily change many aspects of a given theme. Custom CSS is VERY much theme-specific and any CSS that you add or modify for a given theme will not affect any other theme.. If you change to a different theme and later return to the customized theme, all of you custom CSS will still be there.  BTW, if you are curious, as I was, it appears that custom CSS is actually stored in your site’s database.

Let’s Customize

  1. Click the Additional CSS tab. A window will appear. This is where you add the CSS. You should be looking at the page that you chose for your site’s homepage. We will start by changing the CSS for your page’s header, whatever you named the page.
  2. My home page is simply named ‘Another Page’, and I happen to know that Another Page (or perhaps in your case, Home) is displayed inside of <h1> tags. Changing the CSS for h1 will NOT actually change anything though, because a class is also applied to the header.
  3. We need to figure out what that class is and, to do so, are going to inspect the heading. To follow these instructions you need to be using a Chrome browser. You can inspect with other browsers but the process is different.
    1. Highlight the “Home” heading with your mouse and right-click it. Select inspect from the drop-down menu and code should suddenly appear in another window.

      If things are working properly, you should be able to see divs in divs, and expand all to see that your header is inside of an h1 tag with the class of entry-title.

    2. Return to the Additional CSS window and enter .entry-title{font-size: 300px;}. Your font should explode! Change the font-size to something more reasonable and add background-color: black, as in
      Your text, which was also black, should disappear. Your next job is to add a font color to .entry-title as in:
      color: something;
      Given that we are at UGA, I expect red to be a popular choice.  At this point you own the header and can make it look however you want it to by picking a different font, changing the line height, the text spacing, etc. You could even add a Google, or other, web font, but that would require installing the web font via a plugin before-hand.
    3. If your page does not have a paragraph block, return to the page editor, add a paragraph block now with a bit of text, update the page, and return to the Additional CSS editor.
    4. Now inspect the text and you should discover that it is encased in a div tag with the class shown here
      Add that class to your Additional CSS and modify it as well. Have fun!Keep in mind that all themes are different. With certain themes, simply changing h1, h2 or p tags may have the same impact. It all depends on whether or not the them applies classes or ids to those elements. The main takeaway is that with a little perseverance, you can gain a lot of control over a given theme.

Make an element disappear with display: none

It is quite common for a WordPress theme to come with an element such as weird background image that you simply want to get rid off. The CSS rule display: none; provides a simple solution to this particular problem. The twenty nineteen theme doesn’t have anything especially annoying but, for purposes of illustration, let’s pretend that we do NOT want our page to display a header with the name of the page.

There are two ways to make our header disappear. Simply add
h1{display: none;}  or  .entry-title{display: none;} . h1{display: none;}  targets ANY h1 tag, while .entry-title only affects tags with this particular class.

Modify elements on a specific page

John Weatherford drew my attention to this page-specific option and it is pretty cool. Imagine that you want to change an element in just ONE page but do not want the changes to be in effect anywhere else?  There is a nice hack for that problem. Whenever you create a new post or page, or for that matter bring in a new image, WordPress automatically creates a specific ID and a specific class for those elements. Let’s see how this works.

  1. Create a new page. Add a paragraph block with a sentence of some sort.
  2. Take a look at the URL of your page and you should see the number that WordPress has assigned to your post.
  3. Now publish the page, visit it and view its source. The post number should appear in the code as shown below.
    The unique class or id of a given post or page gives you just the handle you need to change the CSS of that post or page, with no effect on the rest of your WordPress site.
  4. Take note of your post id and return to the Customize, Additional CSS editor. BTW, while you are logged in and on a specific page, one of your options should be to go directly to Customize, which will also allow you to see the effect of changes on that specific page.
  5. Add #post-105{background-color: orange;}
    (but change 105 to the number of YOUR post!)  
  6. Publish your changes and check out your page. The background color of the article that contains your header and paragraph block should be orange. Visit another page. No orange there, right? It worked!
  7. Time to get more specific. Return to the Customize, Additional CSS editor.
    Change #post-105{background-color: orange;} to
    #post-105 .entry-title {background-color: orange;}

    At this point, the header should change to orange, but only on this specific page. Visit another page just to be sure. BTW, you just used what is known as a descendant combinator to add more specificity and target .entry-title on a specific page. I added the link just in case you want to learn more about descendant combinators.