Our Favorite Code Hacks

(and customization inspiration from our customers!)

When we launched <em>press, we were very excited to see how our customers would make our themes and plugins their own, through the various customization options we gave them. What we weren’t expecting is for our customers to take such a huge interest in what we lovingly refer to as “Code Hacks”—short snippets of CSS that can be customized with minimal code knowledge for a truly unique look.

It started with one simple request, one simple tweak. And as more and more customers wrote to our Help Desk and swapped ideas in our customer Facebook group—sharing their own creative ideas for tweaking our themes—our private database of code hacks grew. So we published them on our website as our Code Hacks Library. Now it has become a special part of what we do here at <em>press. Today we’re sharing our current favorite Code Hacks from our library, and some customization inspiration from our customers.


Theme Hacks

Our best-selling theme is Presidio, and it shows, as most of our code hack requests are specifically for that theme. Most of the code hacks featured below are for Presidio, but we’ll point you to the same code hacks for other themes where applicable!

 

Customize the featured post

One of our favorite features of our Presidio theme is the ability to feature a post — whether it’s always your latest, or one you want to highlight from your archives. Many of our customers have taken this feature a step further and made it a truly unique part of the design of their blog. Try adjusting the featured image to suit your photography perfectly, or customize the post details with a new background color or border.

 

See it in action: Strawberry Chic, My Style Vita, Sarah Joy, Tara Carr, Essellesse


Add borders to widgets

We love the look of swapping out widget backgrounds for borders instead. It’s a fun way to add a pop of color but still keep the overall look light and airy. Experiment with different border widths, and use 0to255.com to find lighter shades of your accent color that could work well for borders.

 

See it in action: Sophisticaition

 


Update background colors

We use a light gray background site-wide for various details — widgets, interstitials, and scrolling navigation, all of which can be adjusted using one of our favorite code hacks. If you want to add a pop of brighter color to your site, try adjusting just one, like Amanda did with her scrolling navigation. Or, choose a lighter color and switch them all out for a unique look. (Swap the navigation bar and footer background colors in Brevier, over here!)

 

See it in action: Everyday Life on WheelsMy Style Vita, Tara Carr, Sarah Joy, Strawberry Chic, Essellesse, Dani Thom


Add a background to the header

Want your header to stand out a bit more? We love the idea of adding a background color! This one has a few more pieces to pay attention to, but we think the end result is worth it. (We’ve got one for Miramar, too!)

 

See it in action: Sarah JoyDani Thompson


Change the Read More button color

Though our One Color Pack and Two Color Pack plugins can help you swap out the Read More button color (among other things!), there’s only so many color options we can code in. Maybe you’re looking for a specific color, and you just want it for your buttons. This code hack will help you do just that! We have similar code hacks for Miramar and Archer as well.

See it in action: Kolyssa Teal

 


Plugin Hacks

Most of our code hacks for plugins are for our customers who aren’t using a theme created by<em>press. Since we have control over our own themes, we’re able to add styling as needed to make sure our plugins look pixel perfect across our own themes and inherit the styling we want. With other themes, our plugins simply have to inherit the existing styling from that theme. Sometimes, it looks great, while other times, fonts and sizing need to be tweaked a little. Enter our code hacks!

 

Shop the Post

The best place to start if you want to customize our Shop the Post plugin is our tutorial on styling the plugin with CSS. It will walk you through making it your own step by step! For something a little more plug-and-play, try out our code hacks for changing or removing the border and editing the title.

 

See it in action: A Sparkle Factor


Newsletter Pop Up

Have you seen pop ups with a photo on the side that spans from top to bottom? By default, our pop up has some padding around the entire box, but with our code hack, you can move it to the edges of the box. A small change, but we love the look! This works best when your image is taller than the content on the right.

 

See it in action: Victoria McGinley


Grid

This one is for Grid users who aren’t using a theme by <em>press. By default, Grid will inherit styling from your theme based on heading and paragraph styling, but it may not be the specific fonts you want. You can use our code hacks to change the filter menu styling, and you can hide the page title — or swap out the provided CSS with your favorite fonts instead.

See it in action: A With Love

 


Have you used our Code Hacks Library to create something amazing on your blog? Share your link below in the comments — we’d love to see! Is there anything you want us to add to our library, or a coding tutorial you want to see on our blog in the future?

How to Change Your WordPress Theme: A Step-By-Step Guide

how to change your wordpress theme step by step

Change is exciting — but also a bit terrifying, right?! We know you work hard on your blog, and changing your WordPress theme is a big step, especially if you haven’t done it before. While the process is pretty straightforward, and we do our best to walk you through setup and how we’ve organized the different options, sometimes issues still arise and you may not know where to look for a solution. So today we’re sharing how to change your WordPress theme, step-by-step. Read on for our complete guide, with tips for fixing common errors (or avoiding them completely!), and getting your new theme to look just right. Let’s get started!

1. Put up a coming soon page.

While it’s tempting to set up your new theme in the Customizer and activate your changes when ready, we only recommend this in two instances: 1) for preview purposes only, when you want to see how a new theme looks on your site before you commit, or 2) when you want to make simple tweaks to your current theme. Instead of using the Customizer, we prefer to put up a coming soon page while setting up your new theme, which allows you to activate your new theme immediately and see exactly how it works on your site. So even before you install your new theme, we always recommend putting up a coming soon page first.

Why is this so important? For one thing, once you’ve installed your new theme, if something does go wrong, it’s much easier to troubleshoot when that  theme is actually active. The Customizer does a great job creating a preview for the front-end of your site, but it’s not great at showing you what’s happening in the WordPress admin area, nor does it give you an easy way to test for plugin conflicts. Furthermore, your new theme has to be active to properly resize thumbnails, which we’ll discuss later in this post! Finally, a coming soon page will give you peace of mind—you’ll feel a lot better about messing around with your new theme and admin area if you know your users can’t see all your tinkering! Keep reading “How to Change Your WordPress Theme: A Step-By-Step Guide”

Why You Should Know About Coming Soon Pages

Whether you’re launching a brand new website, changing your WordPress theme, or just making a few tweaks behind the scenes, a coming soon page is an important tool in your website toolbox.

In fact, it’s one of the recommendations we email new <em>press customers about most. When you buy a new theme—from us, or from anyone!—it’s likely you want to take a few hours/days/weeks to get things customized, familiarize yourself with the settings, and generally make sure everything looks great before taking your theme live. Unless you duplicate your site on a staging site on your host server (a post for another day!), the only way to make customizations to your new theme is to activate it. But in the interim, you might not want your readers to see a half-customized site, nor all the changes happening behind the scenes. That’s where a coming soon page comes in!

WHAT IS IT?

coming soon page gives you a place to send people as you build your new site, and you can even use it to promote your social media accounts and gather emails before you launch! A coming soon page is also a great way to notify your visitors that you’re making site updates, so you can make changes without users seeing your work in progress.

HOW DO I GET IT?

Our favorite plugin for creating coming soon and maintenance pages is Seed Prod Coming Soon Page and Maintenance Mode. We use the Pro version on our site and for our clients, but they offer a free version as well that’s perfect if you need something up quickly, or for a short period of time.

Pro Version

What do we love about the Pro version? It syncs with MailChimp, our favorite mailing list provider, and makes it easy to build a gorgeous page without digging into code. It’s a great option if you’re launching a brand new site and need to create a customized landing page leading up to your launch, but don’t want to spend a ton of cash having it professionally designed and developed. You can add background images, customize your text, and add simple calls to action in their easy-to-use editor!

Free version

The free version has a simple interface for uploading your logo and a simple “Be back soon!” message. It’s perfect for a maintenance page while you change your theme or make tweaks behind the scenes. However, note that customizations are limited, so you won’t be able to brand your coming soon page with colors or fonts that match your brand identity. But it’s a perfect solution if you think your site will only be “offline” for a couple days, or maybe a week or two.

Whether you use the pro version or the free, we love that this plugin lets you edit your live site while still communicating to readers what’s going on, so you can always make a good impression. And don’t worry — with our straightforward theme customizer, it won’t take you too long to setup your new <em>press theme and show it off to the world!