Have you run into a situation where Facebook doesn’t display the right image or text when someone shares your site? In this post, you’ll we’ll show you exactly how to use the Facebook Debugger tool to fix that! First, you’ll learn how Facebook decides what information to display when someone shares a link from your site on Facebook. Then, we’ll show you how to use the Facebook Debugger tool to make sure your site always looks pixel perfect when shared on Facebook. Let’s dive in! How Does Facebook Decide What Information to Display, Anyway? Ok, so you know that whenever you share a link on Facebook, Facebook automatically creates this nice card that includes the following information: Image URL Title Excerpt/summary Example of Facebook link preview Here’s how Facebook picks the images and information it displays: When someone shares your website, Facebook’s crawler will scrape your page’s HTML code to generate the preview. Rather than forcing the crawler to guess what to use for the preview, you can use something called Facebook Open Graph meta tags, or og tags for short. Open Graph meta tags are behind-the-scenes code that tells Facebook exactly what content to use for its preview card. Here’s an example of the Open Graph meta tags from the Pagely homepage: An example of Open Graph meta tags Notice how the information in those tags exactly matches what you saw on the preview above? Even if you’ve never heard of Open Graph meta tags, there’s a good chance that your WordPress site is using them, because most popular WordPress SEO plugins or social media plugins will automatically add Open Graph meta tags for your content. For example, both Yoast SEO and All in One SEO Pack offer this functionality. Facebook Caches Your Open Graph Meta Tag Information There’s another important aspect to how Facebook preview cards work – once it scrapes your site’s HTML, it caches that content on Facebook’s servers. So the next time someone shares that same link on Facebook, Facebook will just pull the information from its own cache, rather than scraping your site again. That’s important because it means that any changes you make to your site’s Open Graph meta tags won’t update until Facebook clears its cache. By default, Facebook scrapes each link every 30 days (source). This leads to two potential problems: If there are issues with the Open Graph meta tags in your content (or if you’re not using a plugin that adds Open Graph meta tags), you might see the wrong image or title when someone shares your link on Facebook. Even if you fix those issues, you might not see the right image on Facebook right away because Facebook cached the older version of your Open Graph tags. Facebook Debugger helps you fix both of those problems. First, it helps you find specific issues with your site’s implementation of Open Graph meta tags so that you can make sure the proper image and information are displayed when someone shares your site on Facebook. Second, it also lets you force Facebook to refresh its cache, which ensures that your link previews display the most recent information. How to Use Facebook Debugger to Fix WordPress Images and Other Issues You’ll first want to use Facebook Debugger to see how Facebook is currently displaying the page in question. To do that, just head to the Facebook Debugger page, enter the URL you want to analyze, and click Debug: Using the Facebook Debugger tool Facebook will then spit back the version that it has cached (or, if it’s a brand new URL, the Facebook Debugger tool will scrape it first) You can also see exactly when Facebook last scraped the URL, as well as any warnings: Facebook Debugger results Further down, you can see the actual Open Graph meta tags that Facebook Debugger found: Let’s say you don’t like how some of the information is being displayed. What do you do? Step 1: Update Open Graph Meta Tags on Your WordPress Site To change which image Facebook uses or to edit the text on your card preview, you’ll need to update the Open Graph meta tags at your WordPress site. We’ll use Yoast SEO for this example because it’s the most popular option. But if you’re using a different SEO plugin, or a social media plugin, you’ll need to update your Open Graph meta tags there instead. If your site doesn’t have Open Graph meta tags yet, you can use a dedicated plugin like Open Graph for Facebook, Google+ and Twitter Card Tags. By default, Yoast SEO generates your Open Graph meta tags from your post’s featured image, meta description, and other information that you’ve already entered. If desired, though, you can manually control that information by using the Social tab of the Yoast SEO meta box: Editing Open Graph tags in Yoast SEO Make sure to save your changes. Note – most other SEO plugins handle this similarly. Step 2: Clear Your WordPress Cache (If Applicable) If you’re using a caching plugin to improve your site’s performance (or if your host offers server-level caching, like Pagely does), you’ll need to clear the cache for that page on your own WordPress site first to make sure that Facebook can scrape the latest version of your Open Graph meta tags. Most WordPress cache plugins will give you an option to clear the cache in the WordPress editor – but this depends on the specific caching plugin that you’re using: Here are tutorials for how to clear the cache for some popular caching plugins: WP Rocket WP Super Cache WP Fastest Cache If you host with Pagely, we’ll automatically clear the cache whenever you update a post or page and you don’t need to install a separate caching plugin because we include an advanced intelligent caching solution called PressCACHE. Step 3: Force Facebook to Scrape Your Page Again Now that you’ve made sure that your WordPress site is displaying the proper Open Graph meta tags, you’ll need to force Facebook to re-scrape the page to ensure Facebook has the most up-to-date version of your page and its og tags. To do that, you just need to click the Scrape Again button in Facebook Debugger. Facebook’s crawler will revisit your site and scrape the most recent version: Now, when someone shares your link on Facebook going forward, you can be sure that it will use the proper preview information. Additional Tips for Debugging Facebook Image Issues If you want to make sure that Facebook is able to properly display image previews every single time, there are some additional optimizations steps you should take. 1. Use the Proper Facebook Image Sizes Facebook recommends that you use images of at least 1200 x 630 pixels to maximize quality on high-resolution displays. But at a minimum, your images should be 600 x 315 pixels. Try to maintain this aspect ratio even if you use different image sizes because Facebook will crop your images if you use a different aspect ratio. If your image is below 600 x 315 pixels, you will not get the full image preview. Here’s what the preview looks like for smaller images: Finally, if your image size is below 200 x 200 pixels, you will not get a preview image. Period. Additionally, you’ll see an error about this in Facebook Debugger. 2. Pre-Cache Content to Fix No Preview Image Issue for a Brand-New Post When someone shares one of your links on Facebook for the first time, Facebook might not display a preview image right away. That’s because “The crawler has to see an image at least once before it can be rendered.” In plain English: “This means that the first person who shares a piece of content won’t see a rendered image.” There are two ways that you can fix this. First, you can run all of your new blog posts through Facebook Debugger right after you publish them. This lets Facebook pre-cache your post’s image, which ensures that it shows up right away, even for the first person to share the post. Second, you can add the og:image:width and og:image:height Open Graph meta tags. This lets the crawler “render the image immediately without having to asynchronously download and process it.” More on pre-caching Facebook images here. Make Your WordPress Site Look Perfect on Facebook Every Time By using Facebook Debugger and Open Graph meta tags, you can ensure that your WordPress site’s content always looks perfect when it’s shared on Facebook. Just remember that caching can sometimes play tricks with what shows up! So if you don’t see the proper information, make sure to clear the cache on your WordPress site and then force Facebook to scrape again with Facebook Debugger. Have any other questions about using Facebook Debugger? Let us know in the comments!
Plugins are the backbone of WordPress sites. Whether you want to add a contact form or an eCommerce store, plugins are always there to lend a helping hand. But despite the essential role they play, plugins are also one of the places on your WordPress site that are most likely to go “wrong”. Because plugins are made by independent third-parties, they can open the doors to all kinds of security and compatibility issues. That’s why there are some plugin best practices you need to follow when you’re running a WordPress site. These best practices span tips for how to choose plugins, how to analyze their performance, and how to properly maintain them once they’re a part of your site. No matter what type of site you’re working on, here are the best practices you should follow when working with WordPress plugins… How To Pick The Right Plugins To Install The WordPress core team has made it incredibly simple to install plugins nowadays…which is a double-edged sword because it means that you can install new plugins without a second thought. Don’t do that – put some effort into only using quality plugins on your site. Some of the tips in this section might seem a little basic, but I think they’re important to cover nevertheless. 1. Consult The Wisdom Of The Crowds While popularity doesn’t always mean quality, it is a good starting point in your quest for a plugin. That is if you’re staring at one plugin that’s been downloaded 500,000 times and another that’s only been downloaded 3,000 times, the former plugin is probably going to be the better option more often than not. WordPress.org shows this information in the right-hand sidebar: And Envato also publicizes sales numbers in its sidebar: 2. Check The Last Update Date This is another one that’s a good general guideline, but not an absolute rule. Most of the time, you want to see that a plugin is still receiving regular updates to ensure it’s compatible with the latest version of WordPress. That doesn’t mean a plugin that hasn’t been updated is always bad – sometimes a plugin “just works” and doesn’t need updates. But unless you have the knowledge to actually look at the code yourself, it’s hard to know whether or not that applies to your chosen plugin. So, when in doubt, seeing a recent update date is important. Again, both WordPress.org and Envato show this information in the sidebar (marked above). 3. See What The Reviews Say For every savvy copywriter crafting copy that makes you want to install the plugin right away, there’s a reviewer willing to tell you all that plugin’s potential flaws. Consult those reviewers before you pick a plugin. Again, both WordPress.org and Envato make it easy to access third-party reviews. 4. Gauge How Responsive The Developer Is To Issues Beyond the reviews, another good way to gauge a plugin’s quality (at least on WordPress.org) is to look at the support forum. It’s a good sign to see that the developer is actively resolving support requests: One thing to note, though, is that some developers only handle support requests on their own website. So check to see whether that’s the case before you ding them for unresponsive support. 5. Don’t Use Nulled Plugins If you’ve ever searched for a premium plugin in Google, you may have noticed that Google’s autosuggest feature almost always suggests “plugin_name nulled” as a query: That means there are a lot of people looking for nulled themes and plugins… In case you’re on the fence, nulled plugins are a horrible idea. Unlike their legal (but ethically debatable) cousins, GPL Clubs, nulled plugins are rife with malware and other vulnerabilities. That means what you think is a way to save money is actually going to cost you down the road. Just don’t do it – there are plenty of quality free alternatives to most plugins. 6. Use A Sandbox Tool To Test Plugins Found a plugin that checks all the boxes above? Before you install it on your live (or staging) site, you can give it a quick test run in a sandbox thanks to tools like the oddly-named, but highly effective, Poopy.life. Poopy.life lets you create a blank sandbox where you’ll need to manually install the plugin yourself: How To Pick The Proper Number Of Plugins (Or Why There Isn’t One) Once you know how to pick quality plugins, let’s dig into the next question: How many plugins should you use? Contrary to the oft-repeated advice, too many plugins will not slow down your site. But too many plugins that slow down your site will…slow down your site. What I mean by that is that there’s no direct relationship between the number of plugins that you have installed and your site’s speed. Some plugins will have essentially zero effect on your site’s speed, while others might cause a noticeable slow-down. You could have one hundred of the former with no issue, but one of the latter is bad for business. In a recent survey we ran with WordPress users ranging from specialty dev agencies and bloggers to enterprise tech leads and CEOs we found that 44% of users have 1-5 plugins installed, where 30% of users have 6-10 plugins installed, and 22% have over 10 plugins installed. The rest claimed to have none. So how do you figure out which plugins are slowing down your site? Here are two tips: 7. Use The P3 (Plugin Performance Profiler) Plugin This one is a good example of how a plugin that hasn’t been updated in a while can still work great. While P3 (Plugin Performance Profiler) hasn’t been updated in three years now, the plugin still performs its function admirably (at least in my experience – some reviewers do cite issues with detecting plugins). All you do is run the test. Then, P3 (Plugin Performance Profiler) will give you a beginner-friendly look at how your plugins impact your site’s performance, as well as how individual plugins perform: 8. Go To The Waterfall (Use GTmetrix) Another way to catch slow-loading plugins is to look at the Waterfall tab in tools like GTmetrix or Pingdom. While the information isn’t quite as detailed and requires more technical savvy to interpret, you can single out plugins that are slowing down your site with slow requests. Just run the performance test as usual. Then, look at the Waterfall analysis chart and hover over lengthy requests to see if any plugins are slowing things down. I’ve pointed out a couple of the most obvious WooCommerce requests below so you can see how it generally works: How To Safely Update Your Plugins To Keep Things Functioning If you want to keep your WordPress site secure, keeping your plugins updated is an absolute necessity. In a survey from Wordfence, plugins accounted for 55.9% of the hacked sites where the respondent knew how the hacker gained entry. Similarly, Sucuri found that three un-updated plugins accounted for a massive percentage of hacks. Suffice it to say, you need to keep your plugins updated. Here’s how to do it safely: 9. Read The Changelog To Check For Any Likely Issues A lot of people don’t know that this feature exists, but it’s super helpful for sussing out potential issues with a new plugin update. Whenever you see the update prompt in your WordPress dashboard, you can click the View version X details link to see a changelog for the latest update: While the depth of this changelog is up to the developer, it can help you pinpoint specific areas to test after you update the plugin. Speaking of… 10. Use A Staging Site To Check For Compatibility Issues A staging site is an awesome tool for testing plugin updates before you push them to your live site. Combined with the information from the changelog, you can quickly run through the relevant functionality on your staging site to make sure there aren’t any issues. Then, once you’ve given everything a test, you can safely update the plugin on your live site. The easiest way to get access to a staging site is to choose a managed WordPress host that offers that feature. But if that’s not an option, the WP Staging plugin provides a slick, host-independent implementation. What To Do With Plugins You No Longer Want Just like ~50% of marriages end in divorce, there will come a time when you decide to break up with one of your plugins. To make a clean break, here are two more best practices to round out this post. 11. Don’t Leave Unused Plugins On Your Server This one is simple: If you’re not actively using a plugin (and have no plans to use it in the future), delete it. Here’s why: Even when a plugin is deactivated, all that code is still sitting on your server. Many malicious attacks target specific PHP files that are included with a plugin. So even if you’ve deactivated the plugin, those attacks could still access the PHP files (Mark Maunder from Wordfence discusses this here). So if it’s not being used – get rid of it. All you need to do is hit the Delete button in your WordPress dashboard and that should get rid of all of the plugins files. But… 12. Remove Left-Behind Database Tables, Too …sometimes hitting that Delete button isn’t going to remove all traces of a plugin from your server. Often, plugins will leave behind gunk that clutters up your database. While you can manually remove these tables if you’re comfortable working with phpMyAdmin, a more user-friendly approach is to use the premium version of the Advanced Database Cleaner plugin. Specifically, you’re looking at the categories that relate to Orphan options or Orphan tables. Final Thoughts On WordPress Plugin Best Practices Following these WordPress plugin best practices isn’t especially difficult or technical, but it can have a major effect on the stability and functioning of your site going forward. If you: Properly vet and test plugins before installing them Analyze how plugins affect your page load times after installing them Safely (and quickly) update your plugins Properly delete unused plugins Then you’re setting your WordPress site up for success both now and in the future.
You’re likely always looking for ways to speed up your WordPress site. With benefits like improved user experience, more conversions, and maybe even better search rankings, faster page load times are always a good thing. There are a number of ways to speed up WordPress (many of which Pagely has implemented). But given that 63% of an average web page’s file size is images, improving your approach to WordPress image optimization offers a stellar return on investment when it comes to page load times. WordPress image optimization basically involves slimming down your images’ file sizes without affecting user experience by implementing a couple of basic strategies. In this post, we’ll go over those strategies, as well as how you can implement them for your own WordPress site using either plugins or a manual method. What Goes Into WordPress Image Optimization? WordPress image optimization generally breaks down into two core categories: Resizing image dimensions to avoid wasted pixels Compressing images to reduce their file size While there are other smaller considerations like file formats, generally you’ll need to “work with what’s available” so to speak. Let’s break down those two factors and parse out why each is important. Resize WordPress Image Dimensions So You Don’t Waste Space According to the latest data from Statcounter, the most common desktop screen resolution, by far, is 1366×768. The massive growth of mobile puts the overall most common screen resolution at just 360×640. Why are those stats important? Because they show that uploading a 4000×2000 px image isn’t necessarily going to offer your visitors any better quality. When you combine those screen resolutions with the fact that most WordPress sites have at least one sidebar, the average WordPress site has a viewable content area that’s probably somewhere in the range of 800px for most users. Beyond a small buffer to give you some flexibility if you change themes in the future, every pixel over the max display dimensions of your theme just inflates your images’ sizes unnecessarily. Side note: using photo galleries in WordPress can help you further restrain these dimensions, when used properly. Compress WordPress Images To Save Even More Space Once you resize your images’ dimensions, you can still shave off more file size by performing something called compression. Compression shrinks images further without making any changes to the dimensions. Compression comes in two forms: Lossless – a moderate type of compression that reduces file size without affecting quality. Lossy – a more aggressive type of compression that greatly reduces file size at the expense of a reduction in quality. Which is better? That depends entirely on your goals. If your images are a focal point of your WordPress content, going with lossless compression is a good idea to preserve quality. But if your images are less important, you might want to go with lossy compression to maximize file size savings. 3 Helpful Image Optimization Plugins Compared WordPress image optimization plugins can help you automatically resize and compress the images that you upload to WordPress. While there are more than 3 image optimization plugins, here’s a dirty little secret: Most of them use the same image compression algorithms. For that reason, most of them offer the exact same file size savings. With that being said, there are some functionality and pricing differences that make it worthwhile to look at a few different options. To get an idea of how effective each plugin is, I’ll compress the same test image both losslessly (minimum compression level offered) and, if available, lossily (maximum compression level offered) to see how well each plugin works. For reference, the test image has a starting file size of 194 KB. 1. Imagify Imagify is an image optimization plugin from the same team behind WP Rocket, a popular WordPress caching plugin. The plugin offers up 3 levels of compression: Normal – lossless compression Aggressive – somewhat lossy compression Ultra – very lossy compression Beyond that, the selling points of Imagify are: User friendly, pleasant interface Automatic image dimension resizing Ability to only optimize certain thumbnail sizes Option to restore original image versions with one click Imagify has a free plan that lets you optimize 25MB of images per month. After that, you’ll need to pay, starting at $4.99 for 1GB. How Much Does Imagify Compress Images? When running under Normal (lossless) compression, Imagify compressed the original 194KB image to 176KB for a savings of 8.9%. After switching to Ultra (maximum lossy compression), Imagify shrank the file to 98.56KB for a savings of 49.15%. As you might expect, those savings came with a noticeable drop in image quality. 2. EWWW Image Optimizer EWWW Image Optimizer is a popular free plugin that offers a key difference from most other image optimization plugins. Whereas most image compression plugins send the image out to the plugin’s server for compression via an API, EWWW Image Optimizer lets you keep everything on your server. That means if your server can handle the workload, you can compress unlimited images using a limited set image compression algorithms without needing to spend a penny. On the other hand, if you do prefer to offload the image compression work to someone else’s server, EWWW Image Optimizer also offers an API plan that starts as low as $0.003 per image. Additionally, you’ll need an API key if you want access to the full library of compression algorithms. For example, the free version only allows lossless compression for JPGs. That said, for security reasons, we recommend using API or cloud-based plugins where all the image processing happens on remote servers, and doesn’t require any local executables to be installed. Beyond compression, EWWW Image Optimizer can also help you automatically resize your images’ dimensions. How Much Does EWWW Image Optimizer Compress Images? Because EWWW Image Optimizer only allows lossless compression, there’s only one test result here. When compressing the test image losslessly, EWWW Image Optimizer reduced its size to 176KB for a savings of 8.9%. You did indeed read that right – it’s identical to the lossless compression offered by Imagify. 3. Smush Smush is another popular image compression plugin from the folks at WPMU DEV. Like Imagify, Smush offers a well-designed interface, as well as helpful options that let you automatically resize your images’ dimensions and compress specific thumbnail sizes. The main difference between Smush and Imagify is pricing. Smush is 100% free for images under 1MB, but only offers lossless compression. For larger images, more aggressive compression, and the ability to save your original images, you’ll need the WPMU DEV Membership starting at $49 per month. There’s a good chance that works out to be more expensive than Imagify, though you do get access to all of WPMU DEV’s other plugins which is a big benefit. How Much Does Smush Compress Images? Like EWWW Image Optimizer, the free Smush plugin only offers lossless compression. After compressing the test image, Smush was able to losslessly reduce its size to 176KB for a savings of 8.9%. Again, identical to the two other plugins. What Does Testing Show About Image Optimization Plugins? As you can see from testing, there aren’t major differences in the level of actual compression between popular plugins. For that reason, you’re better off choosing plugins based on their interface, features, and pricing. How to Manually Optimize WordPress Images Before Uploading As a freelance contributor to a variety of sites, I feel confident in saying that I’ve mastered the art of bulk optimizing images before I ever upload them to WordPress. While the previous plugins offer a more automatic approach, the manual method is helpful if: You don’t want to pay for a plugin You don’t have admin access to the site you’re uploading images to To manually optimize your images for free, you can start off by bulk resizing your images using a tool called BIRME. In addition to resizing images, the tool can also help you automatically crop images. If you’re just looking to resize without cropping, though, make sure to choose the Auto-height option: Once you’ve resized your images’ dimensions, you can compress them either Losslessly or Lossily by using the free Kraken web interface: Both tools only take a few seconds to use. And once you’re finished, you can upload your already-optimized images straight to WordPress. Dynamically Scale and Serve Image Assets with PressThumb Pagely customers have access to flexible, on-demand image management. PressThumb is a simple drop-in service that can be enabled on your WordPress site to offload image optimization and thumbnail creation in real-time, saving on bandwidth, storage, and page size. Learn more about it here. There’s More to Speed Than Optimized Images Optimizing your WordPress images is a great way to speed up your WordPress site. But it’s also only part of the battle. You also need a managed WordPress host that gives you the proper technological foundation to run a blazing fast WordPress site.
You probably remember the concept of blockquotes from school. If you’re like me, you might even have flashback nightmares about properly MLA-formatting long form blockquotes. Omit the quotation marks, indent this, double space that… Thankfully, WordPress blockquotes are a little less stressful. They’re actually a great way to break up a wall of text in your post. You can use them to quote other people or to simply offset a portion of text from the main body of your post. You can even quote yourself, and use it as a pull quote! But as helpful as they can be, sometimes the default blockquote style for your theme is flat out ugly. While most themes should apply some sort of style to blockquotes, it won’t always fit the aesthetic of your theme. So if you find yourself needing to customize how the blockquotes on your site look, keep reading to learn how to style blockquotes in WordPress. How to Style Blockquotes in WordPress With CSS To style blockquotes manually, you’ll need to add some custom CSS to your theme. You can add this CSS in a child theme (learn how to create a child theme), in the WordPress Customizer CSS box, or in your theme’s custom CSS settings (if your theme offers such a box). I’ll do it using the WordPress Customizer CSS box so that you can see my code side-by-side with the front-end results. But you can use whatever you feel most comfortable with. In order to get to the WordPress Customizer CSS box, Go to Appearance > Edit CSS. To give you an idea of where I’m starting from, here’s how blockquotes look in the default Twenty Seventeen theme: Now, I’ll run through a few ways in which you can use CSS to style your blockquotes. For all of these examples, you can easily change the colors I use by grabbing the hex code of your desired color and swapping it in for the color I use in the example. Similarly, you can change the thickness of the borders in my examples by increasing or decreasing the numbers. Ok, let’s get into how to style blockquotes in WordPress… Center Align Your Blockquote Considering most of the text in your post will be left-aligned, one way to make blockquotes stand out is to center align them. To do that, all you need to do is add this short CSS snippet: blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; } Change Font, Font Color, and Font Size Ok, so far so good. But how about mixing it up a little more? Let’s try changing the font, making it blue, and increasing the size. I’ll also keep the center-alignment from the previous example: blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; } Add a Background Let’s take it one step further and say you want to add a background to the style above. All you need to do is add one more line to your existing CSS: blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; background: #ccc; } You can also round the corners of the background by adding a border radius: blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; background: #ccc; border-radius: 30px; } And if you want to add an accent border to your background, you can do something like this to add a border running vertically along the left side: blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; background: #ccc; border-left:5px solid #428bca; } Add Lines to Offset Blockquotes If you don’t want your blockquotes to have a separate background color, another method that you can use to offset them is lines or partial borders. Here are a few options: Add Brackets Around Your Blockquote: For this one, you’ll use partial borders on all four corners to form a sort of “bracket” around your blockquote: blockquote { max-width: 600px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; border-left: 4px solid #428bca; border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-right: 4px solid #428bca; border-top-right-radius: 30px; border-bottom-right-radius: 30px; } Add Horizontal Borders Around Your Blockquote: Up until now, I’ve shown you mostly vertical borders, but you can also style your blockquotes with some nifty horizontal borders. Here’s just one example: blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; border-top: 4px dotted #428bca; border-bottom: 4px dotted #428bca; } If you’re not a fan of the dotted border, all you need to do is changed “dotted” to “solid” to get something more like this: Add a Quotation Mark If you know that you’re going to be using blockquotes for actual quotations only, you can use CSS to add a quotation mark. You might need to play around with the top and left position by changing the numbers, but adding this code to any of the above examples will add a quotation mark in the top left: blockquote::before { content: "\201C"; display: block; font-size: 80px; left: -230px; top: -50px; position: relative; height: 0; } How to Style WordPress Blockquotes With a Plugin If using CSS isn’t quite your style, you can still add some flair to your blockquotes using a plugin like Perfect Pullquotes. It adds a shortcode builder that helps you add left-aligned, right-aligned, or full-width quotes to your content. You can quickly change colors and font sizes. And if you’re actually quoting someone, you can easily add a citation. To change colors and sizes, you just need to add the following attributes to the shortcode: color=”hex_code” size=”number” There you have it! Two ways to style how blockquotes appear in WordPress. If you’re looking for another cool way to highlight text in your posts, you can also add eye-catching “Click to Tweet” quotes. And yet another helpful way to break up text is adding tooltips to your posts.
If you feel somewhat restricted by the flexibility of layouts provided by WordPress themes, you might be interested in building your WordPress webpages with a page builder plugin. WordPress page builders have become wildly popular because they let anyone, even those without the gift of code, build a beautiful website or landing page using a simple drag and drop, WYSIWYG editor. As you research which website builder or WordPress plugin would be best for you, you’ll look at a number of important factors: ease of use, pricing, page layout templates, etc. In this post, we’re focusing on comparing these page builders on one factor: speed. Are the finished products that page builders put out all the same when it comes to performance? Or, are these builders creating inefficient code bloat that slows down your WordPress site’s performance and harms your UX? A beautiful, pixel perfect page isn’t worth much if your users bounce because your site takes 5 seconds to load. How quickly your website loads is tied to its success. Statistics indicate that every 100 milliseconds of load time creates an approximately 7% increase in your bounce rate. But unless you want to take the time to build identical landing pages with different page builders and test their performance, it’s hard to know for sure how each page builder stacks up. Well… we took the time. I built near-identical landing pages with five popular WordPress page builders and then ran them through a bevy of speed tests to find the best WordPress page builder in terms of performance. Now, I’m going to share all of that data with you. Here’s How I’m Going To Test These 5 Page Builders To test each page builder’s performance, I’m going to build a landing page using each of the five page builders. I’ll base this roughly on the Pagely landing page, with a few elements added and removed. These landing pages will be, as much as possible, perfectly identical, though this isn’t always achievable because of the elements available in each page builder. Also, don’t expect them to look as good as the original Pagely homepage because I’m… well, not a professional designer (or even an amateur designer). Once I build the landing page with each page builder, I’ll collect data using three different tools: WebPagetest – gives a detailed performance analysis, including load time and a “speed index” Pingdom Tools – provides page load time, page size, number of requests Query Monitor plugin – shows how many database queries the plugin makes and how long those queries take I’ll also time how long it takes me to build the demo landing page, but I recommend that you take these numbers as rough estimates, rather than absolutes. Here’s why: Going into these tests, I’ve used some of these page builders more than the others, so it’s not scientific for me to declare one “easier to use” than the others. Here Are The Technical Details Of My Test Setup For these tests to hold any value, they need to be consistent. And you need to trust that they’re consistent. So before I jump into any actual testing, let’s run through how my test site is set up: Hosted on Pagely Running WordPress 4.9.2 Using the Astra theme, a popular option for developers to pair with page builders No sidebar. Full-width stretched container (these are Astra theme options) Query Monitor plugin installed No other plugins installed No page speed optimizations beyond those automatically implemented by Pagely hosting And here are the page builder plugins that I’ll be using: Elementor – version 1.9.2* Beaver Builder Pro – version 2.0.3.1 Divi Builder plugin (i.e. not the theme version) – version 2.0.31 WPBakery Page Builder – version 5.4.2 (formerly known as Visual Composer) SiteOrigin Page Builder – version 2.6.1 plus SiteOrigin Widgets Bundle version 1.11.3 *Because Elementor Pro is an add-on, rather than a standalone plugin like the other premium versions, I think it’s fair to test using the free version of Elementor. Running The Tests For Each Individual WordPress Page Builder Now that you know what these tests are built on, let’s jump in and look at the data! For each page builder, I’ll include: A screenshot of what the tested landing page looks like Pingdom performance data WebPagetest performance data How long it took me to create the page (remember – this is just a rough guideline – don’t take it as a hard comparison) A screenshot of what happens after deactivating the page builder, to give you an idea of how much “lock-in” there is Then, at the end, I’ll put it all together in one, easy-to-compare table and make some conclusions! If you’d rather skip the play-by-play, you can click here to skip straight to the summary table. Elementor Performance Test Like all the page builder plugins featured here, Elementor makes it easy to create great looking webpage quickly without having to know any HTML, CSS, or Javascript. Elementor offers a unique feature called “Elementor Canvas” which allows you to build a web page completely from scratch — completely separate from the WordPress theme. There’s no footer inserted, no menus, no sidebars. It’s the ultimate flexibility in WordPress design and very handy for creating drag and drop landing pages in particular (which often use non-standard layouts and require minimal distractions from the call to action). What The Landing Page Looked Like: Time To Build Page: 22:09 Pingdom Test Data: WebPagetest Test Data: Query Monitor Data: What Happens After Deactivating The Plugin: Beaver Builder Performance Test Beaver Builder is a popular website building plugin used by over 175k websites. It’s famous for its ease of use and intuitive UI. It also offers some advanced features like keyboard shortcuts and the ability to save rows and columns so they can be easily reused. Beaver Builder is built on the Bootstrap framework and claims to be fast and lightweight. Let’s see how it performs in the real world… What The Landing Page Looked Like: Time To Build Page: 20:37 Pingdom Test Data: WebPagetest Test Data: Query Monitor Data: What Happens After Deactivating The Plugin: Divi Builder Performance Test Divi, by Elegant Themes, is both a WordPress theme and a standalone page builder plugin. Here we’re reviewing the performance of the website builder plugin not the WordPress theme. You can create pages and posts in the WordPress backend or even design your site using WordPress’s frontend with a WYSWIG editor. Divi offers hundreds of child themes and pre-built page templates. True to its company’s name, Divi offers a truly elegant page building experience with lots of polish, eye candy, and intuitive features. What The Landing Page Looked Like: Time To Build Page: 21:02 Pingdom Test Data: WebPagetest Test Data: Query Monitor Data: What Happens After Deactivating The Plugin: WPBakery Page Builder Performance Test Like Elementor, WPBakery is often bundled in with many popular WordPress themes. WPBakery stands out from many of the other page builders because of how many add-ons and enhancements are available. You can choose from over 200 add ons that do everything from slick CSS animations to improving your WooCommerce product pages. What The Landing Page Looked Like: Time To Build Page: 27:18 Pingdom Test Data: WebPagetest Test Data: Query Monitor Data: What Happens After Deactivating The Plugin: SiteOrigin Page Builder Performance Test SiteOrigin is completely free. While many page builders install their own widgets, Site Origin is unique in that it plays nice with default WordPress widgets. What The Landing Page Looked Like: *SiteOrigin Page Builder doesn’t have a counter element, so I used static HTML instead which gives it a slight advantage in the performance tests. Time To Build Page: 19:51 Pingdom Test Data: WebPagetest Test Data: Query Monitor Data: What Happens After Deactivating The Plugin: WordPress Page Builder Speed Comparison After all the tests were run and the data crunched, here’s how things shook out. Let’s look at the good first. Here’s the overall winner from each category: Fastest Pingdom Page Load Time: SiteOrigin Page Builder at 390 ms Fewest Pingdom Requests: SiteOrigin Page Builder with 13 Lowest Pingdom Page Size: SiteOrigin Page Builder with 245.0 kB Fastest WebPagetest Fully Loaded Time: SiteOrigin Page Builder with 578 ms Lowest WebPagetest Speed Index: SiteOrigin Page Builder at 500 Fewest Database Queries: Divi Builder with 8 Lowest Database Query Time: Divi Builder at 0.0039 s And now let’s look at the worst performer in each category in our tests: Slowest Pingdom Page Load Time: Beaver Builder at 665 ms Most Pingdom Requests: Elementor with 28 Highest Pingdom Page Size: Divi Builder at 532.7 kB Slowest WebPagetest Fully Loaded Time: Divi Builder at 1.294 s Highest WebPagetest Speed Index: Divi Builder at 901 Most Database Queries: Elementor with 30 Highest Database Query Time: Elementor at 0.0123 s You can view the full dataset below: For all of the data in this table, a lower number is better: Elementor Beaver Builder Divi Builder WPBakery Page Builder SiteOrigin Page Builder Pingdom Page Load 489 ms 665 ms 463 ms 401 ms 390 ms Pingdom Requests 28 20 15 15 13 Pingdom Page Size 530.7 kB 416.6 kB 532.7 kB 435.7 kB 245.0 kB WebPagetest Fully Loaded 1.254 s 943 ms 1.294 s 849 ms 578 ms WebPagetest Speed Index 574 700 901 610 500 Database Queries 30 14 8 10 9 DB Queries Time 0.0123 0.0059 0.0039 0.0042 0.0042 Time To Build Page 22:09 20:37 21:02 27:18 19:51 What Conclusions Can We Draw About Page Builder Performance? The data is there for you to interpret yourself. But here are some conclusions I think are worth considering: Page Builders Are, To An Extent, A Balancing Act Between Performance And Features Unsurprisingly SiteOrigin Page Builder had the best performance in nearly all of the tests. But here’s the thing: SiteOrigin Page Builder isn’t just lightweight when it comes to performance – it’s also lightweight when it comes to features. You get better performance than the other page builders by, in part, sacrificing functionality. For the performance-focused, that trade-off might be well worth it. But other people might be willing to trade a bit of performance for a more powerful page building experience, and I don’t think there’s necessarily anything wrong with that. The average user will be able to build a more complex page with one of the other four page builders. For that reason, I think it’s best to look for a page builder that has the features you need and then compare the performance of page builders that meet that criteria. There Aren’t Major Differences Between The High-Powered WordPress Page Builders If you exclude SiteOrigin Page Builder and just focus on the more feature-rich page builders, you’ll notice that there isn’t a ton of difference between them. You can certainly spot some differences – Elementor is a bit heavy on database queries and requests, while Beaver Builder offered the smallest page size. But overall, all of these plugins have clearly worked to optimize performance, which is probably why they’re the market leaders in the space. Shortcode Lock-in Is A Real Consideration If you’re choosing a page builder for life, you don’t need to worry about this. But if you think there’s a chance you might switch (or stop using) page builders down the road, it’s important to point out that only two of these page builders leave behind completely clean code. The two plugins that leave behind 100% clean code are: Elementor Beaver Builder SiteOrigin Page Builder leaves behind mostly clean code, but it does leave a few shortcodes, notably showing up wherever I used buttons. Finally, both Divi Builder and WPBakery Page Builder leave behind a heap of shortcodes that you’ll need to find a way to remove. What Are Your Experiences With WordPress Page Builders Performance? Of course, the speed of your WordPress website is only one factor to consider when it comes to finding the best page builder for your site. Things like ease of use, the quality of page templates they include, how easy the styling of the pages is, pricing, level of support, and many other factors come into play. But, what you’re ultimately trying to produce is a beautiful website that loads quickly so the performance of these different page builders is a critical consideration. What are your own experiences with these WordPress page builder plugins and performance? And more importantly, where do you think the balance should lie between features and performance? For another in depth opinion piece from Pippin Williamson on page builder plugins, check this out.
Best Social Media Plugins for WordPress Did you know that more than a quarter of the world’s population is using Facebook? That’s, well…a lot of people on social media. And though Facebook may be the biggest social network, it’s still just one social network in a sea of many. All that adds up to the fact that you probably don’t want to ignore social media when it comes to your WordPress site. But, by its default nature, WordPress isn’t an especially “social” content management system – so if you want to make your WordPress site a little more socially friendly, you’re going to need some social media plugins. And to help you find those plugins, I’m going to dig into some of the best social media plugins out there for 2018. 4 Helpful Social Share Button Plugins When it comes to social media and WordPress, the most common type of plugins you’ll encounter are social share button plugins, so let’s dig into those first… All these plugins help you create buttons that your visitors can click to quickly share your content on various social networks. 1. ShareThis ShareThis is a popular social sharing service that’s used by big entities like USA Today and the Ellen show. As part of its suite of tools, ShareThis has a dedicated WordPress plugin that lets you add share buttons for a huge variety of networks, including unique options like WhatsApp and SMS. ShareThis lets you add these buttons to a couple different locations: Inline buttons that appear at a specific spot in your content (usually the bottom or top). Sticky buttons that appear on the right or left side (for desktop) and the bottom of a user’s screen (for mobile). Beyond those two locations, other helpful features include: Gorgeous designs. Ability to enable/disable share buttons on your homepage, post types, or taxonomy archives. Option to override default settings to enable/disable share buttons for individual posts/pages. Ability to display total share count, including an optional minimum share count. While the old ShareThis plugin had over 90,000 active installs, ShareThis recently completely relaunched the plugin, which is why the current active install count is a bit lower. Price: Free 2. Social Warfare Social Warfare is a popular premium social share button plugin. The main reason to consider Social Warfare over something free like ShareThis is that, in addition to beautiful social share buttons, you also get above-and-beyond features like: The option to set a Pinterest-specific image and description. Click-to-Tweet functionality. Individual share counts, including Twitter. Share count recovery to keep your old share counts if you move to HTTPS or change your permalink structure. Automatic UTM tracking to help with analytics. If all you’re looking for is stylish social share buttons, you should probably just use ShareThis because it’s a quality free solution. But if any of those extra features intrigue you, give Social Warfare a look. Price: $29 for a single site license 3. Easy Social Share Buttons With over 22,500 sales and a stellar 4.66-star rating, Easy Social Share Buttons is the most popular social share button plugin at Code Canyon. Like Social Warfare, Easy Social Share Buttons’ unique selling proposition is all the extra features it adds beyond stylish social share buttons. Some of those features include: After share actions – display social follow buttons, email opt-in forms, or anything else after a visitor shares one of your posts. On media sharing – display share buttons on individual images rather than just the entire post. Top social posts – display a list of your top posts by share count. A/B testing – A/B test different share button configurations to find which ones get you the most shares. Pinterest-specific images – just like Social Warfare. Lots, lots more. Again like Social Warfare, the main reason to pay for Easy Social Share Buttons is if you like those premium features – the actual share buttons themselves aren’t any more stylish than you’d get with ShareThis. Price: $18 4. MashShare Like ShareThis, MashShare is a free social share buttons plugin. But where it differs from ShareThis is in the style of those share buttons. As the name suggests, MashShare helps you add Mashable-style share buttons to your WordPress site (see screenshot above for what that means). Beyond its unique button styling, here are some of the other things that MashShare can do: Display total share count. Show “virtual” (fake) share counts for new articles to increase social proof (the ethics of this are a bit iffy). Use object caching for improved performance. A variety of premium add-ons for things like additional social networks, Google Analytics, and more. While it does have some unique features, the main reason to choose MashShare over something more generalized like ShareThis is still aesthetics. Price: Free with premium add-ons 4 Miscellaneous Social Media Plugins For Automatic Posting, Metadata + More While the bulk of the social media plugins that you’ll find are built to help you create social share buttons, you can also find plugins that help you work with social media in other ways. This mish-mash of a section includes plugins that help you do things like: Automatically post content on social media Add helpful metadata like Facebook Open Graph Tags Let your users log in with their social profiles 1. Revive Old Post Revive Old Post is a freemium plugin that helps you accomplish two core tasks: Automatically share new posts to your social media profiles. Automatically reshare old posts to your social media profiles. While the first task is easy enough to accomplish with something like IFTTT, the ability to reshare old content is what makes Revive Old Post so helpful. In the free version, you can: Share new and old posts to a single account at each major social media network. Choose how many posts to share. Add hashtags to get more attention. Exclude certain categories and/or individual posts. And if you pay for the premium plugin, you can: Use multiple social accounts for each network. Share custom post types. Create your own custom schedule. Share posts with an image. Price: Free or Pro starts at $75 2. Facebook Open Graph, Google+ and Twitter Card Tags If you want to control how your content looks when it gets shared on social media networks like Facebook and Twitter, you need to add specific metadata to your WordPress site. The only problem? WordPress doesn’t let you do that by default. While some SEO plugins like Yoast SEO and others give you the ability to add this metadata, the Facebook Open Graph, Google+ and Twitter Card Tags plugin is a more standalone solution that’s dedicated specifically to social media metadata – nothing more. With it, you can add: Facebook Open Graph Tags Twitter Card Tags Meta Description + Schema.org tags for Google + What’s neat is that the plugin also includes specific integrations so that it plays nice with: Yoast SEO WooCommerce Business Directory Plugin If you do decide to use this plugin with Yoast SEO, just make sure to disable Yoast SEO’s social metadata functionality to avoid a conflict. Price: Free 3. Super Socializer Super Socializer is one feature-packed social media plugin. In addition to its social share buttons (which could warrant its inclusion in the previous section), Super Socializer also includes two other helpful social media features: Social login for both the WordPress login page and the WooCommerce checkout page. Social commenting for Facebook, Google Plus, and Disqus. If you want to go all in with social media at your website, Super Socializer is one of the most popular and highest-rated options. Price: Free 4. Flow-Flow – WordPress Social Stream Plugin Flow-Flow is a premium plugin that helps you display social media streams on your website. These could be streams from: Your own accounts. Other people’s accounts. Keywords or hashtags. In total, Flow-Flow supports 16 different feed sources, including all the big networks like: Facebook Twitter Instagram YouTube Pinterest What’s neat is that you’re free to mix and match these different networks into one unified stream. And you can also add keyword filters and content moderation to make sure you don’t accidentally import the wrong type of content. Finally, to avoid performance issues, Flow-Flow uses caching (based on a time interval that you can specify) to limit resource and API usage. If you need to showcase social streams on your WordPress site, Flow-Flow’s 10,000+ sales and 4.71-star rating make it a pretty good option. Price: $35 Wrapping Things Up It’s hard to narrow the field down to just 8 social media plugins because there are so many quality options, especially when it comes to social media share buttons. I tried my hardest to give you only the best of the best, but if you think there’s a great plugin that didn’t make the list, be sure to leave a comment and let us (and everyone else) know about it!
Whether you’re a large digital publisher or a solo-blogger, ads are usually at least a part of what helps you keep the lights on. But WordPress, much as we may love it, doesn’t provide any easy way to manage advertisements…at least out of the box. That’s where WordPress advertising plugins come in. These plugins help you manage your ad inventory, insert them at various spots on your site, and maybe even optimize and target them as well, depending on the exact plugin that you choose. In this post, I’ll get into some of the most popular WordPress advertising plugins and compare and contrast what makes each one unique. These plugins are flexible enough to support both larger media publishers and smaller webmasters with your advertising strategies. 5 Helpful WordPress Advertising Plugins 1. Ad Inserter Ad Inserter is the most popular WordPress advertising plugin at the WordPress.org plugin directory. It’s that way for a good reason, too. The plugin is regularly updated, well-rated, and receives great support from the developer (58/59 resolved support queries over the past two months). Ad Inserter gives you a great deal of flexibility over inserting ads into WordPress. First, it offers a variety of pre-set locations like: Before/after content Before/after X paragraph(s) Before/after random paragraph Plus lots more. For every single ad, Ad Inserter also lets you insert it manually via: Widget (including sticky widgets) Shortcode PHP function Other features of the free version include: Use up to 16 different ad blocks Google AMP support Ad rotation (server-side and client-side) In the Pro version of the plugin, you get quadruple the number of ad blocks (64), plus several helpful targeting and optimization features like: Geotargeting A/B testing Ad scheduling In terms of flexibility and power, Ad Inserter is the best plugin for both digital publishers and regular WordPress users, though more casual WordPress users might be overwhelmed by the sheer number of configuration options. The only potential downside is the limitation on the number of ad blocks. Ad Inserter Pro starts at $20. 2. Advanced Ads Advanced Ads is another plugin that, in terms of pure available features, can go toe-to-toe with Ad Inserter. Advanced Ads locks some features that are available in Ad Inserter behind the Advanced Ads Pro version. But, at the same time, Advanced Ads also offers some neat functionality that you can’t get in the free version of Ad Inserter. So, depending on your specific needs, these feature differences may push you in a specific direction. Like Ad Inserter, Advance Ads is popular, well-supported, and has high ratings at WordPress.org. In the free version, you can: Manage and display unlimited ads (in contrast to the 16 ad limit in Ad Inserter). Group ads to create ad rotations Schedule ads (again, this is only available in Ad Inserter Pro) Insert ads via shortcode, PHP function, or widget Where the free version of Advanced Ads falters in comparison to Ad Inserter is that: It locks many of the more advanced pre-set ad placements behind the Pro version – e.g. “display after random paragraph” It doesn’t support Google AMP The Pro Version and Add-ons tack on a number of other helpful features. Here are some of the highlights, though this list is by no means exhaustive: A/B testing More ad placement options Refresh ads without requiring a page reload Sticky and floating ads Deep targeting – geotargeting, user agent targeting, and lots more. Stat tracking Support for caching plugins Advanced Ads is another great option for managing ads on WordPress, especially for digital publishers who need to manage large numbers of ads. Advanced Ads Pro starts at 29 euros. Other add-ons cost extra. There’s also a Pro bundle for 69 euros. 3. AdRotate AdRotate is another freemium WordPress advertising management plugin with good reviews and a track record of developer support. Like Advanced Ads, it lets you create and manage unlimited advertisements on your site. One of the major selling points of AdRotate is that the premium version lets you create a front-end dashboard on your site to directly sell ad space. Advertisers can then manage their own ads without any input from you (beyond moderation, of course). But let’s stick to the free features to get started. In the free version, you can: Use shortcodes, PHP functions, or widgets to display ads Create one schedule per ad (ads can have unlimited schedules in the Pro version) Set max clicks/impressions per ad Keep basic internal statistics If you go with AdRotate Pro, you’ll get the ability to: Create fallback ads in case AdRotate is unable to display the original ad Set more advanced schedules Add geotargeting Create the previously discussed front-end advertising management dashboard Because of the front-end dashboard and impression/click caps, AdRotate is an especially good option for publishers who intend to engage in direct advertising sales. AdRotate Pro starts at 29 euros. 4. WP QUADS A fork of the formerly popular Quick AdSense plugin, WP QUADS is a more lightweight approach to advertising management than the previous three plugins. WP QUADS is also primarily dedicated towards Google AdSense, though it includes a generic ad option that lets you insert your own ads via HTML or JavaScript. The only downside of the free version is that it only allows you to create 10 different ads. Beyond sidebar widgets, you can assign those ads to a variety of in-content areas like: Beginning/end of post Before last paragraph After X paragraphs After certain images There’s also a nice Random Ads feature that lets you rotate ads for specific placements. Beyond inserting ads, WP QUADS also focuses on performance to ensure that it doesn’t slow down your site. It does this by optimizing database storage and avoiding any external script dependencies. All in all, WP QUADS is a good lightweight option for those who don’t need the lengthy feature lists boasted by the first three plugins. There’s also a Pro version starting at 49 euros that supports unlimited ads as well as some other added features. 5. Ads Pro Plugin Ads Pro Plugin is the best selling WordPress advertising management at Code Canyon. Like AdRotate, its key differentiating feature is that it doesn’t just help you manage your own ads – it also lets you sell ad space directly to third-parties who can then manage their own ads via a front-end interface. Beyond that, it also includes some unique ad placements not offered by the other WordPress advertising plugins like: Corner peel ads Video background ads All in all, the plugin gives you more than 20 different ad placement options. Ads Pro Plugin also includes plenty of targeting options that let you target by: Geolocation Specific devices User sessions WordPress categories/tags Other neat features include: A/B testing Dedicated integrations for bbPress and BuddyPress 3 billing models for selling ads (CPC, CPM, CPD) If you want the ability to sell ads directly to third-parties, give Ads Pro Plugin a look. Otherwise, you’re likely better off sticking with one of the other plugins. Ads Pro Plugin costs $37. Wrapping Things Up When it comes to WordPress advertising plugins, you’ve got a number of options. For high-powered publishers with big readership that need a great deal of control over ads, Ad Inserter and Advanced Ads are two good options. If you want to sell ads directly to third-parties, AdRotate and Ads Pro Plugin are two solid choices that offer front-end dashboard and ad sales. And finally, WP QUADS is a good lightweight option for those who don’t need all of the features offered by the other WordPress advertising plugins.
When it comes to WordPress SEO plugins, Yoast SEO is the first thing on most WordPress users’ minds. There’s just no arguing with the plugin’s 61 million+ downloads. But while Yoast SEO might be king, that doesn’t mean there aren’t viable Yoast SEO alternatives out there. In this post, we’re going to dig into some of those alternatives, illuminating the world of WordPress SEO plugins that goes beyond Yoast SEO. Some of them, like SEOPress and The SEO Framework, might be newcomers to your vocabulary. While others, like All in One SEO, might already be familiar to you. No matter what your existing knowledge, we hope you come away with a better understanding of your options when it comes to SEO on your WordPress website. SEOPress SEOPress, not to be confused with SEOPressor (another plugin that we’ll feature on this list), is a new freemium SEO plugin for WordPress. It’s built to be an all-in-one solution, which means it handles all of the standard configuration settings like: Titles Meta descriptions Structured data Sitemaps Open Graph, Twitter Cards, more Where SEOPress gets cool is when it veers from the standard SEO plugin features, though. SEOPress Packs in Plenty of Helpful Added Features In the free version, you can also set up Google Analytics complete with: Download tracking Custom dimensions And if you go Pro, the plugin can also help you set up Google Analytics Event Tracking to track external link clicks: Beyond that, the Pro version also lets you sync with Majestic to view backlinks right in your WordPress dashboard (if you have a Majestic API account), as well as set up SEO-friendly 301 redirects right from the SEOPress interface. It even includes a broken link checker and 404 page monitoring. These are all things you can get in separate plugins, but it’s nice that SEOPress puts them all under one roof. SEOPress is also fairly modular, so you can easily disable specific features if you don’t want them bogging down your site: Finally, if you’re running a WooCommerce store, you’ll like that SEOPress includes built-in WooCommerce functionality to noindex certain pages (like checkout) and add structured data for prices and currencies. SEOPress backs up all of these features with a gorgeously designed interface, as well as an import feature to help you migrate over existing settings from Yoast SEO. You can download the free version from WordPress.org or purchase SEOPress Pro for $39. The SEO Framework The SEO Framework is another relatively new SEO plugin that’s been slowly moving up in popularity. Developed by Sybre Waaijer, The SEO Framework focuses on being lightweight and simple…while not dropping the essential SEO features that WordPress users need. Compared to many other SEO plugins, the interface and associated meta boxes feel unobtrusive. Yet, you still have the ability to set up over one hundred settings that the plugin uses to automatically generate outputs for titles, meta information, and structured data, as well as sitemaps, social media meta tags, and plenty more: You can, of course, manually edit this information for each piece of content that you create: And the plugin includes a nifty SEO Bar to give you SEO recommendations in a manner that’s a little less “in your face” than Yoast SEO: Finally, The SEO Framework aims to be easily extensible with a dedicated Extension Manager plugin. Using the extension manager, you can turn on or off functionality for: Local business SEO Google AMP Monitoring Other smaller features If you want something that’s lightweight but still powerful enough to handle the important details, The SEO Framework is a great option. SEOPressor SEOPressor (again – not to be confused with SEOPress) is a premium SEO plugin that operates on a monthly billing model. Monthly payments aren’t especially popular in the WordPress plugin world, but SEOPressor backs up its pricing with some neat on-page analysis features that aren’t present in other plugins. A few of the unique on-page SEO features are: Keyword over-optimization check LSI Keywords Engine – suggests latent semantic indexing keywords. SemantiQ Density Analysis – tries to predict if your content is semantically related to your keyword. These features go beyond Yoast SEO’s focus keyword functionality and mesh more closely with Google’s approach to semantic search. Of course, SEOPRessor also includes more standard SEO plugin features. That is, you can: Control titles and meta descriptions Add a variety of structured data for local SEO, Dublin Core, social media, and more. Generate XML Sitemaps Other unique features include a smart linking feature that lets you automatically link keywords in your content, as well as a broken link checker, and a site-wide SEO audit: If you think you’ll make use of SEOPressor’s on-page recommendations, it may be worth it to spring for the monthly fee. All In One SEO WIth over 38 million downloads, All in One SEO isn’t exactly an unknown quantity in the SEO plugin ecosystem. It’s not surprising that All in One SEO is right on Yoast SEO’s tail – the plugins are quite similar in core functionality. While All in One SEO lacks the focus keyword and readability analyses offered by Yoast SEO, it offers competitive functionality when it comes to: Setting titles and meta descriptions XML sitemaps Social meta information And some areas where All in One SEO shines in comparison to Yoast SEO are: Google Analytics support SEO integration for WooCommerce Additionally, like SEOPress and The SEO Framework, All in One SEO is modular when it comes to features, so you can easily toggle off features that you don’t need to avoid any potential performance hit. If you’re not a fan of Yoast SEO’s sometimes shallow analysis functionality, All in One SEO is a good alternative. You Have Options When It Comes to WordPress SEO While there’s certainly nothing wrong with Yoast SEO, you should never forget that there are plenty of viable Yoast SEO alternatives with their own unique twists to offer. SEOPress offers neat features like WooCommerce integration, advanced Google Analytics options, backlinks, and more. The SEO Framework offers a lightweight SEO interface with a new way to analyze your content. SEOPressor has tons of advanced analysis options, especially when it comes to on-page SEO. And All in One SEO offers a solid, modular approach to SEO, but without the analysis. Many of these plugins also include import/export tools to help you move between different SEO plugins – so even if you started out on Yoast SEO, you still have an option to move to one of these alternatives if it piques your interest.
Have you noticed how frustrating it can be to browse some websites nowadays? It seems like every day sites get more and more aggressive with opt-ins, overlays, and more. Enter, Holler Box… In a world of lightbox popups and full-screen overlays, Holler Box is a popup plugin that’s a breath of fresh air. Holler Box lets you promote offers, mailing lists, and more without annoying your visitors like some more aggressive methods. It’s lightweight, easy to configure, and rings up at the attractive price of free (though there is a Pro version with added functionality). Holler Box Review: What All Does It Do? Holler Box lets you create “messages” that display in any corner of your site. I say “messages” because Holler Box is pretty flexible with regards to what that means. You can essentially embed any content that fits in the WordPress Editor. That means not only your own custom text, but also any shortcodes, images, videos, and more. Then, you can also tack on email opt-in forms and/or faux live chat functionality. Put it all together and Holler Box can look like this: Or like this: Or even like this: And once you have your message configured, you can add targeting options like: Only display on certain pages Display by user logged in status Display by new / returning visitors How often to display for each visitor Here’s how it works… Setting Up Your First Holler Box When you install Holler Box, there’s not much to configure. You can add your API keys for MailChimp or ConvertKit, but that’s the only important general configuration option. Otherwise, you’re ready to jump straight into creating a new Holler Box. As soon as you click the Add New button, you’ll see the standard WordPress Editor. This is what makes Holler Box so flexible: You can put pretty much anything in here. Text, images, forms generated by shortcodes…everything I’ve tried has worked. The only thing you need to watch out for is sizing. Holler Box will automatically scale down images so they don’t distort the box’s sizing. But you do need to be careful with shortcodes. Make sure you’re using something that works in small spaces. Below the WordPress Editor, you can do a few different things in the Display options: First up, you can choose your box’s position, as well as change up its colors. Then, you also get two helpful options at the bottom: Show email opt-in – lets you show a generic opt-in, a custom HTML form code, or sync up to Convertkit or MailChimp directly. Show chat – shows a faux live chat interface that lets visitors leave a message, as well as an email for further communication. Setting Up Targeting Options Below the Display options, you’ll find the Advanced tab. Here’s where you can set up tons of helpful targeting options for your Holler Box: Overall, you have a great deal of flexibility over how and when your boxes display. Most of the targeting options are self-explanatory. But one setting that I think deserves special mention is the Hide the floating button? option at the bottom. By default, visitors will still see a floating button even after closing the message box: But if you check this box, your Holler Box will completely disappear when a user closes the box. How Does It Look on Mobile? Given the growth of mobile traffic, it’s important that Holler Box looks just as good on mobile as it does desktop. To achieve that, Holler Box ditches the floating message and goes with a partial screen banner anchored at the bottom of the viewport. It’s a slick-looking implementation that’s small enough to avoid the Google mobile popup penalty: Statistics to See How Your Holler Boxes Are Doing Finally, Holler Box includes some basic statistics on the All Boxes screen. This data is helpful to get a quick overview of how your boxes are doing, but don’t expect detailed page-level analytics or anything: Holler Box Pro: Even More Features There’s also a recently released Pro version that adds more features like: Holler Banner – a smart header banner with all the same targeting options. Expanded Option – show longer messages with an Expand button. Great for survey forms, among other uses. Time Limits – automatically deactivate a box on a certain date. More Filters – filter by category, tag, post types, and more. Sales Notifications – show recent sales from EDD or WooCommerce. Final Thoughts on Holler Box Holler Box isn’t a mega-complicated full-service solution like Thrive Leads or Sumo. Nor is it trying to be. If you need to aggressively promote offers with scrolling welcome mats and popup lightboxes, Holler Box probably isn’t for you. But if you want a lightweight and flexible tool to push offers, showcase custom content, or grow your list without annoying your visitors, I think Holler Box is a great solution. It’s lightweight, looks great, and only takes a couple minutes to set up. Can’t go wrong with that! Get Holler Box at WordPress.org Get Holler Box Pro
On June 8th, WordPress 4.8 shipped to a resounding chorus of “Oh, that’s kind of cool.” But while that tongue-in-cheek introduction doesn’t quite scream excitement, WordPress 4.8 did ship with some helpful widget additions, as well as a variety of under-the-hood improvements to remove deprecated code, add new functionality, and pave the road towards the Gutenberg Editor. In this post, we’ll take a look at some of the biggest frontend and backend additions from WordPress 4.8, “Evans”. Visual Editor for Text Widgets One of the major changes in WordPress 4.8 was the inclusion of everyone’s favorite TinyMCE Editor in the WordPress text widget. Previously, the only way to add advanced formatting to WordPress text widgets was to utilize custom HTML. And while that approach was fine for developers, the lack of a visual editor left less technically savvy WordPress users out in the cold. In WordPress 4.8, text widgets now look like this: It’s not the full TinyMCE Editor from the WordPress Editor interface, but it does include common formatting like: Bold Italics Unordered lists Ordered lists Links And you can also switch back and forth between Text and Visual tabs as needed. Some Growing Pains With the New Visual Text Widget While most are happy with the concept of the new visual text widget, the implementation hasn’t been without a few hiccups. One of my major questions before the release of WordPress 4.8 was, “what happens to the HTML formatting in existing widgets?” It appears that most HTML formatting comes through just fine. But there are issues with the new visual text widget stripping out empty elements, as well as improperly adding paragraph tags to code that contains extra line breaks. You can view a longer list of known code-stripping issues at the Trac ticket page. Additionally, the TinyMCE text editor doesn’t seem to respect the “Disable the visual editor when writing” user profile setting. You can see an example of the code-stripping below: Rather than trying to fix all of these issues, the current chosen solution seems to be the introduction of a new HTML widget to replace the pre-WordPress 4.8 text widget. So what should you do if WordPress 4.8 is breaking your existing text widgets? Assuming you’ve already updated to 4.8, you can either wait for the new HTML widget or utilize Christina Arasmo Beymer’s workaround solution. Some other developers, like @gitlost, have also created plugin replacements for the old text widget. New Media Widgets for Photos, Videos, and Audio Beyond changes to the text widget, WordPress 4.8 also came with three brand new widgets to help users easily insert a variety of media content into any widgetized area. And because these are brand new, there’s no danger of them breaking any existing functionality. While these widgets are by no means groundbreaking, they do make it easier to quickly insert media directly from the media library, especially for WordPress users who prefer to eschew HTML or shortcodes in their widgets. All the new widgets function generally the same. You drag them over like normal widgets, then insert media via the normal WordPress Media Library or a URL: The addition of these media widgets necessitated some underlying code changes, as well, which I’ll get to in the next section. Other Minor Frontend Additions Beyond new and revised widgets, WordPress 4.8 also added two other minor frontend features: A new dashboard widget that displays local WordPress events. Its goal is to grow the WordPress community’s offline presence. Better link boundaries in the WordPress Editor. These make it easier to select the specific portion of text you want to include in your anchor links. Under the Hood Additions – Improvements + Road to Gutenberg? Most of the impact of WordPress 4.8 will be felt in backend enhancements to improve the WordPress core as well as pave the path towards the introduction of the Gutenberg Editor. While there were a total of 109 different enhancements, the following are some of the larger changes. No More WMV and WMA Embedding Partially as a result of the new video and audio widgets (and changes to MediaElement.js), WordPress 4.8 removed the ability to automatically embed WMV and WMA files. Now, instead of a player, WordPress will just display a download link for those two file types. Multisite Features: 2 New Capabilities and 4 New Hooks The two new capabilities deal with removing calls to is_super_admin(). While they shouldn’t affect any existing plugins, developers are encouraged to use the new upgrade_network and setup_network meta capabilities instead. Beyond those capabilities, there’s also a new deleted_blog hook that, unsurprisingly, fires after a network site gets deleted, as well as three other new hooks. If you’re looking for more info on multisite, see this guide. A New Text Editor JavaScript API Ever wished you could easily instantiate the TinyMCE Editor after page load? Now you can, thanks to the addition of a new JavaScript API. You can read more about how to take advantage of this feature on its Trac page. A New Media Widgets API In addition to the new text editor API, WordPress 4.8 also brought a new media widgets API to power the new media widgets, as well as pave the road for more advanced media widgets like galleries or playlists. As part of this update, there’s a new base class that handles most interactions with the media library modal. You can find full documentation and explanations for how everything works at this Core post. The Customizer Sidebar’s Width Is Now Variable Prior to WordPress 4.8, the WordPress Customizer’s sidebar was always the same width…no matter what a user’s screen resolution was. WordPress 4.8 changes that. While it’s still not user-resizable (though there is a plugin for that), the sidebar now varies between 300-600 px depending on a user’s screen width. As a consequence, developers should opt for percentage or flexbox approaches rather than static pixel widths. Is Gutenberg Coming in the Next Major WordPress Release? No. At least as things stand now, we’re unlikely to see Gutenberg in the next major release. Matt Mullenweg recently published a post in which he says that there will first be a WordPress 4.9 dedicated to “the theme of editing code and managing plugins and themes.” But while we’re not going to get Gutenberg in the core, Matt did outline a plan to continue with Gutenberg as a plugin to give it some “extra gestation time.” So you’ll likely still have a chance to use Gutenberg on production sites before WordPress 5.0. In the meantime, you can play around with the existing Gutenberg beta plugin on a test site. And that’s about it for WordPress 4.8! While there wasn’t anything worth getting too excited over, the new media widgets are a welcome addition. And while the visual text Editor will be a nice addition going forward, the bugs associated with it are also a reminder why it pays to have a managed WordPress host like Pagely that waits before updating sites for major releases.
