Tech Stuff

How to troubleshoot problems in WordPress

Nothing is more frustrating than when something goes wrong with your site, and you have no idea how to fix it. We’ve done our fair share of identifying and fixing issues in WordPress for our customers, and we’ve noticed the process for pinpointing problems is nearly always the same — and it’s something you can do for yourself! Today we’re sharing our step-by-step process for how to troubleshoot problems in WordPress.

1. What was the last thing you did?

Whenever you do anything on your site, it’s important to pay attention to what’s going on. If you’re updating several plugins at once, just be sure you know which plugins are updating! Issues are almost always related to the last thing you did to your site. 

When you notice an issue on your site, start with the last thing you did, and see if you can work through steps that recreate the issue. You can install the plugin Activity Log to log activity and help you retrace your steps. If you updated a plugin, it may have been deactivated, and you may need to reactivate it. Or, it may have reset your settings or added new ones, and you need to update the settings.

2. Do you have caching and/or site performance plugins active?

Caching and site performance plugins are great for the day-to-day support of your site, but when you’re actively making changes to your site, they can cause problems. Always purge the settings and/or disable these plugins first when you experience issues. You can find out more about caching in our blog post here.

3. Do you have any plugins installed related to the issue you’re experiencing?

If you haven’t updated plugins recently and you know it’s not a caching issue, look through your plugins list for any plugins related to the issue you’re experiencing. Try deactivating each related plugin, one at a time, and check to see if the issue is resolved. Plugins can break for various reasons — maybe they aren’t compatible with the latest WordPress updates, or maybe they aren’t compatible with another plugin you’ve recently installed.

If you discover the plugin behind the issue, and it’s a plugin necessary for your site, do some research and testing. Have you added another plugin recently that has overlap in functionality? Perhaps there’s a conflict, and you can eliminate the other plugin. Or, head over to the plugin’s page on WordPress.org, and click on the support tab to check for known issues with the latest WordPress updates.

4. Do you have duplicate plugins?

We say this a lot, and we’ll say it again: do not install two plugins that do the same thing. When you have two plugins trying to edit the same functionality, the results can be unpredictable. If you’re experiencing an issue on your site, make sure you don’t have two plugins trying to override that functionality in some way. (And while you’re going through your plugins list, go ahead and delete any other duplicates to save yourself from future issues!)

5. Test your plugins one by one.

If you’ve gone through all of the steps above and still can’t figure out what’s going on with your site, try deactivating your plugins one by one. Sometimes a plugin may affect functionality you don’t know about or conflict with another plugin, and this is really the only way to find out. We know it’s labor intensive, but when all else fails, this process leaves no stone unturned.

6. Switch to the default theme.

As a last resort, once you’ve eliminated plugins as the source of the issue, try switching to the default theme installed with WordPress (as of publication, the Twenty Nineteen theme). You can use the Health Check plugin to keep your site live for visitors but enable Troubleshooting Mode in the admin area.

 

We hope this troubleshooting quick start guide helps you pinpoint any issues you’re experiencing on your WordPress site, and gets you back to blogging!

Tech Stuff

Everything you need to know about caching

Caching plugins are hugely popular among our customers, but it’s equally common to misunderstand what they do. We don’t blame you—when it comes to starting a WordPress blog, there’s an insane amount of information out there. Sure, you can find a step-by-step post for anything, but it probably also links to a “Top Ten Plugins for X” post — that never actually explains why you might need to do X in the first place.

Sound familiar? We’ve seen it over and over again: many bloggers read an article about the importance of site loading time, it recommends a few caching plugins, so they click install and move on. Which is fine… until it isn’t. So today, we’re breaking down exactly what caching is, why it’s important to your site, and everything you need to know about caching plugins.

What is caching?

In short, caching means storing bits of information for future use, to speed up delivery. In terms of your WordPress blog, this can happen in two ways:

1. Your browser cache: Every web browser has a cache where it stores a small amount of data for the sites you’ve recently visited. If you visit those sites again, your browser will pull from its cache rather than fetching new data, so it can deliver the site contents faster.

2. Server-level caching and/or caching plugins: Some web hosts offer server-level caching, or you may opt to install a caching plugin. These work similarly on your site. WordPress dynamically generates pages through a coding language called PHP, which queries a database. These caching methods store the output in the cache and deliver those files to site visitors instead, saving the time it takes to run those queries.

Generally, speeding up site delivery to your visitors is exactly what you want. But when you’re actively making updates to your site, particularly to the design of your site, caching isn’t going to show you what’s happening on your site in real time.

Caching and making site updates

The number one thing to remember when making site updates that don’t appear to be working or publishing: if you have caching plugins, or even any performance plugins, start by disabling those FIRST when things don’t work as expected. Even with no caching plugin, you’ll still need to consider your browser cache.

Let’s talk about why.

One of the top files caching plugins AND your browser cache will pick up is your theme’s style.css file, where all of your site design styles are stored. When you make changes, the caching plugin will continue to deliver your old style.css file, and so you won’t see the changes you made. That’s why it’s important to purge your cache in the plugin settings any time you make changes.

Additionally, you probably access your own site a lot, so your browser has saved a fair bit of data for your site in its cache, to speed up loading time. Even if you purge your plugin cache, you’ll still probably need to reset your browser cache. You can force your browser to fetch new data by holding the shift key and clicking the reload button in your browser. Remember, you access your own site more frequently than your readers, so their browser cache will naturally refresh from their normal browsing.

Also, be aware of any performance plugins that you use, particularly for minifying files or serving images. Many of our customers use Autoptimize, which combines all of your styles site-wide into one stylesheet, speeding up delivery. However, since it pulls in styling from plugins as well, you might update a plugin and not see an expected change. You’ll need to reset Autoptimize as well as your caching plugin to see the change. (Side note: Combining all JS files in Autoptimize can break theme and plugin functionality!)

Ultimately, even with purging your cache and resetting your browser cache, you may find changes are still not showing. Sometimes, it just takes time for everything to reset, and you may even need to temporarily deactivate caching and/or performance plugins if you want to check and make sure you did everything correctly.

Caching plugin recommendations

So, do you even NEED a caching plugin?

If your web host has server-side caching, you probably do not need a caching plugin. Caching plugins often conflict with server-side caching, and you’ll need to double-check with your web host before installing any caching plugins. WordPress managed hosts like Flywheel and WPEngine don’t allow caching plugins, as they have their own server-side caching. If you don’t have server-side caching, we recommend the plugin WP Super Cache.

You only need one method of caching on your site, whether that’s server-side caching, or one caching plugin. Do not install and run multiple caching plugins at the same time. Remember how caching plugins work? Once WordPress has dynamically generated a page on your site, the plugin keeps a copy of the static page to serve to your visitors. When you have more than one caching plugin installed, that static page could be generated from WordPress, or it could be a copy from another caching plugin. So let’s say your site goes down temporarily, then one caching plugin picks that up and serves it to the other. Your site’s actually back up, but your caching plugins are telling each other it’s not!

When it comes to performance plugins, just remember that some of these may need to be reset just as your caching plugins do. Similarly, no plugin should perform the same task.

Another thing to watch out for is loading images from a CDN. A CDN, or Content Delivery Network, stores your data on servers in multiple geographic locations and delivers content to the user from the server nearest to them, in order to speed up delivery time. If you serve your images from a CDN, or use the Jetpack plugin to speed up image load times (which is essentially a CDN), any changes you make may not be picked up by your caching plugin, resulting in missing images. You can temporarily turn off your CDN or Jetpack setting to resolve the issue.

 

We hope that this post was informative and helpful! Are there any other tech issues you want to know more about? Let us know in the comments below!

Development

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 Wheels, My 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 Joy, Dani 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?