While all of our plugins are built to display beautifully in any of our themes, we know many of our customers use themes from other shops — and have put a lot of hard work into getting that theme to look just right. By the time you discover us, your theme is sitting pretty, and while you still long for that extra bit of functionality our plugins provide, it's a bummer they don't match your current theme perfectly. Sound familiar?
Today, we're showing you how to style our popular Shop the Post plugin to blend seamlessly with your site. Consider this post a great jumping off point for adding styles to our other plugins, too! This tutorial will be helpful if you've added the plugin on to a theme you bought elsewhere, OR if you've customized an <em>press theme with your own brand fonts and colors, and need the plugin to match.
Whether or not you use <em>press plugins, this tutorial is worth a read for any blogger, as this process applies to many other WordPress plugins! And if you're not sure how to use CSS to style your site, be sure to check out our post on CSS basics before reading this one.
For this tutorial, we're using the free MinimalistBlogger theme, which we found in the Popular tab of the WordPress repository.
Step 1: Disable styles
If you aren't using a theme by <em>press, our Shop the Post plugin includes some very basic styling to help it stand apart from the blog post content. This styling includes a gray border with some extra padding, and a centered title. The title will pick up font styling from your theme's styling for the <h3> tag. We included this styling for users who don't want to edit the CSS, but we tried not to add too many extra styles, because what looks good in one theme might not look good in another. Therefore, we leave most of the styling up to your theme's defaults.
If you wish to create your own styles, we've made it very easy to disable our styling so you don't have to overwrite it — just look for the option in the Customizer under the Shop the Post tab. Note that this option is only available if you're not using an <em>press theme; if you are using an <em>press theme, any styles you write in the Additional CSS panel will easily overwrite our own styling.
Bonus points: Want to manually add Shop the Post to your theme? Learn how here. This is a great option if your theme doesn't display excerpts on your blog home or archive pages!
Step 2: Identify the selector
Just as in our original CSS tutorial, before we can style anything we have to identify the selector. Within the Google Chrome browser, right click on the Shop the Post box to see the HTML for it. But here's a shortcut, showing you what the HTML should look like for it:
<div class="em-shop-the-post">
<h3 class="em-shop-title">From the post:</h3>
<div class="em-shop-code">SHOP CODE HERE</div>
</div>
From here, you can see the relevant classes for what we'll be styling. If we want to add a border to the entire box, we target the class “.em-shop-the-post”, and if we want to style the title, we target the class “.em-shop-title”.
Step 3: Pull an existing style from your site
For your Shop the Post box to blend seamlessly with your site design, you'll want to pull styling already in use in other areas of your site for consistency. Most themes have styling properties for all heading tags, and you can also look at post titles, widget titles, and navigation.
Tip: Within any WordPress Dashboard, we like to create a private page showing all heading styles in use, for reference whenever we want to see how the corresponding fonts will look. To do this, simply go to Pages > Add new, then type Heading 1, Heading 2, Heading 3, etc. into the page editor. Highlight each individual title, then apply a heading style — you can do this by clicking on the dropdown menu that reads “Paragraph” in the page editor, and applying a heading style 1-6.
In the example theme we're using, the Shop the Post title uses the same font as the post title, but in a smaller size. We're going to change it to match the widget title font instead.
To do this, we use Inspect on the widget title and see what CSS styles are applied there. In this theme, we have to scroll down a bit in the CSS panel to the right to find out what the font family is, since it's using the same font as the body copy. Then we Inspect the Shop the Post title and apply those styles in the CSS panel so we can preview our changes. As you preview the changes, you can adjust as needed. In this example, I've made the weight of the font bold and added letter-spacing to increase the space between letters, to help the title stand out a bit more and be more readable.
Step 4: Add new styles as needed
Once you update the title font to fit better with your post, you may also want to add some additional styling. You can do this directly in Chrome again for preview purposes before adding it to your site. Click on the HTML elements you want to change, then add the appropriate styling in the panel to the right. Below, I'll add some space below the Shop the Post box, add a background behind the title, and a border surrounding the box. I also tweak elements a bit so you can see how you can easily update and preview changes in the browser.
Step 5: Copy your styling to the Customizer
Now that I'm satisfied with how everything looks, I need to apply these styles to my theme. This is where we need to remember the selectors. Click on each element, copy the styles, and add the selector in the Customizer under the Additional CSS panel.
Bonus Points: Change your blog feed box only
The styling I've added looks great on the full post, but it's a bit much on the home page and in archive feeds. I want to keep my styling on the full post so that the box stands out, but on the home page and archive feeds, I only want to show the shop code — no title, no border. Thankfully, WordPress adds specific styles to the body tag that allow us to target items by the page type. First, we need to update our code so that it only displays on the full post page. Inspect the page, scroll up to the body tag, and locate the class describing the page, which is “.single-post”. Now we just need to apply that class to the styles we added so they apply to the single post page only. As you can see when I add the class to the styles in the Customizer, it removes all styling from the home page.
Now we have to add a couple styles to target just the home page (“.blog”) and archive pages (“.archive”), so that we can remove the post title and add a bit of space between the shop content and the read more button, so we'll repeat the process above.
Congratulations! You've styled your Shop the Post to match your site. Leave a comment below and share a link to your work, we'd love to see! And don't forget to let us know if there are any other tutorials you'd like to see here on our blog.
xx,
