Want to customize Vantage to fit your needs? This is the place to start. If you plan to make any modifications to Vantage, you should always do it with a child theme. Never modify the code in the theme folder. It will almost always result in problems in the future.

This tutorial will show you how to create a simple child theme for Vantage. With the steps outlined below, you will be able to change the look and feel of Vantage by modifying styles. It will also get you prepared for making more advanced customizations which will be covered in other tutorials.

To create even the simplest child theme, you should have a basic understanding of HTML and CSS. You should also know how to add files to your hosting site. If you can handle that, then you’re ready for this tutorial.

Creating a Child Theme

1. In the themes folder (/wp-content/themes), create a new folder named ‘vantage-child’ or a name of your choice.
2. Inside the new child theme folder, create a CSS file named ‘style.css’.
3. Add the following header to the child theme ‘style.css’:

   /* Theme Name: My Vantage Child Theme Version: 1.0 Description: A child theme for Vantage, the premium business directory theme for WordPress. Author: Your Name Author URL: http://www.your-url.com Template: vantage */

   The most important line here is “Template: vantage”. It tells WordPress that Vantage is the parent for your child theme. After ‘Template:’ you must add the name of the parent theme – in this case ‘vantage’. The theme name is case-sensitive and should be all lowercase.

4. Add the following line to the child theme ‘style.css’, after the header:

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

   This is the path to the Vantage style sheet. In our example, we are using a relative path. If you’re using another path/name, change it accordingly.

5. Next add the following line to your child theme style sheet:

   @import url("../vantage/styles/blue.css");

   This is the path to the Vantage color style sheet. Vantage has eight color style sheets (blue, gray, green, navy, orange, pink, purple and red). You can replace “blue” with any other color. Just as above, we are using a relative path. If you’re using another path/name, change it accordingly.

A quick review
First, we created the child theme folder and a ‘style.css’ with a special header that informs WordPress about the theme parent name. Then, we imported both the main Vantage style sheet and one color style sheet.

Some additional notes
Creating a child theme automatically disables the main Vantage style sheet. If you do not use “@import” to import the main Vantage style sheet, your Vantage site will be completely unstyled. You can see what that looks like here. Also, if you do not include the color style sheet, several color-based elements will remain unstyled.

Not importing the main style sheet or the color style sheet can be useful. If you are creating a whole new look for Vantage, you probably want to start from scratch. In that case, it might be best to import nothing.

Finally, since the presence of a child theme disables the Vantage style sheets, you will not be able to change colors within the Vantage settings in wp-admin.

Styling Vantage

To make style changes, first you need to identify the CSS classes used through out Vantage. We suggest using the tools available on current browsers like Chrome or Firefox HTML inspectors. They allow you to inspect any HTML element and see its classes and attributes.

We also have written the style sheet with a table of contents, clearly defined sections and plenty of notes. Take a look at the style sheet to see how we have done this. We did our best to make it as easy as possible.

Once you become familiar with id’s and classes in Vantage, you’ll be able to control anything you want. Let’s go through some examples.

Fonts
Perhaps you don’t like serif fonts and you want to change that. Easy, we’ll start by modifying the body tag your child theme CSS.

body {font-family: Georgia, "Times New Roman", Times, serif;}

You can see in the before screenshot, that almost everything is sans-serif. After adding our style above, we now have serif fonts everywhere with some exceptions. We could go a little further and add styles for headlines and more. It’s just a matter of locating the styles and modifying them.

Background
The background in Vantage is a bit different. It’s not styled in the body alone. We have broken it into two pieces separated by a rule line. The top part of the background is styled with the body. The bottom part is styled with id=”content”. Here is the CSS for both:

body {background: #E4E4E4 url('images/header-bg.png') repeat-x 0 0;}
#content {background: #FAFAFA url('images/content-bg.png') repeat-x 0 0;}

Getting rid of the bottom part of the background might be the most obvious change. We can do that by adding the following line to your child theme style sheet.

#content {background: none;}

You can see that the rule line is gone and the body background extends the full height of the page. You could now modify the body style or you could even change the background via the admin appearance settings.

More to Come

These are just a couple of style modifications to get you started. You could create as many styles as you please. We’ll post more tutorials that will help you modify and create changes to other elements of Vantage.

Also, we will have more tutorials that show you how to make more complex but useful modifications to Vantage using child themes. Until then, have fun and happy styling.

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.