Customizing WordPress Themes

You’ve probably researched a number of WordPress themes, and chosen one that you like for your site. But, as we’ve been talking about typography and colour, you may want to make some changes or tweaks to your theme, to make it exactly right.

Customizing WordPress themes is easy enough, but it does require going in to the underlying source files and making changes to the code. Probably, anything you can think of doing has an solution, if you Google for it. You can easily find little recipes and snippets of code that you can copy-and-paste in to the theme files.

But hold on! There’s a smarter way of doing this, and you should know about it.

The problem with simply hacking the existing theme files is this: if — or when — you upgrade your WordPress site, whatever changes you have made to the underlying files get wiped out when the new versions get installed.

The solution to that problem is to put your changes and customizations in a “Child Theme.” This is a special folder that you set up on your website. It points to the WordPress theme you want to use, but contains changes and customizations that you want to make. If (when) you upgrade WordPress, the original theme might get changed, but your Child Theme won’t — so your customizations will still be there.

It’s a simple thing to set up a child theme. Here’s a nice reference:

https://managewp.com/how-to-create-a-child-theme

Since we’re using Reclaim Hosting, here’s how to get in to the underlying files and set up the theme:

  1. You’ll need to log in to Reclaim Hosting’s “cPanel” for your site (easiest via http://portal.reclaimhosting.com) the place where you installed WordPress, back in September. Note: you’ll need your ReclaimHosting password, NOT your WordPress login.
  2. Once there, look for the “File Manager” link in the list on the left.
  3. Use the “File Manager” to open up the “www” (or sometimes it is called “web root”) directory of your site. This is where all the WordPress files are.
  4. Look for a folder called “wp-content” and then inside that, a folder called “themes”. In there you should see folders for any themes you have installed.
  5. There (in “themes”) is where you would create a New Folder called “mychildtheme” (or whatever you want to call it).
  6. Inside your child theme folder, you create two new files (in the upper left of the screen, “+ File”) called:
    • style.css
    • functions.php
  7. Select the style.css file, and click “Edit” at the top of the screen. Add the following and save the file.
    /*
    Theme Name: My Child Theme
    Theme URI: http: //mysite.com/
    Description: This is a custom child theme I have created.
    Author: My Name
    Author URI: http: //mysite.com/
    Template: parenttheme
    Version: 0.1
    */

@import url("../parenttheme/style.css");

EXCEPT: instead of “parenttheme” (in both places) you need to enter the name of the theme (actually, the name of the folder it is in) you’re actually using. That connects your new child theme to the theme you’ll be working from.

Once you’ve done that, you should be able to go into your WordPress site, under “Appearance” and choose your new Child theme.

And then you can add customizations to your Child theme safely.

Customization #1: Change the font

You can get free webfonts easily at Google Fonts: https://www.google.com/fonts#

Once you pick your font, via the “quick use” screen, look for the “@import” code. It will give you a line of code to use in your style.css file.

In style.css, add the lines:

@import url(https://fonts.googleapis.com/css?family=Montserrat);

h1 {font-family: 'Montserrat', sans-serif;}

Customization #2: Exclude a Category from your blog listing

This time, we edit the functions.php file instead.

In your WordPress admin interface, navigate to Posts->Categories. Choose the Category you want to exclude, and click the “edit” button for it. You need to look for its numeric id… which you can find in the URL:

http://posiel.com/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=8&post_type=post

In this example, it’s 8, but whatever it is, make a note of it.

In the functions.php file, add these lines:

<?php // Opening PHP tag - nothing should be before this, not even whitespace

// PUT FUNCTIONS CODE HERE:

function exclude_category($query) {
  if ( $query->is_home ) {
    $query->set('cat', '-8');
  }
  return $query;
}

add_filter('pre_get_posts', 'exclude_category');




// END OF FUNCTIONS.PHP FILE
?>

The minus sign will remove that from the listing; the number tells it which category to exclude.

css.php