Create a FrameMarket Child Theme for your Multisite Network

Last week we looked at how to make a basic FrameMarket Child. This week I want to show you all how to make a child theme with different presets for other users of your Multisite network to use. This means you can offer different looks to the shops in your network while maintaining control over the design.

The first few steps are exactly the same as last week:

1. Install FrameMarket

Follow the WPMU DEV installation instructions.

2. Create a Theme Folder

I’m calling mine “multimarket.”

3. Copy the Files

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

4. Edit style.css

In your favorite text editor (mine is NotePad++) you need to change the commented information to tell WordPress what the theme is and what the parent is.

Add the following

/*
 Theme Name: MultiMarket
 Theme Date: 20/05/2011
 Version: 1
 Theme URI: http://yourdomain.com
 Description: MultiMarket – Lots of Preset Children
 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 is “Template:framemarket” which tells WordPress that this theme is a FrameMarket Child.

5. Add Your First Style

If you navigate to multimarket > styles you’ll see a whole collection of preset colors for GridMarket. We want to replace these with our own styles.

Create a file. Call it pastelblue.css

We’re going to make this file our default style.

To this file you need to add any changes that you want to make. To identify different elements that I want to change I use Firebug or Chrome developer tools.

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

A 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 pastelblue.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
}

Keep adding your new styles until you are happy with them.

6. Add presets

Navigate to: themes>mymarket>options You’ll find two files there:

Options-values.php – a series of arrays with values relating to stylesheets, fonts and other styling elements

Options-styles.php – the style section that outputs in the theme options. You can define here what styles you want to appear in your options. This is great for Multisite eCommerce networks. By defining the styles in this way you can set each shop up with the same child theme but let the shop owner choose their own styles.

Open options-styles.php and locate this:

'red' => array(
'value' => 'red',
'label' => __( 'Light Red' )
)

Underneath it, before the ); add:

'pastelblue' => array(
'value' => 'pastelblue',
'label' => __( 'pastelblue' )
)

Save.

Here it is in the options:

You can edit your PastelBlue.css to create different preset styles for your network. You can make as many of these as you wish. Just update the options-styles.php with the new array.

Much as I like the GridMarket styles I want to restrict my network users to the styles that I present. So, I’m going to delete all of them and use my own. If you want to delete only a few you can delete just that. If I want to get rid of light red, for example, I delete:

'red' => array(
'value' => 'red',
'label' => __( 'Light Red' )
)

And add my own styles. In the styles folder I’m going to create three more css files: lightgreen.css, yellow.css and purple.css.  I can add each of these to the theme.php file just like I did with pastelblue.css.

Here they are in situ:

If you check your theme now you’ll see that it still looks like GridMarket. Time to solve that!

6. Default to pastelblue.css

Navigate to themes>multimarket>functions

Open theme.php

Scroll down to line 24 and find the line:

wp_enqueue_style( 'gridmarket_orange', get_stylesheet_directory_uri() . '/styles/darkorange.css', 'orange' );

This is telling WordPress to default to the darkorange.css stylesheet. We want to default to pastelblue.css. Change the line to:

wp_enqueue_style( 'gridmarket_pastelblue', get_stylesheet_directory_uri() . '/styles/pastelblue.css', 'pastelblue' );

Now your website should be showing your new default theme:

We’ve just a few things to do before we finish.

7. Add your screenshot

For completion’s sake we want to create a screenshot of your new theme and place it in your multimarket 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:

8. Create Global Shop

We want to ensure we have a global front page. This will be the front page for your entire network, showing off products from all of your shops.

On your main shop go to Appearance > Theme options and scroll down to “Show global or just that main shop products on the front?”

Select global.

Here are my individual shops:

 

 

And my global front page: