Modifying the Visionary theme

If you want to customize the Visionary theme, you’ll need to set up a child theme. You probably shouldn’t tinker within the core theme files themselves as you’ll want to upgrade when new features or bug fixes are released (not that there’s a lot of bugs).

I’ll be showing you how to create a child theme in this tutorial. Follow the list below:

1. Creating a child theme
2. Using the base.css file
3. Building from the default style

Creating a child theme

The first thing you should do is create a new folder in your /wp-content/themes directory. Name it something like visionary-custom.

Now, copy these files from your visionary folder.

• style.css
• screenshot.png
• The /images folder and all its contents.

Drop those files into your visionary-custom folder.

Then, change the information at the top of your /visionary-custom/style.css file. Make it look something like this:

/*
Theme Name: Visionary Custom
Theme URI: http://yoursite.com/visionary-theme
Description: Write a short description.
Template: visionary
Author: Your Name
Author URI: http://yoursite.com
*/

Very important note: The most important line is this, and it should look exactly like below (note that visionary is in lowercase letters:

Template: visionary

This tells WordPress that you want to use the Visionary theme as your framework.

For more advanced customizations, such as editing PHP files, stop by the support forums for help.

If you think you might be doing some PHP customizations, create an empty functions.php file. Then, add this bit in the file:

<?php
?>

The Visionary theme is a very powerful framework, so we can do a lot of customization with this one file.

Using the base.css file

If you plan on building from the original stylesheet, you might want to take a look at this:

/* Import base styling. */
@import url('library/css/base.css');

This does a lot of the hard work, resetting browser defaults and giving you a good starting point to code from. Pretty much every element is styled.

If you use it in your child theme, you should add it like this:

/* Import base styling. */
@import url('../visionary/library/css/base.css');

This needs to come after the stylesheet header information but before any other style rules.

Building off the default CSS

In version 1.2.1 of the theme, I’ve included a compressed CSS file with all of Visionary’s basic styles. To build from the default CSS, you need to first include the base.css file as shown above.

Then, we’ll also include the default styling. In your child theme’s style.css file, add this below the base styling:

/* Import default styling. */
@import url('../visionary/library/css/default.css');

You’ll also want to copy over the /visionary/images folder to your child theme too because there might be references to image files that you’ll need.

Now, your child theme will look exactly how the original Visionary theme looks. You can easily overwrite individual styles in your stylesheet.