Create Your Very Own FrameMarket Child Theme

In this week’s tutorial we’re going to take a look at how you can make your very own child theme for FrameMarket. The problem with a lot of WordPress eCommerce plugins is that they can be difficult to style. We want to make it as easy as possible for you to develop your own stylish eCommerce website. That’s why WPMU DEV developed FrameMarket, and its child, GridMarket. We’ll be releasing more child themes for FrameMarket but if you want to develop your own child, I’m going to show you how.

To make life easy we’re going to use Tammie’s great GridMarket Theme as a base. This means that we already have a basic grid layout that we can work from. Thanks muchly to Tammie for helping me with this!

This week’s tutorial will show you how to create a theme which will work either on a single site or across a global installation.

1.       Download FrameMarket

2.       Create a Theme Folder

Call it “mymarket”
MyMarket folder

3.      Copy Files

Navigate to framemarket>themes>gridmarket. Copy everything from that folder into your mymarket folder.

4.       Open style.css

Use your favorite text editor – mine is NotePad++

5.       Edit style.css

We want to add the information that tells WordPress what the theme is and which theme is its parent:

Here’s the code:

/*
Theme Name: MyMarket
Theme Date: 12/05/2011
Version: 1
Theme URI: http://yourdomain.com
Description: MyMarket - My Snazzy FrameMarket Child
Author: YourName
Author URI: http://yourhomepage.com
Tags: buddypress, fixed-width, custom-background, custom-menu, theme-options, sticky-post, translation-ready, threaded-comments, left-sidebar, two-columns
License: GNU General Public License, v2 (or newer)
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

Template: framemarket
*/

The most important part of this is “Template: framemarket” which tells WordPress that this is a child theme for FrameMarket.

If you scroll down you can see that the theme is already set up to inherit styles from FrameMarket:

css inheritance

What we want to do is uncomment the custom css file. You can do this by deleting the line “/* uncomment if you are using until then we leave it commented to save loading a file that isn’t filled */” It should now just say:

/* your own custom css */
@import url( css/custom.css );

If you go to WordPress you can see it here:

And that is your basic child theme. But, the purpose of this is not to make another GridMarket but to create your own child.

6.    Enqueue Styles

Navigate to themes>mymarket>functions>

Open the file theme.php

We need to enqueue the correct styles. This lets you queue up your stylesheets in the correct order. We want our custom styles to come first, then, if they aren’t there, default to the gridmarket styles as a backup.

Find the line: gridmarket_enqueue_styles

Detele the whole function and replace it with:

function gridmarket_enqueue_styles(){
if ( !is_admin() ) {
$themename = get_current_theme();
$themeinput = $themename . '_styleinput';

$options = get_option('framemarket_theme_options');
$stylesheet = $options[$themeinput];

if ($stylesheet != ""){
wp_enqueue_style( 'gridmarket_style', get_stylesheet_directory_uri() . '/styles/' . $stylesheet . '.css', 'gridstyle' );
wp_enqueue_style( 'gridmarket_custom', get_stylesheet_directory_uri() . '/css/custom.css', 'customcss' );
}
else{
wp_enqueue_style( 'gridmarket_orange', get_stylesheet_directory_uri() . '/styles/darkorange.css', 'orange' );

wp_enqueue_style( 'gridmarket_custom', get_stylesheet_directory_uri() . '/css/custom.css', 'customcss' );
}
}
}

Now you have learned to enqueue styles!

7. Edit CSS

Navigate to themes>mymarket>css>custom.css and open the file in your favorite text editor.

I like to edit style using a tool like Firebug or Chrome Developer Tools. These let you inspect the elements that you want to change and then change them in the live site.

Make your child theme live. It should look just like Gridmarket. In Chome right click on the header and scroll down to “Inspect Element.”

inspect elementA window should pop up at the bottom of your browser. You’ll see that it has the CSS for the background:

I’m going to change that to a light blue color:

Here it is live:

Of course, that is just changed in my browser. It’s not actually changed. In order to do that I need to copy the styles into my custom.css

#branding-wrapper, .nav .current a, .nav li:hover > a, .nav li.current_page_item a, .nav li:hover li a {
background: #DBFFF0;
color: #fff
}

Now you can edit away until you are happy with your brand new styles.

Here’s what I came up with. The layout isn’t a whole lot different to GridMarket but you can really flex your CSS muscles and let rip:

8. One More Thing

For completion’s sake we want to create a screenshot of your new theme and place it in your mymarket folder. Replace the current “screenshot.png” file with a screenshot of your new theme, calling it “screenshot.png.”

I’ve cropped mine so it looks nicer. Check it out:

Current ThemeNext time we’ll take a look at how you can set up a number of different preset styles for your Network users to apply to their own stores.