CSS selectors

With CSS, you can provide style (such as size, color, and placement) to the display of elements on your blog (such as text links, header images, font size and colors, paragraph margins, and line spacing). CSS selectors contain names, properties, and values to define which HTML elements in the templates you will style with CSS. CSS selectors are used to declare (or select) which part of the markup the style applies to. Table 10-1 provides some examples of CSS selectors and their use.

Classes and IDs

You can find the stylesheet (style.css) for the default Twenty Fifteen theme on the Edit Themes page in your Dashboard (see Figure 10-1). Everything in it may look foreign to you right now, but I want to bring your attention to two items you see when you scroll down that template:

• #content: One type of CSS selector. The hash mark (#) indicates that it’s a CSS ID.
• .singular: Another type of CSS selector. The period (.) indicates that it’s a CSS class.

IDs and classes define styling properties for different sections of your WordPress theme. Table 10-2 shows examples of IDs and classes from the header.php template in the Twenty Fifteen WordPress theme. Armed with this information, you’ll know where to look in the stylesheet when you want to change the styling for a particular area of your theme.

If you find an element in the template code that says id (such as div id= or p id=), look for the hash symbol in the stylesheet. If you find an element in the template code that says class (such as div class= or p class=), look for the period in the stylesheet followed by the selector name.

CSS properties and values

CSS properties are assigned to the CSS selector name. You also need to provide values for the CSS properties to define the style elements for the particular CSS selector you’re working with.

In the default Twenty Fifteen WordPress theme, the markup on line 30 in the Header template (header.php) is <div class="site-branding">. This class, with the name site-header, provides styling for the site header.

In the default Twenty Fifteen WordPress theme stylesheet, the CSS defined for the site-header class is as follows:

.site-branding {

min-height: 2em;

padding-right: 60px;

position: relative;

}

Every CSS property needs to be followed by a colon (:), and each CSS value needs to be followed by a semicolon (;).

The CSS selector is .site-branding, which has three properties:

• The first CSS property is min-height, which has the value of 2em;.
• The second CSS property is padding-right, which has the value 60px;.
• The third CSS property is position, which has the value of relative;.

Table 10-3 provides some examples of commonly used CSS properties and values.

Creating a custom background

The Twenty Fifteen WordPress theme is packaged with the option to change the background to a different color or use an image for your background. To use the nifty, built-in custom background feature to change the Twenty Fifteen background for your blog, follow these steps:

1. Click the Background link under the Appearance menu.

   The Custom Background page loads in the Dashboard.

2. Click the Select Color to change the background color.

   You can enter a hex color code in the text box provided shown in Figure 10-2.

   If you don’t know what hex color code you want to use, click the Select Color link and click a color within the provided color picker (see Figure 10-2). The color selected in Figure 10-2 is #f1f1f1, which is gray.

   A hexadecimal (or hex) code represents a certain color. Hex codes always start with a hash symbol (#) and have six letters and/or numbers to represent a particular color; for example, the code #f1f1f1 represents the color gray in hexadecimal code. I talk more about hexadecimal values in the following section, “Changing the background using CSS.”

3. Click Background Image to use an image file for the background or upload an image from your computer.

   Click the Browse button under Background Image and select a file from your the existing WordPress Media Library, or click Upload Files to upload an image from your computer. Then click the Choose Image.

4. Change the display options for your new background image.
   • Background Repeat: Select No Repeat, Tile, Tile Horizontally, or Tile Vertically in the drop-down menu to set the image repeat behavior of the background image on your website.
   • Background Position: Select Left, Center, or Right to set the screen position of the background image on your website.
   • Background Attachment: Select Scroll to set the background image to scroll down the page, or select Fixed to set the background image in a static position (so that it doesn’t scroll down the page).

If you do not see the Background link under the Appearances menu in the Dashboard, that means that the theme you are using does not currently support custom backgrounds (note that the default theme, Twenty Fifteen, does). You can add support for the Custom Background feature to any theme with just a few lines of code.

Just follow these steps:

1. Browse to the Edit Themes page and click the Theme Functions (functions.php ) template.

   The Theme Functions template opens in the text editor on the left side of the page.

2. Add the following line of code to the Theme Functions template somewhere after the line that says <?php :

   add_theme_support( ‘custom-background' );

   This line of code tells WordPress that your theme has added the Custom Background feature.

3. Click the Update File button.

   The Theme Functions template is saved, along with your changes. The Background link now displays below the Appearance menu.

4. View your website page to see your changes.

Changing the background using CSS

The <body> tag is simple HTML markup. Every theme has this tag, which defines the overall default content for each page of your website — the site’s body. In the Twenty Fifteen stylesheet (style.css), the background for the body is defined like this:

body {

background-color: #fff;

}

The background for the <body> tag uses a hexadecimal color code of #fff that gives the background a white color. You can use a color or an image (or both) to style the background of your website:

• Color: The W3Schools website has a great resource on hex codes and color names at www.w3schools.com/HTML/html_colornames.asp.
• Image: You can easily use an image as a background for your site by uploading the image to the images folder in your theme directory. That value looks like background: url (images/yourimage.jpg). ( Note: The url portion of this code automatically pulls in the URL of your website, so you just need to leave the url text as is.)

You can also use a combination of colors and images in your backgrounds.

In the case of some basic colors, you don’t have to use the hex code. For colors such as white, black, red, blue, and silver, you can just use their names — background-color: white, for example.

If you want to change the background color of your theme, follow these steps:

1. In the WordPress Dashboard, click the Editor link on the Appearance menu.

   The Edit Themes page opens.

2. From the Select Theme to Edit drop-down menu, choose the theme you want to change.

3. Click the Stylesheet template link.

   The style.css template opens in the text editor on the left side of the Edit Themes page (refer to Figure 10-1).

4. Scroll down in the text editor until you find the CSS selector body.

   If you’re tweaking the default theme, this section is what you’re looking for:

   body:before {

   background-color: #fff;

   }

   If you’re tweaking a different template, the CSS selector body will look similar.

5. Edit the background property’s values.

   For example, in the default template, if you want to change the background color to black, you can use one of the following:

   background-color: #000000;

   or

   background-color: black;

6. Click the Update File button in the bottom-left corner of the page.

   Your changes are saved and applied to your theme.

7. Visit your site in your web browser.

   The background color of your theme has changed.

Adding the Custom Menu feature to your theme

The Custom Menu feature is already built in to the default Twenty Fifteen WordPress theme, so you don’t have to worry about preparing your theme for it. However, if you’re using a different theme, adding support for the Menu feature to your theme is easy:

1. Click the Editor link under the Appearance menu. Then click the Theme Functions (functions.php) template.

   The Theme Functions template opens in the text editor on the left side of the Edit Themes page.

2. Type the following function on a new line in the Theme Functions template file in your theme:

   add_theme_support( ‘nav-menus’ );

3. Click the Update File button to save the changes to the template.

   This template tag tells WordPress that your theme can use the Custom Menu feature, and a Menus link now appears under the Appearance menu in the Dashboard.

4. Open the Header template (header.php).

   Click the Header link on the Edit Themes page to open the Header template in the text editor on the left side of the Edit Themes page.

5. Add the following template tag by typing it on a new line in the Header template (header.php) somewhere after the <body> tag:

   <?php wp_nav_menu(); ?>

   This template tag is needed so that the menu you build using the Custom Menu feature will display at the top of your website. Table 10-4 details the different parameters you can use with the wp_nav_menu(); template tag to further customize the display to suit your needs.

6. Save the changes you’ve made to the Header template.

   Click the Update File button at the bottom of the page.

Building custom navigation menus

After you add the menu feature to your theme (or if you’re already using a theme that has the menu feature), building menus is easy — just follow these steps:

1. Click the Menus link in the Appearance menu in your Dashboard.

   The Menus page opens in your WordPress Dashboard.

2. Type a name in the Menu Name box and click the Create Menu button.

   The Menus page is reloaded with a message that tells you your new menu has been created.

3. Add links to your newly created menu.

   WordPress gives you three ways to add links to the new menu you just created (the items in this list are shown in Figure 10-4):

   • Pages: Click the View All link to display a list of all the page(s) you have published on your site. Select the box next to the page names you want to add to your menu. Then click the Add to Menu button.
   • Custom Links: In the URL field, type the URL of the website that you want to add (https://www.google.com). Next, type the name of the link that you want displayed in your menu in the Label text field (Google). Then click the Add to Menu button.
   • Categories: Click the View All link to display a list of all the categories you’ve created on your site. Select the box next to the category names you want to add to the menu. Then click the Add to Menu button.

4. Review your menu choices on the right side of the page.

   When you add new menu items, the column on the right side of the Menus page populates with your menu choices.

5. Edit your menu choices, if needed.

   Click the Edit link to the right of the menu link name to edit the information of each individual link in your new menu.

6. Save your menu before leaving the Menus page.

   Be sure to click the Save Menu button under Menu Settings on the right side at the top of the Menus page. A message appears, confirming that the new menu has been saved.

You can create as many menus as you need to for your website. Just follow the parameters for the menu template tag to make sure you’re pulling in the correct menu in the correct spot on your theme. Pay attention to either the menu ID or menu name in the template tag. You find more options for your navigation menus by clicking the Screen Options tab at the top-right corner of your Dashboard. From there, you can add things like Posts and Custom Post Types to your menu options, as well as add descriptions for menu items.

The HTML markup for the menu is generated as an unordered list, by default, and looks like this in the sites source code:

<ul id="menu-main" class="menu">

<li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1"><a href="/">Home</a></li>

<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2"><a href="http://localhost/wpdemo/blog/">Blog</a></li>

<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3"><a href="http://localhost/wpdemo/about/">About</a></li>

</ul>

Notice in the HTML markup that the first line defines CSS ID and class: <ul id="menu-main" class="menu">. The ID in that line reflects the name that you gave your menu. Because I gave my menu the name of “Main” when I created it in the Dashboard, the CSS ID is menu-main. If I had named it “Foo,” the ID would instead be menu-foo. This assignment of menu names in the CSS and HTML markup is why WordPress allows you to use CSS to create different styles and formats for your different menus.

When developing themes for yourself or others to use, you want to make sure that the CSS you define for the menus can do things like account for subpages by creating drop-down menu effects. You can do this several different ways, and Listing 10-1 gives you just one example of a block of CSS that you can use to create a nice style for your menu (this CSS example assumes that you have a menu named “Main”; therefore, the HTML and CSS markup indicate ‘menu-main’).

Listing 10-1: Sample CSS for Drop-Down Menu Navigation

#menu-main {

            width: 960px;

            font-family: Georgia, Times New Roman, Trebuchet MS;

            font-size: 16px;

            color: #FFFFFF;

            margin: 0 auto 0;

            clear: both;

            overflow: hidden;

            }

#menu-main ul {

            width: 100%;

            float: left;

            list-style: none;

            margin: 0;

            padding: 0;

            }

#menu-main li {

            float: left;

            list-style: none;

            }

#menu-main li a {

            color: #FFFFFF;

            display: block;

            font-size: 16px;

            margin: 0;

            padding: 12px 15px 12px 15px;

            text-decoration: none;

            position: relative;

            }

#menu-main li a:hover,

#menu-main li a:active,

#menu-main .current_page_item a,

#menu-main .current-cat a,

#menu-main .current-menu-item {

            color: #CCCCCC;

            }

#menu-main li li a,

#menu-main li li a:link,

#menu-main li li a:visited {

            background: #555555;

            color: #FFFFFF;

            width: 138px;

            font-size: 12px;

            margin: 0;

            padding: 5px 10px 5px 10px;

            border-left: 1px solid #FFFFFF;

            border-right: 1px solid #FFFFFF;

            border-bottom: 1px solid #FFFFFF;

            position: relative;

            }

#menu-main li li a:hover,

#menu-main li li a:active {

            background: #333333;

            color: #FFFFFF;

            }

#menu-main li ul {

            z-index: 9999;

            position: absolute;

            left: -999em;

            height: auto;

            width: 160px;

            }

#menu-main li ul a {

            width: 140px;

            }

#menu-main li ul ul {

            margin: -31px 0 0 159px;

            }

#menu-main li:hover ul ul,

#menu-main li:hover ul ul {

            left: -999em;

            }

#menu-main li:hover ul,

#menu-main li li:hover ul,

#menu-main li li li:hover ul, {

            left: auto;

            }

#menu-main li:hover {

            position: static;

            }

The CSS you use to customize the display of your menus will differ; the example that I provide in the previous section is just that: an example. After you get the hang of using CSS, you can try different methods, colors, and styling to create a custom look of your own. (Find additional information about basic CSS later in this chapter.)

Displaying Custom Menus using widgets

You don’t have to use the wp_nav_menu(); template tag to display the menus on your site, because WordPress also provides you with Custom Menu widgets that you can add to your theme. You can therefore use widgets instead of template tags to display the navigation menus on your site. This feature is especially helpful if you have created multiple menus in and around your site in various different places.

Your first step is to register a special widget area for your theme to handle the Custom Menu widget display. To register this widget, open your theme’s functions.php file and add the following lines of code on a new line:

// ADD MENU WIDGET

if ( function_exists('register_sidebars') )

               register_sidebar(array(‘name’=>‘Menu Widget’,));

These few lines of code create a new widget area called Menu on the Widgets page in your Dashboard. At this point, you can drag the Custom Menu widget into the Menu Widget area to indicate that you want to display a Custom Menu in that area. The Available Widgets area with the Menu Widget displayed is in Figure 10-5.

To add the widget area to your theme, head over to the Theme Editor (Appearance  Editor) and open the header.php file; then add these lines of code in the area you want the Menu widget displayed; for example, near the site name:

<ul>

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Menu Widget’) ) : ?>

<?php endif; ?>

</ul>

These lines of code tell WordPress that you want information contained in the Menu widget area displayed on your site.

Changing font color

With more than 16 million different HTML color combinations available, you can find just the right color value for your project. After some time, you’ll memorize your favorite color codes. I find that knowing codes for different shades of gray helps me quickly add an extra design touch. For example, I often use the shades of gray listed in Table 10-6 for backgrounds, borders on design elements, and widget headers.

You can easily change the color of your font by changing the color property of the CSS selector you want to tweak. You can use hex codes to define the colors.

You can define the overall font color in your site by defining it in the body CSS selector like this:

body {

color: #333333;

}

Changing font size

To tweak the size of your font, change the font-size property of the CSS selector you want to change. Font sizes are generally determined by units of measurement, as in these examples:

• px: Pixel measurement. Increasing or decreasing the number of pixels increases or decreases the font size (12px is larger than 10px).
• pt: Point measurement. As with pixels, increasing or decreasing the number of points affects the font size accordingly (12pt is larger than 10pt).
• em: A scalable unit of measurement that is equal to the current font size. For example, if the font size of the body of the site is defined as 12px, then 1em is equal to 12px; likewise, 2em is equal to 24px.
• %: Percentage measurement. Increasing or decreasing the percentage number affects the font size accordingly. (If the body of the website uses 14px as the default, 50% is the equivalent to 7 pixels; 100% is the equivalent to 14 pixels.)

In the default template CSS, the font size is defined in the <body> tag in pixels, like this:

font-size: 12px;

When you put all three elements (font family, color, and font size) together in the <body> tag, they style the font for the overall body of your site. Here’s how they work together in the <body> tag of the default template CSS:

body {

font-size: 12px;

font-family: Georgia, "Bitstream Charter", serif;

color: #666666;

}

Serif fonts have little tails, or curlicues, at the edges of letters. (This book’s text is in a serif font.) Sans-serif fonts have straight edges and are devoid of any fancy styling. (The heading in Table 10-6 uses a sans-serif font … no tails!)

When you want to change a font family in your CSS, open the stylesheet (style.css), search for property: font-family, change the values for that property, and save your changes.

In the default template CSS, the font is defined in the <body> tag, like this:

font-family: Georgia, "Bitstream Charter", serif;

Font families, or fonts with multiple names, should appear in quotes in your stylesheet.

Adding borders

Using CSS borders can add an interesting and unique flair to elements of your theme design. Table 10-7 illustrates common properties and CSS examples for borders in your theme design.

Finding additional CSS resources

The time may come when you want to explore customizing your theme further. Here are some recommended resources:

• WordPress Codex (http://codex.wordpress.org): Official WordPress documentation
• W3Schools (www.//w3schools.com): A free and comprehensive online HTML and CSS reference
• WebDesign.com (www.//webdesign.com): A premium library of WordPress video tutorials and training
• Smashing Magazine (www.smashingmagazine.com): Gives numerous tips and tricks for customizing a WordPress theme

Inserting images

You will probably want to insert an image into your website, whether it is within the body of a post or page, in the sidebar by using a widget, or within the template code itself. The HTML markup to insert an image looks like this:

<img src="/path/to/image-file.jpg" alt="Image File Name" />

I break down this code for you in easy snippets to help you understand what’s at work here:

• <img src=: This is the HTML markup that tells the browser that the website is looking for an image file.
• "/path/to/image-file.jpg": This is the actual directory path through which the web browser will find the physical image file. For example, if you uploaded an image to your web server in the /wp-content/uploads directory, the physical path for that image file would be /wp-content/uploads/image-file.jpg.
• alt="Image File Name": The alt tag is part of the HTML markup and provides a description for the image that search engines will pick up and recognize as keywords. The alt tag description will also display as text on a browser that cannot, for some reason, load the image file; for example, if the server load time is slow, or if the user is using a screen reader with images turned off, the text description will load to at least provide visitors with a description of what the image is.
• />: This HTML markup tag closes the initial <img src=" tag, telling the web browser when the call to the image file is complete.

Inserting hyperlinks

You will probably want to insert a link within the body of a website — commonly referred to as a hyperlink, which is a line of text that is anchored to a web address (URL) so that clicking the text takes a visitor to another website or page that appears in the browser window.

The HTML markup to insert a hyperlink looks like this:

<a href="http://wiley.com">John Wiley & Sons, Inc. </a>

To break down that markup, here is a simple explanation:

• <a href=: This is the HTML markup that tells the browser that the text within this tag should be hyperlinked to the web address provided in the next point.
• "http://wiley.com": This is the web address, or URL, that you intend the text to be anchored to. It needs to be surrounded by quotation marks, which define it as the intended anchor, or address.
• >: This markup closes the previously opened <a href= HTML tag.
• John Wiley & Sons, Inc.: In this example, this is the text that is linked, or anchored, by the web address, or URL. This text displays on your website and is clickable by your visitors.
• </a>: This HTML markup tag tells the web browser that the hyperlink is closed. Anything that exists between <a href=".."> and </a> will be hyperlinked, or clickable, through to the intended anchor, or web address.

Commonly, designers use URLs, or web addresses, to link words to other websites or pages; however, you can also provide hyperlinks to files such as .pdf (Adobe Acrobat), .doc (Microsoft Word), or any other file type.

Inserting lists

Say you need to provide a clean-looking format for lists of information that you publish on your website. With HTML markup, you can easily provide lists that are formatted differently, depending on your needs.

Ordered lists are numbered sequentially. An example is a step-by-step list of things to do, like this:

1. Write my book chapters.
2. Submit my book chapters to my publisher.
3. Panic a little when book is released to the public.
4. Breathe sigh of relief when public reviews are overwhelmingly positive!

Ordered lists are easy to create in a program such as Microsoft Word, or even in the WordPress post editor because you can use the WYSIWYG editor to format the list for you. However, if you want to code an ordered list using HTML, the experience is a little different. My previous step list sample looks like this when using HTML markup:

<ol>

<li>Write my book chapters.</li>

<li>Submit my book chapters to my publisher.</li>

<li>Panic a little when book is released to the public.</li>

<li>Breathe sigh of relief when public reviews are overwhelmingly positive!</li>

</ol>

The beginning <ol> tells your web browser to display this list as an ordered list, meaning that it will be ordered with numbers starting with the number 1. The entire list ends with the </ol> HTML tag, which tells your web browser that the ordered list is now complete.

Between the <ol> and </ol> are list items designated as such by the HTML markup <li>. Each list item starts with <li> and ends with </li>, which tells the web browser to display the line of text as one list item.

If you don’t close an open HTML markup tag — for example, if you start an ordered list with <ol> but don’t include the closing </ol> at the end — it messes up the display on your website because the web browser considers anything beneath the initial <ol> to be part of the ordered list until it recognizes the closing tag: </ol>.

Unordered lists are very similar to ordered lists, except that instead of using numbers, they use bullet points to display the list, like this:

• Write my book chapters.
• Submit my book chapters to my publisher.
• Panic a little when book is released to the public.
• Breathe sigh of relief when public reviews are overwhelmingly positive!

The HTML markup for an unordered list is just like the ordered list, except that instead of using the <ol> tag, it uses the <ul> tag (UL = unordered list):

<ul>

<li>Write my book chapters.</li>

<li>Submit my book chapters to my publisher.</li>

<li>Panic a little when book is released to the public.</li>

<li>Breathe sigh of relief when public reviews are overwhelmingly positive!</li>

</ul>

Note that both the ordered and unordered lists use the list item tags, <li> and </li>, and the only difference is in the first opening and last closing tags:

• Ordered lists: Use <ol> and </ol>
• Unordered lists: Use <ul> and </ul>
• List items: Use <li> and </li>