WordPress Theme Styling

After installing WordPress, you might notice that you can only go so far in modifying the theme using the WP user interface. The most granular control is found in the Editor (Dashboard > Appearance >Editor), where you can modify the CSS, PHP, and HTML directly. I find this a little cumbersome and rather enjoy using Microsoft Visual Studio with all its features, like Intellisense, element formatting, and syntax coloring which all help me write code.

Here are the steps I took to modify the WordPress Twenty-Sixteen Theme, shown below, and made it look like the theme you’re reading this post in.

WP Twenty-Sixteen Theme
WP Twenty-Sixteen Theme

Although I used Visual Studio, you can do this without adding anything extra on your Windows or Mac computer. You can get away with using only a text editor, like Windows Notepad, a modern browser, like Chrome, and of course the WordPress Dashboard for the initial modifications. So let’s begin!

Basic Dashboard Modifications
  1. Go to your WP Dashboard and choose Appearance > Customize.
  2. Customize as you see fit. Here are the modifications I used for the current theme.
    • Site Identity: Title only. No logo and no tagline gives a minimalist effect.
    • Colors: Base and background both white. This removes the black border.
    • Header Image: Use 1200 x 280 px. Don’t crop.
    • Menus: Primary top and Social Links. I only link to my main website, but normally one would at least link to the About and Contact pages. I kept the default Social links for now.
    • Widgets: I used Recent Posts, Archives, Categories, Tags, Calendar and Search.
    • Front Page: Latest posts

These are the basic modifications I made to the Twenty-Sixteen theme using the WP Dashboard. If you go to the bottom of the Appearance menu and click on Editor, you will see the files you have access to changing in the right sidebar. If you aren’t familiar with how PHP interacts with HTML, it might be best to leave all the files alone. Later we’ll make some small changes to header.php and footer.php, but for now let’s stick to making style changes with style.css, which is near the bottom of the Editor list.

For a complete look at WordPress Themes, see https://codex.wordpress.org/Themes

Setting Up a Sandbox

Every theme in WordPress has its own style sheet called appropriately, style.css. This is what tells your WordPress blog how to look. Some of the changes we made using the Dashboard were written to the style.css file. But the theme’s CSS file goes into more detail; in fact, right down to the last pixel.

It is important that the structure of style.css maintains the header information. If you are just modifying a theme, like we are now, you can just leave this, but be sure not to delete it. For all the info on theme development, see: https://codex.wordpress.org/Theme_Development.

A couple of things to keep in mind are, always work on a copy of style.css and comment all your changes. When I make a change I comment like this:

/* kkr - deleted margin-top: 50px to move image up */

I can find all my changes using “ctrl-f” to search the text of the document for kkr. Working with style sheets will necessitate using the search function a lot.

Now let’s look at a way you can play with your style sheet to your hearts content without touching your WordPress active site. When you are satisfied with your styling, we’ll look at how to make it live.  I’ll give you the quick and dirty steps and then explain how it works.

  1. On your computer create a folder naming it something like wp_sandbox.
  2. Log out of WordPress
  3. In a modern browser (Chrome, Firefox or Opera) Open your WordPress blog
  4. Right-click anywhere in the white space of the primary blog page and choose Save As
  5. Navigate to the wp_sandbox folder you created
  6. Make sure the Save As Type is set to Webpage, Complete
  7. Name it something like Front_Page.html and save it in your new folder
  8. Close your browser and navigate to and open the wp_sandbox folder
  9. Click the Front_Page.html file and it will open in your default browser
  10. Open the new folder named Front_Page_files
  11. Right-click on style.css and click Open With and choose Notepad or any plain text editor (the style sheet may look like a bunch of gobbledy-gook, but just leave it for the moment.

Let’s go over what we just did. First we created a sand box to play in. We logged out of WP so as to not have to deal with the Admin Menu Bar at the top of the Blog page. Then we opened our blog and using a modern browser it allowed us to save the web page (html) and in a separate folder the supporting files (which included the style sheet). After we saved everything, we closed the browser only so there would not be confusion as to the live site and the sandbox site.  Of course the path or URL in the browser’s address bar to the sandbox version will look something like this:

file:///C:/Users/Kevin/Documents/Visual%20Studio%202015/WordPress_Sandbox/Front_Page.html

If you opened style.css with a plain text editor like Windows Notepad, as I mentioned above, it probably looks like nonsense because it lost its white space and formatting. If you are using any full development environment software such as Visual Studio, open the sandbox folder as a web site and all your files will be formatted. If you are using a single file code editor, your file will also be formatted correctly.

Note: Apart from Visual Studio, my favorite code editor is Notepad++.
Download here:  https://notepad-plus-plus.org/download/v7.3.3.html

If you are serious about learning web development, you should download at least a code editor. It makes doing this a whole lot easier. Both Notepad++ and Visual Studio Community are free products as are many other development tools. You don’t have to break the bank to learn how to build web sites. To get the Windows Notepad or any plain text version formatted we need to jump through a little hoop.

  1. Highlight all the text in wp_sandbox\style.css in Notepad and press the Delete key to delete it.
  2. Open your WordPress site and go to Appearance > Editor and in the right column, at the bottom, click style.css.
  3. Highlight all the text and copy it and paste it into your open Notepad version of style.css, being careful not to delete the text from the website version. (If you should accidentally delete working version, just don’t click the Update File button)
  4. Save the Notepad version and the formatting will remain intact.

If you are used to working with files, cutting and pasting, etc. the above steps should only take a few minutes. Now we are ready to actually play with some CSS. By using this sandbox folder we created, we can fiddle with styles and if we mess something up, the worst case scenario would be to just delete the contents of the sandbox and start over. You can save a copy of the style.css with another name or in another folder so you have a backup formatted copy.

The big idea here is to keep both style.css open for editing and Front_Page.html open in the browser. When you make changes to the style sheet and click Save, you can then refresh the browser and see what your style changes accomplished on the web page. This is also a good way to learn CSS without disrupting your active web site.

Modifying style.css

Let’s start with a few thoughts on CSS in general. Usually CSS (Cascading Style Sheets) works in combination with HTML, JavaScript, and often several other technologies as components of the structure of a website which is referred to as a framework.  Without getting too deep, we could say that the style sheet portion of a website is a part of the presentation layer of the framework. My main website at KRobbins.com uses the Bootstrap framework.

Bootstrap uses a grid system, which divides the screen into rows and columns. Using this method you can add <div> containers to a defined CSS class to give it your style. WordPress is slightly different in that it goes more towards the flex-box paradigm. For a fun and interesting tutorial game on using flex-box, try http://flexboxfroggy.com/.

WordPress also does not use any static HTML pages. It uses a scripting language called PHP (Hypertext Preprocessor) to create HTML pages on the fly (at runtime). PHP pages have a lot of HTML embedded in them but they have a PHP file extension. They will not open in a browser without a the proper processor.

Onward! Now that you can see your style sheet formatted correctly, you will see that it has a large commented area that includes a table of contents. All themes in WordPress must include this area and its information. The TOC makes it very easy to find areas of your style sheet and the items in the WordPress themes are organized by HTML categories.

To see how this works, go to  4.0 – Elements in the TOC and double-click on the word Elements to highlight it. Press Ctrl-C to copy, Ctrl-F, to open the Find dialog, Ctrl-V to paste it, and click Next. Now you should be at the Elements section of the file where you will find the basic HTML elements used across the theme. Of course you can scroll up and down, but scrolling is somewhat inconvenient.

Another Windows keyboard shortcut you may use is Ctrl-H. This will open the Find and Replace dialog which is very handy for making bulk changes in your theme, such as the main font. Some editors may use different keyboard shortcuts.

Before making any changes, you might want to take a look at the end of this article where I have a couple of tips that might help with becoming familiar with the style sheet and how it is formatting your page.

Here are the changes I made to make the WP Twenty-Sixteen theme shown above, look like this:

 

Image of my modified theme.
My modified theme.

The actual changes are in red. Comments are in green, unless the comment was to create an actual change.

Replace the main font:

Starting at the very top of the style sheet, before the comments, I added:

@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

This import function allows the use of the Raleway font from Google fonts, an amazing collection of available fonts for any website. The reference to 400, 700 in the call means I am using narrow and bold. I like the narrow look for the headers and menus. The default Twenty-Sixteen theme uses a font called Montserrat. To replace it with Raleway, do a Find and Replace of every instance of:

font-family: Montserrat, "Helvetica Neue", sans-serif;

Replace it with:

font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
Removing white space at the top of the page

These changes take a few tweaks to accomplish. They remove the large amount of white space at the top of the page.  I am going to list each CSS class and change with my comment. You can use the class to find the location. I am showing the entire class, including my commented change, except for the @media screen, which only shows the sub-class to change.

As you are making changes, be sure to save and check your web page often!

.site-header-menu {
    display: none;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    /* kkr-set top margin from 0.875em to 0 to move menu up slightly*/
    margin: 0 0;
}
.site-branding {
 /* kkr set margin top and bottom from 0.875em to 0 to move brand to same level as menu and allow image to move up slightly*/
  margin: 0 auto 0 0;
 /* Avoid overflowing wide custom logo in small screens in Firefox and IEs */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.header-image {
  clear: both;
 /* kkr-moved the image up slightly */
 /* margin: 0.875em 0; */
  border: 1px solid transparent;
}
@media screen and (min-width: 44.375em) {
    .site-branding {
    /* kkr-removed to move site title up slightly */
    /* margin-top: 1.3125em; */
    margin-bottom: 1.3125em;
    }
   .site-header-menu {
   /* kkr-moves the menu up slightly */
   /* margin: .3125em 0; */
   }
    .header-image {
    /* kkr-moves the image up slightly */
    /* margin: .3125em 0; */
   } 
}
 @media screen and (min-width: 61.5625em) {
     .site-header {
     /* kkr-original top padding of 5.25em set to 0 to decrease white space at top of page */
     padding: 0 4.5455%;
   }
    .site-branding,
    .site-header-menu{
    /* kkr-removed top margin to move image up slightly and bottom to allow image to move up */
    /* margin-top: 1.75em; */
    /* margin-bottom: 1.75em; */
   }
    .header-image {
    /* kkr-seperated image from the group of items above to have a separate bottom margin */
    margin-bottom: 1.75em;
   }
}
@media print {
     .site-header {
    /* kkr-set original padding bottom of 1.75em to 0 to remove white space */
      padding: 0 0 0;
   }
    .site-branding {
     margin-top: 0;
   /* margin-bottom: 1.75em; */
  }
}
Widgets

To give the widgets in the sidebar the look I wanted, I removed the bottom border, and rounded the corners and colored the title areas.

.widget {
 /*kkr - removed top border*/
 /*border-top: 4px solid #1a1a1a;*/
 margin-bottom: 3.5em;
 padding-top: 1.75em;
}
.widget .widget-title {
/*kkr-changed font to Raleway*/
 font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 16px;
 font-size: 1rem;
 /*kkr-changed font color to white*/
 color: white;
 letter-spacing: 0.046875em;
 line-height: 1.3125;
 /*kkr-changed color to that red hue*/
 background-color: #d9534f;
 border: 1px solid #d9534f;
 /*kkr-rounded corners of title area*/
 border-radius: 4px;
 /*kkr-added a little padding to the title*/
 padding-left: .2em;
 margin: 0 0 1.75em;
 /*kkr-removed the uppercase title*/
 /* text-transform: uppercase; */
}

Lastly, I added a couple of items before the TOC. These classes can be added to individual posts or to PHP pages. The first gives stylized bullets to unordered HTML lists and the second rounds the corners of any image.

 /*kkr-list bullets*/
ul.my{
 list-style: none;
 margin-left: 0;
 padding-left: 1.2em;
 text-indent: -1.2em;
}
li.my:before {
 content: "\27a5 \0020";
}
 /* kkr-added for rounded images, especially header image */
.img-round {
 border-radius: 6px;
}

Those are the basic changes to the style.css file. The last couple of items we will do are some slight changes to the header.php and footer.php files.

I changed the site title link in footer.php and replaced it with a hard coded copyright and link to my main site by replacing line #50 with the following:

<span class="site-title">&copy;&nbsp;2017 - <a href="http://www.krobbins.com">KRobbins.com</a></span> 

Lastly, in the header.php file I removed the header image hyperlink, by commenting out the <a> tag completely and adding the rounded corners (img-round) class to the image. Below is the entire <div> with the changes and comments.

  <div class="header-image">
 <!-- Removing the a tag and link from the header image
 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> -->
 <img src="<?php header_image(); ?>" class="img-round" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
 <!-- </a> -->
 </div><!-- .header-image -->
Go Live

The acceptable method of updating files in WordPress is to use an FTP (File Transfer Protocol) program. Visual Studio has that feature build in, but a good free program I also use is FileZilla. Since I said you could do this entire tutorial without downloading anything, we’ll do it another way.

When you are satisfied that your style.css is making your Front_Page.html look just the way you want it to, simply highlight and copy all of its text.  Then login to WordPress, go to the editor and bring up the styles.css file and highlight the text and delete the text. Paste in your new text from your modified version. At the bottom of your theme editor window in WordPress, click Update File.

In the upper right corner, click the Preview Changes button to check out the live site. If you are not happy, under the Preview button, you can click Browse link next to Revisions to go back to the previous copy.

So there you have it! Remember to work on copies or otherwise backup originals.  If you keep your style sheet open in the editor, you can use Undo (Ctrl-Z) even after Saving to revert from changes that did not accomplish what you intended.

Tip

Here is the tip I promised earlier. Just about all modern browsers are capable of this, I just think Chrome does it best. Of course you know that you can right-click on the page and View Source Code. But for a real look under the hood at how that source code and style sheet work together, right-click and choose Inspect.

Image of Inspection Screen from Google Chrome.
Inspection Screen from Google Chrome.

The Inspection Screen provides three panel areas. The left screen is the web page. The upper right screen shows the HTML under the elements tab. If you hold your cursor over an element, it becomes highlighted on the web page screen. You can use the arrow heads next to each element to drill down into its nested elements. Clicking an element also causes its CSS to appear in the lower right under the styles tab. And the styles attribute properties in the smaller panel to the right contains a visual box showing the padding, margins and borders of the selected element with the property values below it. Obviously this is a valuable tool for any web developer in investigating how their styles render HTML.

Extra Tip

Another method of helping you see where many of the elements are in your page, is to give them a border using the border attribute. For most WordPress themes, you can do this for several elements with one line of code.

In the style.css file near the top, in the beginning of the 1.0 – Normalize area, add the border line as shown below.

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
 display: block;
/*add this border for troubleshooting margin and padding issues*/
/* border: 1px solid black; */

You can comment and un-comment as necessary to help you see where your HTML elements in that list are placed.

That’s all I have! I hope you got something out of this little excursion into WordPress themes and CSS. Please leave a WP comment below or click here to use my main site contact form.

Thanks! – kkr

Leave a Reply

Your email address will not be published. Required fields are marked *