9seeds

Building Custom WordPress Solutions | Plugin Development

 

News

email

A new and improved support experience

Posted on

Forums used to be a big deal

Long ago most themes were supported via forums. Theme frameworks like StudioPress and Thesis used to have extremely active forums of which we were a part. Like so many of our freelance and agency customers we learned a lot from those forum communities, and running our forums has always been part of how we’ve given back to that very same community of learning and sharing that permeates the broader WordPress Community.  

The way people request and digest information online is different these days, and it is much more transactional than lesson-based. In short, folks just want answers to their questions, not lessons. 

As a result of the shift in the way information is being consumed, we will be discontinuing forum-based support and shifting resources to provide the best possible experience for email-only support.

Self-service documentation  

As we’ve evaluated our end-to-end support experience, we’ve found opportunities to make or self-service theme and plugin documentation a bit better as well. As a result, we’ll be focusing on updating documentation to better address the theme setup process and make your life easier in the process. 

We’re also taking this opportunity to move self-service support documentation to a more modern system which will make getting answers to your questions faster and easier. And of course, if you’re not able to find the information you’re looking for, the ‘create support ticket’ button will be nearby to get in touch via email!

Forum sunset plan

The forum content will stick around for the foreseeable future as the information contained in the forums is still an amazing resource to those that want to mine them. They will be branded “community support forums” going forward which means that we will continue to monitor them to make sure the lights stay on, but they’ll no longer be our “official support channel”. Oh, and one last note on privacy — forum posts will forever retain the same privacy restrictions they have now. The public can see that the forums exist and read the post titles, but the body content of forum posts will only be available to logged in users. We don’t want your old forum posts about a client’s website indexed by search engines any more than you do!

As always, please get in touch if you have questions!

Lazy Loading Goes Native in Chrome

Posted on

Good web developers build great experiences for users. Incredible web developers build super quick, elegant experiences for users. Speed is extremely important in modern web development because a growing number of consumers use mobile phones to access the internet – that’s why a while ago Google announced mobile-first indexing of web pages (basing your search position partially on how performant your website is on a mobile phone).

Pro Tip: While creating a mobile-friendly website is an important principle of modern web design, it’s important to note that the mobile version of the site must be performant. We’ve seen many cases where sites lose search rank because mobile-first indexing reveals how poorly a site performs on a mobile device. Don’t assume that because desktop page load time is fast, that the mobile version of your website is fast too. 

While there have been a lot of improvements in browser standards over the years, a feature called “lazy loading” has always been a performance hack baked into site-side code that utilizes one of the many lazy load compatible CDNs, caching plugins, or libraries. Unfortunately, these solutions often require a paid subscription or JavaScript payload to be transferred client-side as a prerequisite for the performance enhancements that come with lazy loading images. Sounds complicated because it is. That is, until now (if you’re using Chrome). Starting with Chrome v76, the browser gets a new superpower – native lazy loading.

While the Chrome dev blog has a simple article on how to implement lazy loading, here are the top 3 things you should consider before getting started.

It’s only good for images for now

While Chrome developers have eluded to the fact that they might be adding other elements to  lazy load browser capabilities in the future, for right now the feature only works on images (image tags). That means that if you want to lazy load videos, CSS, or other types of content, you’ll need to use a traditional lazy load library.

You’ll still need a fallback for unsupported browsers

While native lazy loading is now supported by Google Chrome, there are plenty of other browsers that don’t yet support this standard. In-fact, the market share for Chrome worldwide is only 63.99%. That means that a little less than half of your users will experience diminished performance unless you opt to implement a lazy load library or plugin.

Effectiveness of implementation has had mixed reviews

In web development, installing a library or plugin is rarely the entirety of what needs to be done to implement a new feature. In the case of implementing native lazy loading in WordPress, there are a couple factors to consider including how your images are loaded (are they loaded with CSS as backgrounds to layers or as images within image tags) and conflicting plugins (a plugin that isn’t aware of Chrome’s new superpowers might continue to load libraries in order to lazy load the old way).

Overall it’s awesome to see lazy loading capabilities becoming standard within browsers (especially browsers sponsored by the same companies that use performance as a ranking criteria). In the future, we look forward to other browsers adopting the lazy load standard along with the inclusion of new elements.

How to troubleshoot a WordPress site using Plugin Detective

Posted on

When a feature stops working on your WordPress website, minor panic can set in. If yours is one of the approximately 40% (as of this article’s publish date) of websites that’s running WordPress 5.2 or above, you’ve probably received an email entitled, “Your Site is Experiencing a Technical Issue”, and you’re off to quickly fix the problem. But, what if you’re managing a website below version 5.2 or didn’t receive the snazzy new error email? A difficult-to-troubleshoot error can ruin an entire afternoon of productivity (and sales) attempting to find the issue and fix the site. 

Here’s how to troubleshoot a WordPress website prior to WordPress 5.2 (spoiler: not too efficient)

  1. Disable all of the plugins on your website.
  2. Open a second tab with the front-end of your website and ready the reload button.
  3. Reenable plugins one by one as you refresh the front-end of your website.
  4. Find the plugin responsible for the issues, and fix accordingly.

For a long time, this has been the common advice on how to troubleshoot a WordPress site prior to WP 5.2. While not technically wrong, this process can be time consuming and arduous at a moment when speed and accuracy matter. In 2018 at WordCamp Orange County, WordPress pros Natalie MacLees and Nathan Tyler presented a new spin on an old method of troubleshooting WordPress websites.

How to troubleshoot a WordPress site the efficient way

Natalie and Nathan dug deep into their classic programming knowledge and created a plugin that automates the plugin enable/disable process using a binary search. The plugin is called Plugin Detective and it finds broken plugins in a fraction of the time that it’d take the traditional method. Here’s how it works:

  1. Plugin detective disables half of the plugins.
  2. If the problem persists, the plugin re-enables the first half, and disables the second half.
  3. If the problem is fixed, the plugin begins the same process on the new half, and continues until the offending plugin is determined.

Because the plugin uses a binary search, with every iteration, half of the plugins are ruled out. On a site with dozens of active plugins, this method saves a lot of time.

Putting Plugin Detective to the test

In theory Plugin Detective is a great idea, but I wanted to test out how it works on a real site. I installed a test site with sixteen active plugins, and intentionally put a typo in one of the plugin files to render the site inoperable.

The Plugin Detective (named Otto) started by asking if there were any required plugins that needed to be left on for the site to load. After all, there’s no sense disabling a key plugin and causing a different issue. I told Otto I didn’t have any required plugins on my site, and he started by disabling everything and asking me if the issue was fixed. (If the error was still happening, that meant that the cause of the error was probably something else, like mu-plugins or the theme.) Since my issue was fixed, Otto knew that one of the plugins was to blame.

The plugin ran through the list, activating or deactivating half of the list each time and asking me after each pass if the issue was resolved. Overall, it took seven passes for the Plugin Detective to determine which plugin was broken, and took less than a minute of elapsed time. Otto was also able to deactivate the offending plugin for me, so I didn’t have to mess around with (S)FTP or the database to manually disable it.

How to troubleshoot without access to wp-admin

The plugin worked really well, but I started to think, “what are the chances that the site I’m trying to troubleshoot has this plugin installed?” or, “what happens if I can’t get into the backend at all because of a white screen?”. Well, Natalie and Nathan must have had those same thoughts when they created Plugin Detective. If the plugin isn’t already installed on the broken site, it’s straightforward to get Plugin Detective up and running:

  1. Manually copy the unzipped plugin folder over to /wp-content/plugins
  2. Go to YOURSITE.COM/wp-content/plugins/plugin-detective/troubleshoot (which will load even if the site won’t load)
  3. Log in with a valid WordPress administrator account
  4. Say hi to Detective Otto!

Final thoughts on Plugin Detective

The ability to quickly and easily track down a plugin conflict on a white-screening site is impressive, and overall the Plugin Detective is an amazing plugin. Natalie and Nathan have really re-written the guide on how to troubleshoot a WordPress site using Plugin Detective, and we’ve quickly added the plugin to our troubleshooting toolkit for sites on older WordPress versions.

CoBlocks, the Gutenberg page builder

Posted on

We continue our Gutenberg block plugin review series with a dive into the features and benefits of CoBlocks. While most block plugins are billing themselves as first and foremost, block plugins, with a touch of page building capabilities, CoBlocks has gone all in as a self-proclaimed Gutenberg page builder. We spent some time playing with some of the latest CoBlocks features, and we’ll explore some of what we found in this article.

CoBlocks has powerful page building capabilities

The row is the one basic layout mechanism included with the CoBlocks system, and it’s powerful. Unlike some of the popular purpose-built page builders, the row block allows multiple levels of nesting; it’s also easy to adjust width, margin, padding, and colors of the [nested] rows. The block interface is super intuitive, and width adjustments can be made using drag-and-drop features that make this block feel very much like a visual builder. 

While CoBlocks is off to an excellent start as an in-editor page builder, there’s more work to be done to reach the level of capability of purpose-built builders which allow for conditional display and full-page layouts. Probably more a limitation of Gutenberg, the blocks interface gets a bit clunky attempting to drag elements from within the row block to other rows or new elements.

There are plenty of cool specialty blocks

From social blocks to restaurant / services menus, CoBlocks has created some pretty awesome blocks built with the same intuitive interface used within the row block. Our favorite specialty block is the Pricing Table which facilitates quick creation of simple, responsive pricing tables well suited for a services company. These specialty blocks compliment mobile responsive Genesis themes and help the creation of advanced layout objects that appear to have been built mobile-first. The masonry gallery is also particularly awesome providing a nice visual refresh of the old gallery system within WordPress.

Why should I trust this plugin?

It seems these days that the good Gutenberg block plugins are all being acquired by larger companies. In this case, acquisition seems to be wearing well on the CoBlocks plugin as it has maintained it’s stellar rating in the WordPress repository, and has the backing of one of the largest WordPress hosting companies in the world, GoDaddy. 

Atomic Blocks, the building blocks of an awesome Genesis site

Posted on

Back when server-side includes were a thing, and custom PHP websites ran rampant, building a functional website took a ton of time and in some cases, a team of developers. If you visited one of the handfuls of beautifully designed sites on the web at that time, they were likely built by brands that had coffers deeper than the lifetime revenue of most small businesses. These days, the right Genesis theme combined with a powerful Gutenberg block builder like Atomic Blocks changes the graphical game for independent builders and small businesses alike.

Over the next few months, we’re taking a deep dive into ways you can create elegant experiences for site visitors through the use of new and powerful block builders.

What is Atomic Blocks good at?

Atomic Blocks began its block-making journey with straightforward blocks that helped to shortcut common layout changes. From testimonials to author profiles and accordions to share icons, the plugin started as a way to help site builders create faster. Today, Atomic Blocks is pushing further into the visual site building space by introducing section and layout blocks that help creators build immersive full-page layouts similar to what you might be able to make with other purpose-made site builders. These layouts (new in the 2.0 release) are a super power we are excited to add to future 9seeds themes.

atomic blocks homepage

How does Atomic Blocks work?

Any Gutenberg-based block builder requires users to have a Gutenberg friendly theme. Genesis is Gutenberg ready, and some specialized themes make working with block layouts particularly easy. Before you begin building, check in with your theme developer to make sure they offer full support for both Gutenberg and Atomic Blocks. Then, just like any other plugin, simply install the Atomic Blocks plugin to enable the extended functionality it provides.

Next, head over to create a page and create your first visual layout using Atomic Blocks.

atomic blocks in Gutenberg

As you start building, make sure to check your work on the front-end to make sure that your theme is properly handling layout components.

Why should I trust this plugin?

The team behind Atomic blocks joined WP Engine shortly after WP Engine acquired StudioPress. That means that today, Atomic and StudioPress work side by side inside WP Engine.  Combined they’re both fueled by one of the most experienced and biggest WordPress companies in the industry. Acquisition aside, the repository page for Atomic Blocks shows 20k+ installations, active development, and an incredibly high 4.5 star rating. Overall, this is a solid plugin with the promise of continued development into the foreseeable future. That’s a win win.