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:
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
'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: