The Easy Guide To Theming MarketPress
The Easy Guide To Theming MarketPress
There’s a reason why MarketPress is one of our most popular plugins. As those of us who have used it know, setting up a store with MarketPress is quick and easy. You can be selling online in no time with a store that fits seamlessly into your WordPress theme. But did you know that it is also easy to create a custom theme for your store?
Theming MarketPress doesn’t have to be scary or painful. In fact, MarketPress was built in such a way that you can easily add your own custom styles and templates. In just a few steps, you can change the look, feel and functionality of your shop. Not every store is the same, so today I’m going to show you how easy it is to give your store a totally unique look.
There are two methods for theming your MarketPress store: Basic and Advanced. We’ll cover both in this tutorial – from simple style changes to more advanced template modifications.
The easiest way to customize your MarketPress store is to add some basic styles, which consist of a stylesheet and an optional images folder.
The first step is to create a /marketpress-styles/ directory within /wp-content/. The placement of this directory does two important things:
- 1. Ensures that your theme is protected when upgrading MarketPress
- 2. Preserves your style changes when updating or changing your WordPress theme
When you create your stylesheet, you will want to add this custom header at the top of the file:
1 2 3
/* MarketPress Style: CUSTOMNAME */
Now your custom theme will show up in the dropdown located on Products >> Store Settings >> Presentation.
If you want to use some of your own images you can also create an images directory within the /marketpress-styles/ folder. Link within your stylesheet to your files like so: “images/my-image.jpg”.
How to Get Started
Unless you want to start completely from scratch, I’d recommend copying some of the basic styles from one of the existing stylesheets. For example, if you like the Icons theme but just want to use it as a base and make a few changes, copy the CSS from that file and add it to your own custom CSS file.
How far will the basic styles get you? You can accomplish quite a few things, such as:
- Create custom button styles
- Add custom icons, backgrounds and images
- Customize the product listing grid
- Customize store fonts and text display
- Style shopping cart and checkout experience
- Customize display of MarketPress widgets
- …and much more
If you’re skilled with CSS there’s a lot you can do without even touching the template files. Making more advanced customizations to the product display templates will require some WordPress theming knowledge.
MarketPress uses custom post types to display products. If you’re familiar with the WordPress template hierarchy, then theming MarketPress should be a breeze.
Making advanced modifications involves creating template files and adding them to your theme folder.
MarketPress Template Hierarchy
First, you’ll want to understand the order MarketPress uses to load the templates. Let’s look at a common example.
When applying the theme to individual product pages, MarketPress first looks for a mp_product-PRODUCTNAME.php file. If it doesn’t find that, then the mp_product-PRODUCTID.php file will be applied. In the absence of that file, MarketPress will use the mp_product.php template. If none of those files are present in your theme’s folder, MarketPress will default to your theme’s page.php file.
Product category and tag listing pages are also subject to a similar hierarchy. If none of these files are present, MarketPress will default to using page.php.
General store pages can be styled by creating the following named files. If any of these are not present, MarketPress will default to page.php:
- Store Page – mp_store.php
- Cart/Checkout Page – mp_cart.php
- Order Status Page – mp_orderstatus.php
- Product List Page – mp_productlist.php
How to Create Your Own MarketPress Templates
There are two files that are going to be very useful to you in theming MarketPress and you’ll want to have these open for reference:
The easiest way to start is to copy and rename a file from your active WordPress theme. A page template or a full-width template might be a good choice.
For example, you might copy page.php and rename it to mp_product.php if all of your products will have a similar layout and style.
From there you will change the loop. Instead of the_content(), you’ll want to use the relevant MarketPress functions to display products. Those can be found in the template-functions.php file.
Let’s take the Twenty Twelve theme as a quick example. Inside page.php you will find the loop:
1 2 3 4
<?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?>
After a copy of page.php as mp_product.php, you’ll change the template part for the loop to look for product content instead:
1 2 3 4
<?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'product' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?>
Inside mp_product.php you can also specify a new sidebar, a common request for MarketPress stores.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Now you can use save a copy of content-page.php as content-product.php. Congratulations, you’re now ready to make more advanced modifications.
At this point, if you view a product you will just see the product name and description. It will be very plain with none of the MarketPress extras, as shown below:
It’s probably easiest to start off with a basic loop for displaying a single product. In your file, look for
<?php the_content() ?>
and replace it with a basic MarketPress loop:
1 2 3 4 5 6 7
<?php mp_product_image( true, 'single' ); the_content(); mp_product_price(true); mp_buy_button(true, 'single'); echo mp_category_list($post->ID, ' <div class="mp_product_categories">' . __( 'Categorized in ', 'mp' ), ', ', '</div> '); ?>
This basic loops adds in the product image, buy button, etc., and is the default for MarketPress.
From here you can tweak it as necessary to achieve any kind of product display that you like. For example, if you want to remove the category display beneath the product, just remove the category list from the loop.
1 2 3 4 5
<?php mp_product_image( true, 'single' ); the_content(); mp_product_price(true); mp_buy_button(true, 'single'); ?>
How to Add Popular Products to the Single Product Listing Page
One common customization for stores is to include popular products beneath single product listings. This is easy to add to MarketPress using the mp_list_products() function. Here’s an example where you want to show 3 popular products, ordered by sales. You would add this in mp_product.php beneath the product listing.
<h3>You might also be interested in...</h3> <?php mp_list_products(true, true, 0, 3, 'sales', 'DESC'); ?>
That would output something similar to this:
This can be a handy way to display more of your store’s products and help customers keep shopping, which can translate into more sales.
Theming WordPress Multisite Stores
MarketPress is one of the few shopping carts that was built from the ground up with multisite networks in mind. MarketPress indexes products, product tags and categories from across your network so that you can provide a global shopping cart. It also comes packaged with powerful global widgets and shortcodes:
- Global Product List – Shows a customizable global list of products from network MarketPress stores.
- Global Product Tag Cloud – Displays global most used product tags in cloud format from network MarketPress stores.
- Global Product Category List – Displays a network-wide HTML list of product categories from network MarketPress stores.
You can theme any of these aspects with your own basic CSS store styles. Or, if you’re looking for something more advanced, you can design your own custom global listings pages by creating the following templates:
Product List Page
Product Category List Page
Product Tag List Page
Our live demo gives an example of using MarketPress globally to showcase stores from one multisite network. This can easily be accomplished through the use of widgets and shortcodes. No advanced theming is necessary but if you want to get in there and create your own custom templates, the option is always available.
The template functions are actually very flexible and the template-functions.php file provides full documentation for how to customize your store display. This tutorial is just a quick introduction to creating your own custom MarketPress theme. The great thing is that you don’t have to create an entirely custom theme if you don’t want to. Simply customize individual files as needed.