Unfortunately, over time most WordPress sites will grow slower and slower as they accumulate bloat. Plugins, images, custom code—everything starts to eat up resources. If you are also one of those people who neglect basic site maintenance, soon it will feel like someone poured sand into the gears of your server.

I say enough with that! Time to reverse the trend.

In this guide, we will discuss 14 different ways to speed up a WordPress site that has grown sluggish. The techniques here range from basic to advanced. So don’t worry if something appears beyond your level of skill. Choose whatever you feel comfortable with and take it from there. After all, performing at least some of these tasks will be better than doing nothing at all.

Why Should You Learn to Speed Up WordPress?

You might be asking why you should care about page loading time in the first place. After all, can’t your visitors just wait for a bit longer? I mean, your site loads within a few seconds, shouldn’t that be enough? They are not that pressed for time, are they?

Well, to answer your question, yes, they are actually. 

As it turns out, the speed of your website is super important! Just one extra second of page load time can significantly lower your conversions, page views, and customer satisfaction. According to HubSpot, a one second delay can reduce conversions by 4.42% per second of slow-down. 

That’s right, a single second! Who would have thought?

Since loading speed matters to your visitors, it is no surprise that search engines have jumped on the bandwagon. Site speed is by now a serious factor in determining where you land in the SERPs. Google has considered it as a ranking signal since 2010.

That is especially true in times where the Internet usage of mobile devices has overtaken that of desktop computers.

With mobile data connections being comparatively slow, having a site that loads fast is paramount! Couple that with the fact that Google now ranks your site based on its mobile version and you have even more reason to worry about your site speed.

Factors That Determine Page Load Time

So, what is it exactly that determines the interval between a visitor typing in your URL and seeing your breathtakingly excellent content? Knowing this is key in order to decide how to speed up your WordPress website. Let’s review a few key factors now.

1. Server and Hosting Technology

The foundation for how quickly your site will appear on your visitors’ screens is the server it lies on, where that server is located, and your type of hosting plan.

There are different types of hosting environments that affect this. For example, on a shared server, your website resides on the same computer as a number of other sites and you all have to make do with the same limited amount of resources.

That means if one site is hogging 80 percent of the available RAM, processing power, and web traffic, all other sites have to share the remaining 20 percent. This naturally leads to speed bottlenecks.

On a virtual private server, your site will also have neighbors, however, usually fewer than on a shared server. In addition to that, each website gets their own dedicated portion of resources, which they can not exceed.

A dedicated server, finally, is one that is entirely yours. It houses only your website and there is no computing power to share. The single child’s dream.

Apart from the type of hosting environment, another factor for website speed is the technology the server uses. That means whether it runs the latest versions of HTML, PHP, and other basic technology that websites require to function.

Lastly, server location also matters. If your site is on a computer in the US, a visitor from the Philippines will have a different loading experience than one from a neighboring state – and vice versa.

2. Your Content Management System

The makeup of your website also matters for site speed, for example, whether you use a content management system like WordPress. Back in the day websites consisted of plain HTML because that is the language that browsers understand. To this day, static HTML sites will often load faster than those built with a CMS.

That is because when a browser requests a website based on WordPress, the browser essentially calls data from a PHP application that needs to access a MySQL database to generate the HTML code the browser can read.

It’s a bit of a roundabout and naturally somewhat slower way than working with HTML directly, as accessing the database and creating the code takes time.

3. Themes, Plugins, Templates, and Other Add-Ons

Besides the CMS itself, everything that extends your website can also further slow it down. Anything you put on top, like scripts and other files, is additional code that needs to load, taking up additional time.

This factor can be exacerbated by bad coding practices. When using extension from inexperienced developers, you might unknowingly add some really bad code to your site that slows it to a crawl.

4. User Device

The final piece that determines how quickly a user gets to see your site is their own device. With modern web technologies tapping into client side computing, what someone uses to view your site plays a large role in how fast it will load.

Anyone who has ever tried to open 10+ browser tabs in Chrome on a computer with low RAM can attest that it can be a real challenge to your patience.

Unless you are in the habit of giving away free iPads (like the people who keep sending emails to my spam folder), there’s nothing you can do to influence this part. However, what you can do is try to build a site that meets the requirements to run as smoothly as possible even on slower machines.

That’s what we will get to now.

How To Speed Up WordPress: The Very Basics

In our quest to shorten the time it takes for site visitors to see our awesome content, we will start off with building a solid foundation for fast surfing. After all, if your house is sinking into the ground, it doesn’t make much sense to clean the windows first. 

1. Speed Test Your Website to Have a Benchmark

Before going over how to speed up your WordPress site, the first step is to figure out if it’s even necessary and to know where you stand. Only if you know how fast your website currently is can you see if your changes have any effect.

We actually have an article on how to speed test your website that lays out the process in detail. It will tell you how to properly use speed testing tools like Google’s PageSpeed Insights, Pingdom, or GTmetrix so that you get meaningful results and also how to use them.

The speed testing tools will already give you some advice on how to further improve your website’s page loading time. Most likely, a lot of it will be along similar lines as to what you will find here.

2. Choose a Good Host

One of the most significant steps you can take to speed up your WordPress site is signing up with a quality host. While there are a lot of cheap offers out there, hosting is one of those things where you mostly get what you pay for. Therefore the investment into quality is well worth it.

First and foremost that means you should avoid shared hosting. You never know what kind of sites you will have to share a hard drive with and it’s not worth the trouble.

Also, unless you know what you are doing or can hire someone who does, a dedicated server might be a bit overkill, especially for small to medium-sized sites.

Consequently, opting for a VPS is usually your best bet. It’s a nice middle ground between speed, comfort, and cost.

Another option is to go with managed hosting. That means opting for a host specialized in WordPress websites. Servers from vendors like WP Engine have been optimized to provide a good home for WordPress-based websites, including making sure they load as fast as possible.

3. Keep Your Core Technology Up to Date

As we have learned, the basic technology and software installed on your server is another main driver of page load time. Do you know if yours is running the latest version of PHP? If not, it’s worth finding out. Simply updating from an older to the latest version can more than double WordPress’ processing speed.

A quality host will take care of this by themselves and let you know when they are making updates to their architecture. However, that doesn’t mean you shouldn’t talk to them on your own accord.

Quick caveat: If you have really old code on your site, updating your core technology to the latest version might mess it up, so make sure you can reverse the changes if needed.

4. Keep Up With the WordPress Update Cycle

It goes without saying that you should always keep your website updated. That doesn’t only mean running the latest version of WordPress but also downloading and installing updates for your themes and plugins.

Newer versions of WordPress come with improvements to speed it up and security fixes. The team behind the platform is working diligently to constantly improve the code base. While speed itself is not always the main concern for this practice. keeping up with the update cycle will also address potential vulnerabilities and keep malicious software out. That stuff can really slow you down.

Therefore make sure you always update to the latest version as soon as it’s available. You can easily do so by going to the Dashboard > Updates page. If there’s a new version available, you’ll see a notice.

Just click the Update Now button, and WordPress will take care of the rest. However, before updating anything, always create a backup first.

In the same place, you can also update your themes and plugins. The options for that are just a bit further toward the bottom of the screen.

Alternatively, you can update them directly from the Themes or Plugins pages.

If you want more control over when and how updates are installed, you can use a plugin like Easy Updates Manager. This plugin gives you tons of options for configuring automatic updates.

For example, you can enable/disable all updates, or only allow certain types of updates (such as security fixes). You can also specify which themes and plugins should update automatically. Similar things are possible with WordPress’ native auto-update functionality.

5. Work With a Proper Theme or Framework

There are some themes out there that have “all the features.” What I mean by that is that they offer options to change every little thing about your website down to the color of the second footer widget’s drop shadow.

While this is nice for inexperienced users who don’t know how to make these adjustments in the style sheet, it involves a lot of code. Code that has to load every time someone looks at your site. And, as you can imagine, that can bog things down considerably. 

For that reason, working with a lightweight and lean theme or framework is key for keeping your website up to speed. There are a lot of quality vendors for that out there, such as StudioPress.

6. Perform Regular Database Maintenance

Just like WordPress will get weighed down by plugins, themes, and other extensions over time, the WordPress database is also prone to accumulate bloat if left on its own. The main culprits here are overhead and unused or unnecessary data.

Overhead is temporary disk space that will increase over time if it isn’t cleared out. Unused data are leftover tables from plugins that are no longer present, post revisions, and other dead weight.

An excellent tool to address this is the WP-Optimize plugin. With just a few clicks, it can take care of the issues mentioned above. Doing this on a regular basis can greatly help speed up your WordPress site.

For more on the topic, I have also written an article about database maintenance right here on Torque.

7. Monitor Your Site

The key to taking action when your site is getting too slow is having the awareness that it’s happening. It’s hard to change what you are completely oblivious to.

However, not everyone can spend their day constantly refreshing their own websites with a stopwatch in hand. Therefore, a better idea is to set up a service that monitors your site and automatically sends reports when it is losing momentum. The aforementioned GTmetrix and Pingdom can both do this, however, only GTmetrix does it for free, at least for one website.

Optimize Your Front End to Reduce Page Load Time

Alright, now that we have the basics covered and taken care of the background architecture, your site should already be well on its way to running like a well-oiled machine.

However, this was only the first step. Now it’s time we concentrate on those parts your visitors can actually see. You can do a lot in the front end of your website to speed up WordPress as well. 

8. Lower the Number of Server Requests

A server request happens any time your visitors’ browsers ask something from your server. This can be a style sheet, image, or Javascript file. The more server requests your site makes, the longer it takes for it to render. Consequently, you should keep requests to a minimum.

In practical terms that means:

• Reduce images and other elements.
• Lower the number of posts per page.
• Uninstall unnecessary plugins, especially the slowest ones.
• Deactivate plugins that you are not using permanently.
• Enable lazy loading to only load images that your visitors actually see (e.g. with plugins like a3 Lazy Load or Smush)

To find out where you could save on server requests, input your URL some of the speed testing tools mentioned above. They can give you a breakdown of requests and how long they take to compute.

9. Enable Caching With a WordPress Plugin

Remember how we talked about the fact that WordPress generates an HTML version of your site every time someone requests to see it?

Well, instead of running through this process every single instance that happens, it is also possible to save a finished HTML copy of your site beforehand, which your visitors can download immediately.

This process is called caching and there are a number of plugins available for WordPress which can add this to your site. The most well-known of them are WP Super Cache and W3 Total Cache.

Another (and potentially faster) solution is server caching. However, you will have to talk to your host to implement it. Apart from that, some managed hosting providers like WP Engine also provide their own caching solutions out of the box.

10. Use a Content Delivery Network

Using a CDN basically means having copies of your site distributed across several servers in various locations. That way, every time someone wants to see it, they will receive the data from the location closest to them.

For example, if your site is hosted in the US and someone from Romania would like to browse it, they would download the files from a server hosted in Germany or some other European country instead of going through the cables buried under the Atlantic. Makes sense, doesn’t it?

However, even if you decide not to put your entire site into a CDN, you could also merely have them host those parts with long loading times, such as images. One solution for this is Photon, contained in Jetpack. Offloading just parts of your WordPress site can greatly help speed it up for your visitors.

11. Optimize Your Images and Media Delivery

If you opt to keep images on your own site, you might as well make sure they download as quickly as possible. How? By optimizing them.

For one, image compression can reduce file size without loss of quality, meaning the image won’t look any different to the human eye while taking up less data. A WordPress plugin that does this automatically is the aforementioned Smush. It can both reduce file size for existing media and anything that is uploaded to your site.

Another option is to optimize your images before uploading them. A popular website to do is TinyPNG/JPG. Other, downloadable options are ImageOptim (Mac) and RIOT (PC).

Part of that is also to use images only as large as you need. WordPress creates several versions of every image you upload to your site and you can control their sizes under Settings > Media.

This way you don’t have to use the full-screen, high-def 5MB photo for a thumbnail but can go with the necessary size. In addition, since version 4.4, WordPress comes with markup to automatically server smaller image sizes to devices with smaller screens.

Finally, if you use a lot of other media, such as videos or audio files, avoid uploading and delivering them from your own server. Not only do they take up a lot of space, which makes backing up your site difficult, they also put a heavy strain on your server resources.

So, what to do instead?

Upload them to third-party services such as YouTube or SoundCloud and then embed them in your content. Streaming platforms are optimized to deliver content much faster than your own server ever could, so save yourself the bandwidth. Especially since WordPress has such a wide support for automatic embeds.

Advanced Techniques to Speed Up WordPress

So far everything was quite doable, wasn’t it? Even if you are not a developer, you should usually find a way to put the above into action.

What follows are three more ideas to decrease page load time which might require more advanced knowledge. However, if you feel up for it, don’t hesitate to give it a try. The results will likely speak for themselves.

12. Concatentate Your Javascript and CSS

Yep, that is a complicated word. However, all it means is turning several JavaScript files or CSS style sheets into one big file.

Why is that a good idea?

Because it’s usually faster for a browser to download one large file than several smaller ones. Think back to server requests we discussed earlier. Same idea.

There is a WordPress plugin called Merge + Minify + Refresh, which can perform this for your site. Autoptimize is another great solution that I use on a lot of sites. For developers, there is a great tool to perform this task called Gulp.

In addition, WPTavern wrote an article on concatenation, where you can learn more, and there is another excellent article on the topic on CSS Tricks.

13. Minify Your Files

Once you have reduced your number of files to a minimum, it is time to make sure those files are as small as possible. This process is called minification.

Minifying a file essentially means stripping it of all the unnecessary spacing and commenting that make it easier to read by human eyes but only adds bloat from the perspective of machines.

Gulp, which we mentioned above, is one tool that can do this. Grunt is another example. For non-developers, the W3 Total Cache plugin can perform minification automatically, too, and the aforementioned Autoptimize can do it as well.

14. Enable Gzip Compression

As a regular computer user, you are almost certainly familiar with zip files. These are files that have been compressed so they take up less space on the hard disk.

What you might not be aware of is that you can do the same with your website. After all, a website is nothing but a collection of files. When compressed, they shrink in size and are therefore quicker to download.

The good news is that the more repetitive the data you are dealing with is, the better it can be compressed. And style sheets and HTML are nothing if not repetitive.

You need to set up Gzip compression on the server side by adding the following code to your root .htaccess file:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

If you are just going to do one thing to speed up your WordPress site, this is one of the most effective. For more information, we have an entire article on Gzip compression with more details.

Final Thoughts: Speeding Up WordPress

Speed is an important factor in running a website. It’s a key determinant for bounce rate, conversions, customer satisfaction, and search rankings. Even as much as one second can make a huge difference. Making sure your site loads as quickly as possible should therefore be a high priority.

Implementing even some of the above techniques can shave a nice chunk off of your loading time. Remember, you don’t have to do every little thing. Concentrate on what’s possible within your means and knowledge.

At the same time, it is also important to remember that speed isn’t everything. You should never remove important or necessary site elements just to get it to load faster. Every step you take on your site should have the end goal in mind to serve your visitors better. Page load speed is just one factor among many.

How do you make sure your site loads as quickly as possible? Anything to add? Please tell us in the comments below.

The post 14 Ways to Speed Up WordPress and Decrease Page Load Time Copy appeared first on Torque.

Fortunately, there are a few techniques you can implement to significantly improve your product pages. Since they’re a primary driving force behind most customers’ purchasing decisions, it’s wise to do all you can to enhance their effectiveness.

In this post, we’ll discuss why product pages are so important to the success of your WooCommerce site. Then we’ll share four strategies you can use to improve yours. Let’s get right to it!

The Importance of Product Pages for Your E-Commerce Store

Whether you’re new to e-commerce, or have been selling products online for a while and want to increase sales, you’ve probably come across plenty of advice for optimizing your WooCommerce site. However, most of it is likely general guidance for improving performance or driving traffic your way.

While those tips can be highly effective, loading pages quickly and getting visitors to your site won’t necessarily bring the conversion rate you want if your product pages are still lacking. At the end of the day, that is where sales actually take place.

Around 85 percent of customers conduct research online before deciding which brand to purchase a product from. This means that it’s highly important to publish detailed and clear information about your merchandise on your website, so shoppers can learn everything they want to know about each item.

Product pages are a prime source of information about the different products customers may want to buy. However, in order for them to become quality resources, you’ll need to provide the details that are important to shoppers and will help seal the deal.

4 Ways to Create Better WooCommerce Product Pages

There are a variety of ways to make your WooCommerce product pages more effective. The strategies that work best for you will depend on what you sell and your existing WordPress workflow. However, these four tips are a solid starting point to jump off from.

1. Incorporate High-Quality Images

One of the most challenging aspects of buying products online is that it’s more difficult to get a sense of what the items are like in person. You can help minimize your customers’ indecision by providing high-quality images of your merchandise:

The best product images include the following elements:

• Proper lighting, so products appear clear and easy to see
• Plain backgrounds that aren’t distracting
• Multiple angles, so customers can recreate the experience of picking up an item and looking at it
• Closeups and/or a zoom feature that enables shoppers to see details such as stitching

While you can certainly achieve all of these goals on your own, you might also consider hiring a professional product photographer to achieve top quality.

2. Optimize Product Descriptions With Keywords

Search Engine Optimization (SEO) is not only important for driving organic traffic to your site, but also for helping customers find what they’re looking for. Using keywords in your product descriptions can speed up their searches and filter out irrelevant results.

When writing descriptions for your product pages, make sure to use common terms that users might be searching for when looking for specific types of items. Highlight key features, and use clear and direct language so shoppers can understand the benefits of buying your products.

With that being said, you don’t want your product descriptions to become lists of search terms. Keep in mind that their primary purpose is to provide value to customers, and help them make purchasing decisions. That means it’s important to work your keywords in naturally.

To help with this, you might consider investing in Yoast SEO for WooCommerce or a similar plugin. Such tools can provide suggestions for improving your descriptions right in the product page editor.

3. Include Conversion-Boosting Elements

Product pages are often the first step in the checkout process. Minimizing friction throughout the buyer’s journey can help improve your sales rate and decrease shopping cart abandonment.

Incorporating one-click purchase buttons, variation and quantity selectors, and other elements that streamline your product pages’ UX can go a long way towards boosting your profits:

A simple way to add these features is by choosing a quality WooCommerce theme that includes them out of the box.

If you already have a theme that you like, however, there are plenty of other ways to enhance your product pages. For example, the Block Editor includes a button block that you can customize to suit your goals. There are also several Block Editor extensions you can use to access elements such as ‘hero’ content, unique photo gallery layouts, and more.

4. Use a WordPress Page Builder

Last but not least, page builders are very useful for enhancing your product pages. For starters, many of them include WooCommerce-specific elements that you can easily drag-and-drop into your content, including user ratings, upsells, and more:

Beyond adding advanced elements, page builders also enable you to see your content from a customer’s perspective while you’re creating it. This can help you catch potential problems that might derail buyers and steer them away from your site.

With a page builder, you can also use templates to speed up the design process and maintain consistency between product listings. There are many excellent WordPress page builders you can use to customize WooCommerce product pages, and most are extremely easy to get started with.

Conclusion

There are many site optimization best practices that can help you improve your online store’s performance and overall UX. However, it’s also important not to overlook your product pages, as they play a key role in encouraging customers to complete purchases.

In this post, we’ve covered a few key ways you can improve your WooCommerce product pages to make them more enticing to customers:

1. Incorporate high-quality photos.
2. Optimize product descriptions with keywords.
3. Include conversion-boosting elements such as buttons and timers.
4. Use a WordPress page builder.

Do you have any questions about how to create more effective WooCommerce product pages? Leave them for us in the comments section below!

The post 4 Ways to Create Better WooCommerce Product Pages appeared first on Torque.

Inline frames aren’t responsive by default. However, there are simple strategies you can use to make your embeds responsive in WordPress. Whether you’re a tech-savvy developer or a WordPress beginner, there is a quick and easy solution for you to use.

In this post, we’ll briefly discuss the importance of making your embeds responsive in WordPress, then walk you through the two different methods you can use to do so. Let’s get started!

The Importance of Responsive Embeds in WordPress

Responsive design is the foundation of a mobile-friendly website. Static elements and pages can present navigation issues, poor readability, and other inefficiencies that contribute to higher bounce rates.

A responsive website means delivering a positive UX for your visitors, regardless of the device they’re using to access your site. Unfortunately, while text and images are easily adaptable, other elements – particularly embedded content – are a bit more challenging to work with.

Adding videos and social media content in your WordPress pages can help make them more interesting, shareable, and engaging. However, embedded content is only helpful if it’s viewable.

When you embed videos, social media posts, and other types of content that aren’t responsive by default, it can break the mobile design of your site. Even if you’re using a responsive WordPress theme, portions of the embedded content may get cut off or distorted.

By making your embeds responsive, you minimize the amount of scrolling and zooming your users have to do in order to comfortably browse and consume your content on their smartphones and tablets. The result is a more aesthetically pleasing, user-friendly website.

How to Make Embeds Responsive in WordPress (2 Possible Methods)

If you want to make embeds responsive in WordPress, there are two main methods you can use: the plugin method and the manual method. Let’s take a look at both.

Method 1: Use a Plugin such as EmbedPress

If you’re not comfortable working with code or editing your theme’s files, you can use a plugin to make your embeds responsive in WordPress. While there are a handful of options, we recommend EmbedPress:

This freemium plugin is incredibly easy to use and provides a quick, simple way to embed various types of content, including YouTube videos, social media posts, and Google Docs. When you embed content via this plugin, it automatically makes it responsive.

To use it, first install and activate the plugin on your WordPress site. Then navigate to the page or post to which you want to add the responsive embed.

In the editor, click in the (+) icon, then search for the EmbedPress block. It will display a dropdown of supported applications and platforms you can embed content from:

Select the one you want to use (we’ll use YouTube as an example), paste the content URL in the link field, then click on the Embed button:

Note that once you have EmbedPress installed on your WordPress site, you can add other media such as Instagram posts simply by pasting the URL in your editor. After you paste the link, it will automatically convert it to responsive, embedded content.

Your video or other content will display within the block on the back end. To see how it looks on the front end of your site, click on the Preview button in the top right-hand corner of the editor. If you use your mouse to adjust the size of your browser window, you should notice that the video remains viewable and in frame even as the window shrinks.

Save and publish your changes. Then you can also view your site from a mobile device to confirm that your embed is now responsive.

Method 2: Manually Edit Your Theme’s Files

Another way to make an embed responsive in WordPress is by editing your theme’s CSS. Of course, this method is only recommended if you’re comfortable working with code and prefer not to install another plugin on your website.

However, before following this method, we suggest backing up your site. You might also consider creating a child theme so that your changes won’t be lost when you install updates.

Once you’re ready to get started, access your File Manager or File Transfer Protocol (FTP) client and open the style.css file of your current WordPress theme. Next, copy and paste the following code snippet into the file:

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Now, any time you want to make an iframe embed responsive, you simply need to wrap it in a div tag with the iframe-container class. Let’s say you wanted to embed a YouTube video in a WordPress post.

The first step is to get the embed code from YouTube. Navigate to the YouTube video you want to embed, then click on the Share button. Choose the Embed option from the list:

It will open a panel that displays the iframe embed code. Copy it. Next, navigate to the WordPress post where you want to include the embedded content, and paste the embed code in a Custom HTML block:

The next step is to wrap the code in a div tag with the iframe-container class that we added to our theme’s style.css file. In our example, it would look like so:

<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/qnretr_0cRA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

You’ll then be able to preview the video within the editor:

Once you’re done, save your changes. That’s it!

Conclusion

YouTube videos and social media posts can help make your WordPress site more engaging. However, to ensure the content translates well across all screens and devices, it’s important to make sure the content you embed on your site is responsive.

In this post, we discussed two ways to make your embeds responsive in WordPress:

1. Use a plugin such as EmbedPress to automatically make YouTube, Instagram, and Google embeds responsive.
2. Manually edit your theme’s files and wrap your embed code in a div tag with the iframe-container class.

Do you have any questions about making embeds responsive in WordPress? Let us know in the comments section below!

The post How to Make Embeds Responsive in WordPress appeared first on Torque.

Getting to know WordPress can be quite daunting. Especially if you don’t have a background in engineering. That’s why we — team Yoast — created a brand new free online training course to teach you how to get started with WordPress. We’ll cover all the basics from “What is a page builder?” to “How do I install a plugin?” In each lesson, there are a lot of videos, a ton of reading material and at the end, we’ll ask you some challenging questions. After taking our WordPress for beginners course, you will be able to set up and maintain a WordPress site.

It’s free because it’s WordPress!

Yoast has been offering online training courses for over four years now. Our team of experts put together an amazing curriculum of SEO courses. When we started working on the WordPress course, we were planning to make it into a paid subscription, but in the end, that did not feel right. 

Not only do we love the openness of WordPress, but a high-quality course like this also helps people from all over the world to get the most out of their WordPress sites. It felt like something we should give back to the community that gave us so much, so we made it completely free.

Who’s the WordPress training for?

This course is for everyone who wants to understand every aspect of WordPress. You’ll love this course if you want to create your own website, but don’t know where to start.

The course will be helpful to anyone who wants to learn how to maintain, improve and build on existing websites. In addition, we’ll discuss the history, the open-source ecosystem and the community of the WordPress world.

What’s in the course?

The course consists of eight modules. We’ll start with background information about WordPress, we’ll give practical tips on how to use the block editor, and show you how to structure your website.

Every module consists of multiple lessons. The module about the block editor, for instance, has a lesson about adding images, videos, and embeds. The lessons are taught using videos and screencasts, so you can follow along with the instructor. Then at the very end, you’ll be given a quiz to text your knowledge.

Here’s an example lesson:

You’ll see well-known Yoasters like Joost de Valk, myself, Taco Verdonschot, and Remkus de Vries, and more. Our training course will allow you to meet a whole bunch of awesome Yoasters. 

What will you learn?

• What WordPress is and what it can do for you
• How to get your own WordPress site up and running
• How to customize your site with plugins, themes, and widgets
• The ins and outs of all the settings in WordPress, so you can build a website that helps you achieve your goals
• How to liven up your site with amazing content, like posts, pages, images, videos, and embeds
• How to make sure people can find what they need on your site, by organizing your content with categories and tags
• How to manage your WordPress site once it’s up and running, with user roles, updates, and backups
• How to make sure your site is secure and protected against hackers
• Everything about WordPress SEO, so people can actually find your site in the search engines
• All about the story behind WordPress, like its history and its open-source community!

Moving Forward

The course has been up and running for a few weeks now and the first reactions have been really positive! We’ve already helped quite a few people get their WordPress-site online. At the time of writing over 3,

“I did not know how much I needed this course! In particular, I think that the combination of video, text, and quizzes get the message across to us students. The Yoast-tribe is dedicated and passionate about helping us get the best out of our WordPress powered sites. For the first time (I’ve been using WP for years) I now understand canonical URL, permalinks, and the importance of backup.”

Søren Leth-Nissen – nduna.dk

Check out all the ins and outs about our WordPress for beginners course at Yoast.com. All the courses in the Yoast SEO Academy are online and on-demand, so you can follow along whenever you want, wherever you want.

The post Yoast Creates Free Online Course for WordPress Beginners appeared first on Torque.

Research suggests that up to 75 percent of all online shopping carts are abandoned before making a purchase. Of course, this phenomenon has serious consequences for your bottom line.

Because of that, in this post, we will talk about how to tackle this problem. You will learn the main reasons for shopping cart abandonment as well as solutions to stop it from happening to you.

Note, this stuff will also help if your site is not built with WordPress. However, some of the tools and plugins below are WordPress specific.

Alright, let’s first talk about what shopping cart abandonment means.

What is Shopping Cart Abandonment?

The name basically already says it all. Shopping cart abandonment means that someone comes to your e-commerce site, places one or more items in the virtual shopping trolley and then leaves without completing the purchase.

This can happen on the shop page, during checkout or at any other stage of the customer journey. The percentage of people who do this on your site is the shopping cart abandonment rate.

So why does it happen?

Shopping Cart Abandonment Reasons

There are many reasons why anyone would not go through with their purchase, not all of which you can influence.

For example, website speed plays a huge role (to the tune of up to 75 percent increase in abandonment on slow sites) and you can do a lot about that.

At the same time, a large chunk (81 percent) of customers who don’t end up buying from you are actually just window shopping and doing research. Only 2-3 percent of customers complete a purchase on their first visit.

As for the reasons why people don’t convert more easily, here are the main issues customers have:

• Expensive fees like shipping, taxes, etc. (55%)
• Necessity to create an account to complete the purchase (34%)
• Checkout process too long or complicated (26%)
• Didn’t trust the site with credit card information (17%)
• Website exhibited errors/crashed (17%)
• Payment options not sufficient (6%)

There are two things you should take away from this:

1. Cart abandonment is pretty normal and you just have to accept it as part of running an online store.
2. At the same time, there many factors that you can influence to reduce shopping cart abandonment on your site.

Let’s talk about the second part now.

How to Fix Cart Abandonment

From here on out, you will find a number of cart abandonment solutions you can use to get this nuisance under control. Let’s start off with some basic technical measures.

1. Increase Site Speed

As seen above, slow loading times have a huge impact on cart abandonment rates. For that reason, one of the most high-impact actions you can take is to make sure your site loads as quickly as possible.

This is just part and parcel of having a website these days. Google has found that longer loading times greatly increase bounce rate on mobile.

In addition, 10 years ago Amazon reported that an extra second in page loading time could cost them $1.6 billion in sales.

Therefore, having a fast site is one of the pillars in your quest to reduce cart abandonment rates. We have several articles on that topic chock full of tips to get you started:

• How to Speed Test Your Website (Metrics, Tools, Optimization Tips)
• 14 Ways To Speed Up WordPress And Decrease Page Load Time
• 10 Easy Ways to Speed Up Your WordPress Website [Case Study]

2. Make Your Shop Mobile Friendly

More than half of Internet users these days access the web with their mobile devices. At the same time, these types of devices have some of the highest cart abandonment rates.

As a consequence, mobile-friendliness is a huge usability factor for e-commerce.

To figure out where you are standing, be sure to run your site through a mobile-friendliness testing tool.

Fix any issues that come up. In addition, check out our guide on how to make a website mobile-friendly. Your customers on phones and tablets will thank you.

3. Start Tracking

You might have heard the old adage “only what gets measured gets managed”. In this case, that means before you can reduce cart abandonment rates, you first need know the status quo.

You can find out what’s going on by look at Google Analytics and its enhanced e-commerce tracking. Aside from cart abandonment rates, it also has reports on shopping behavior, checkout, sales performance, and more.

You can learn how to set it up in this tutorial. After that, you are able to access your data through Conversions > Ecommerce > Shopping Behavior inside Google Analytics. From here, you can figure out at what point users abandon the checkout process.

4. Improve the Checkout Process

Based on the data collected above, it’s then time to try and find ways to plug the holes through which you are leaking customers. Most of the time, the first step is to simplify the checkout process.

Here are some measures to do that:

• Use a one-step checkout — Implement all the steps needed to check out in once page. If you can’t condense that much, see if you can reduce the number of steps or just simplify the form or other elements to make things more streamlined.
• Enable guest checkout — As we have seen above, being forced to open yet another account is a reason for many not to go through with their purchase. Allowing to shop as a guest does away with that hurdle. WooCommerce has this feature out of the box.
• Eliminate clicks — Generally, see where you can reduce the actions that someone needs to take to buy from your store. For example, users shouldn’t be taken to their shopping cart automatically after adding an item. Going back is just one more click they need to make.

At the very least, if you can’t eliminate anything, use a progress indicator to show people how far along in the shopping process they are.

In addition, to find out what works, engage in split testing to see what changes bring improvements.

5. Increase Trust Indicators

Trust is an important currency on the web in general but in e-commerce in particular. When people spend their hard-earned cash, they want to be sure there is no risk involved.

We have a whole article on this topic, but here are some important markers to increase trust:

• Professional web design
• Clear ways of contacting the site owner
• Privacy policy
• Trust logos such as from virus scanners
• Money-back guarantee or other assurances
• Social proof

If you’re going with a security badge, here are the most trusted:

In addition, one thing that has special weight in e-commerce are reviews. They are one of the most trusted factors in purchase decisions. 88 percent of consumer trust them as much as personal recommendations. So, this is a must-have for an online store.

There are a number of WordPress plugins to get reviews on your site and you can find a few of them here.

6. Consider Free Shipping

We have already covered that shipping fees are a big factor in incomplete purchases. There is also evidence that customers care a lot more about no shipping fees than fast shipping.

Therefore, if you can make it happen, offering free shipping is a great way to reduce shopping cart abandonment.

Of course, it also needs to make sense for your business. If you can’t offer free shipping for everyone, you might at least set a threshold after which customers are eligible to free shipping. This can also increase the order value.

At the very least, indicate shipping costs as early as possible. A good chunk of customers abandon shopping carts due to “surprise fees” at the end.

If you are using WooCommerce, this plugin allows customers to calculate shipping costs on the product page. If if there are any other costs like taxes or fees, make sure to include them on the product page as well.

7. Offer More Payment Methods

If you are dealing with customers from all over the world, you need to understand that one payment system doesn’t fit all.

For example, PayPal is not available in some countries, therefore, people from these locales are unable to shop at your store if that’s all you offer.

Therefore, find out who your customers are and where they are from. Then, figure out what is their preferred payment method and see how you can accommodate that.

8. Consider Exit Popups

When someone gives up on their shopping, it doesn’t mean that’s the end of it. As mentioned above, many users who abandon shopping carts are actually just checking prices. They fully plan on buying something but want to find the right place first.

With a little nudge, you might be able to convince them that that place is you. A way to do this is with exit popups that appear during checkout when the user is about to close their browser window.

To amp up the pressure, you can couple this with extra incentives such as a time-limited discount. Possible solutions to set this up are Hustle, Popup Maker and Popup Builder. Some page builders also have this functionality. Note that exit popups are a pro feature for some.

9. Use Abandoned Cart Emails

One step further are abandoned cart emails that you can send to people who filled in their email address but didn’t complete the purchase. Here you can add extra incentives to get them back or simply remind them of the items in their cart.

Emails likes this also sport great opening and click rates – 40 percent and 9.5 percent respectively. WPLift has a list of software solutions that allow you to send them.

In addition, this post will give you some best practices for how to make these types of emails effective.

Wrapping Up: Reducing Shopping Cart Abandonment in WordPress

Incomplete purchases are one of the main challenges online stores face. While they are normal, finding ways to reduce shopping cart abandonment is definitely part of your job as an online seller.

Above, we have talked about the reasons why people give up on their shopping and what you can do about it. Here are the steps one more time to drive the point home:

1. Increase site speed
2. Make your shop mobile friendly
3. Track where customers jump ship
4. Improve the checkout process
5. Use trust indicators
6. Offer free shipping
7. Provide more payment gateways
8. Use exit popups
9. Send abandoned cart emails

Now it’s up to you to put them into practice.

Have you found ways to reduce shopping cart abandonment? Any other tips you can share? Let us know in the comments section below!

The post 9 Ways to Reduce Shopping Cart Abandonment in WordPress appeared first on Torque.

For example, your clients will need to take care of creating regular backups for their websites. That can be a time-consuming task, especially if they don’t know the right way to approach it. Whenever possible, helping your clients learn and automate this type of work before setting them loose can save both you and them a lot of headaches.

In this article, we’ll introduce you to four of the best practices your clients need to know to keep their websites running smoothly. Let’s get right to work!

Why It’s Important to Help Your Clients Learn Basic Website Management

If you work in development, you know how much work it takes to run even a simple website. The problem is that a lot of clients aren’t aware of all the effort involved, so it comes as a surprise after their sites go live.

Depending on what type of services you provide, your work might not end after you hand over a website to your client. You might also be expected to help out with simple management tasks and provide support. Even if you aren’t, however, it’s almost always a smart idea to teach your clients some best practices for taking care of their own websites. That way, they’ll run into fewer problems down the road, which reflects better on your work.

In our experience, the best two things you can do to prepare your clients for running a website are:

1. Give them an introduction to the types of tasks they’ll have to deal with on a day-to-day basis.
2. Automate any essential site management tasks you can before handing the project over (within reason, naturally).

Since we’re talking about WordPress, this process can be quite simple. After all, the platform enables you to automate a lot of key tasks using both default functionality and plugins. Plus, you can re-use the same general advice and techniques for most types of client projects, which can save you a lot of time.

Managing WordPress: The 4 Best Practices Your Clients Need to Know

Every client is different, but some practices can benefit almost every type of website. In the next few sections, we’ll cover several of the most important tasks your clients will need to carry out and talk about how to help them kickstart the process.

1. Create a Style Guide for the Website

Many successful websites have internal style guides and for good reason. This type of guide outlines the basic practices that everyone who contributes to (or works within) that website should follow, in order to keep its presentation consistent.

For example, let’s say you set up a company website for a client, including a blog. The company’s style guide could consist of points such as:

• All articles must be written in the third person.
• Don’t link to competitors’ websites.
• Set all images to a width of 630 pixels.

In our experience, having a style guide can make managing a website much more straightforward, especially when there’s a large team involved. When you hand over a client website, therefore, you might want to include a list of suggestions or tips on how your clients can keep their content and branding consistent. Creating the style guide will be up to them, of course, but you can go the extra mile by offering resources on good practices to follow.

2. Set Up Checklists for Key Processes

As we mentioned earlier, WordPress is a pretty beginner-friendly platform. However, the first time you have to deal with a new Content Management System (CMS), it can be intimidating. One way to help your customers get used to WordPress faster is to draw up a few simple checklists for key processes, which they can refer back to as needed.

To give you an example, once you hand over a website, your clients will probably want to set up some new plugins on their own. After all, plugins are half the fun of using WordPress. However, if the client doesn’t have much experience with the platform, setting up plugins at random can cause problems.

To keep that from happening, here’s a simple checklist you can share so your client can refer to it before and after installing a new plugin:

1. Check to see if the plugin has been updated in the last six months and if it’s compatible with your version of WordPress.
2. Make sure the plugin has good reviews overall, and check any negative ones for red flags.
3. Back up your website.
4. Install and activate the plugin.
5. Check to ensure that your website is still working normally after the activation.

That, in a nutshell, is the safest way to install and test new plugins. If you want to go a step further, you can even suggest that they do so using a staging site. Of course, that might be too involved for users who don’t have much experience running a website, so you’ll want to make sure to judge your audience carefully.

In short, we recommend that when you’re working on a new WordPress website, you try and gauge how well-acquainted your clients are with the platform. That way, you’ll have an idea of what kind of checklists they may need in order to proceed with basic tasks on their own.

3. Automate Vital Tasks on the Site

To go one step further, there are some tasks that it’s better to outright automate, rather than perform manually over and over again. Backups are a perfect example. They’re crucial to keeping your client’s site safe, as well as very repetitive and simple to implement.

Even if your client is experienced with WordPress, it’s often better to automate certain tasks just to avoid human error and make sure they happen on schedule. That way, your client won’t forget to back up their site and come running to you to get the problem fixed.

With WordPress, the easiest way to automate the most vital tasks is by using plugins. Here are some quick examples of processes you might want to set up on client websites:

• Backups. We’ve been over this already, but here are some of our favorite plugins to get the job done.
• Plugin, theme, and core updates. Keeping WordPress and its components up-to-date is the easiest way to avoid issues with the platform. To manage this task, you can use a plugin such as Easy Updates Manager.
• Spam management. WordPress websites are common targets for spam, so you may want to set up a plugin to help your client manage those comments, such as Akismet.
• Image compression. High-quality images look great, but they can also increase loading times considerably. Implementing automatic image optimization goes a long way towards keeping your client’s site fast.

There are a lot more tasks you can automate on most WordPress sites. However, it’s up to your judgment to determine what each client needs, and you’ll want to avoid over-complicating their site upfront with too many plugins and features.

Ideally, your exchanges with each client throughout the project will provide you with all the information you require, in order to optimize the website to meet their needs. The goal is to use strategic automation to make their lives simpler, improve satisfaction, and reduce later demands on your own time.

4. Enforce Robust Security Standards

One downside of WordPress’ popularity is that the platform has become a huge target for attacks. Even small blogs often face brute force attacks or are infected with malware. This means that everyone should adopt good security standards on their sites, in order to avoid future issues.

The problem is that most people aren’t very thorough when it comes to security. For example, you probably know that you should never re-use passwords across accounts. However, we’d be willing to bet that you’ve done it before (and so have we!).

Ideally, you’ll share a checklist of security tips with your clients when you hand off a website. Here are some of the most important points to cover:

• Enforce strong passwords for your admin account.
• Don’t use admin as your username!
• Use Two-Factor Authentication (2FA).
• Limit the number of login attempts that users can make within a specific period.

Those are the basics when it comes to WordPress security. However, you can always go further, depending on your client’s needs. For websites that require high security, we usually recommend whitelisting which IPs can log into the WordPress admin. However, that can be overkill for smaller sites.

At the very least, you’ll want to make an effort to drive password security home. If your customers are worried about forgetting complex passphrases, then you can recommend that they use a password manager. If you also teach them how to use 2FA, and potentially set up a solution for them, they should be able to avoid most security issues.

Conclusion

Websites are like living organisms. They’re constantly changing and growing, and if you don’t take care of them, things can get messy. If you know how to manage a WordPress website well, however, the platform doesn’t need to give you any problems. That’s just as true for your clients as it is for your own site.

When handing off a new client website, there are several key upkeep tasks you may want to offer advice and assistance on:

1. Creating a style guide.
2. Setting up checklists for key processes.
3. Automating vital tasks on the website.
4. Ensuring robust security standards.

Do you have any questions about how to help your clients manage their WordPress websites? Let’s talk about them in the comments section below!

Image credit: Pixabay.

The post Managing WordPress: The 4 Best Practices Your Clients Need to Know appeared first on Torque.

Easy money, right?

However, when you do take over an existing website, the reality is quite different. Websites don’t exist in a vacuum, there are lots of moving parts and many steps to it.

To help you avoid forgetting anything and make the process as smooth as possible, we wrote up a checklist of what to keep in mind when taking over administration of a finished WordPress website.

How to Take Over an Existing Website in 10 Easy Steps

Use the tips below to make sure you take all necessary steps to properly assume responsibility for an existing client website.

Note that not everything below will necessarily apply in your case, but it’s better to have too much information and not need it than forgetting something important.

1. Get Access to Everything Connected to the Site

When you take over an existing website, the first thing you need is access to its important components.

This means more than simply a username and password for the WordPress dashboard.

In particular, make sure you have credentials for:

• WordPress back end — This is sort of a given and we have already mentioned it. However, make sure you get an administrator account and not anything below that.
• Hosting account — Access to hosting is necessary in order to change basic site configuration (like the PHP version) and troubleshoot problems.
• Domain registrar — Domains often come together with hosting, however, that’s not always the case. Consequently, be sure to double check that you know how to access anything pertaining to the domain.
• Cpanel — Some hosts have different logins for Cpanel (or any other management panel) and the hosting account. Get both.
• CDN — If the site is using a CDN (which is an excellent way to speed up WordPress), make sure you have the login information for that as well.
• Email accounts — If there are any email accounts connected to the site or any of the above, you need access to them for recovering passwords, updates and other administrative reasons.

2. Change All Passwords

Once you have all of this information, the next step is to go ahead and change all the passwords you just collected — every single one.

When you take over an existing website, you don’t know who had this information before you. So, in order to keep the site safe, it’s crucial that you make sure from now on there is only one person: you.

Alright, in some cases it might be necessary to share it with other stakeholders. However, the most important thing is that nobody who is no longer on board with the project can still log in anywhere.

You can use software like LastPass to collect all logins in one place. This also makes sharing them easier if you ever give up the admin role to someone else.

Also, I don’t have to tell you that but use strong passwords. Weak credentials are one of the main reasons why WordPress websites get hacked. To create bulletproof logins use this service.

3. Become Part of the Project Infrastructure

There are often additional services and infrastructure involved in running a site. Depending on how far your role stretches, it might make sense to be part of them as well.

Here are a few examples:

• Project management software — Whether it’s Asana, Trello, Slack or any other group communication service, if the client or team uses this stuff for the organization, you should probably be on there.
• Dropbox/Google Drive — Should any files that are important for the future or present of the website reside on these services, make sure you have access to them. This can also be relevant for remote backups (more on that below).
• Github — If you are at all involved with the further development of the site (and not just its maintenance), it can make sense to join the client’s Github repos.
• Social media accounts — Taking over an existing site can also mean that you do some or all of its marketing. Naturally, this will require you to have access to the respective social accounts. Same if the client uses a scheduling tool like Buffer.
• Email marketing — What applies to the social accounts is also valid for any email marketing accounts you might be responsible for (e.g. MailChimp)
• Web analytics — In addition, if SEO is part of your role, ask to get access to Google Analytics, Search Console or any other relevant tracking tools.

As stated earlier, all of this really depends on the setup of the site you are taking over, so don’t see this list as conclusive.

4. Turn Yourself Into the Single Point of Contact

Once on the site, go to Settings > General and check whose email address is input there for notifications.

If it’s the client’s, you can likely leave it as is. In case it is the former admin’s, make sure to change it to yours or your client’s, depending on your agreement.

After that, go through the user list (Users on the dashboard) and find the person who took care of the site before you. Make sure to remove their access if they have completely left the project or downgrade them to what their new role requires.

While at it, go through the other admin-level users and check if everyone who is on there deserves to be and has the right access level.

In the best case, anyone on the site should only be able to perform they tasks they need to, not more. This reduces the chance for accidents.

Finally, check the plugin list to see if the site is connected to any management solutions that would allow remote access. Should that be the case, be sure to remove it.

5. Check the Backup Solution

Next up on our checklist for taking over existing WordPress sites is making sure that no data is easily lost. This means, that the entire site (including the database) is backed up regularly and in full.

If nothing is in place for that yet, be sure that you install a backup solution first thing and create a full backup before doing anything else. Actually, do the latter either way.

If a backup solution already exists, check that it is working properly and where the files are stored. For example, if it is backed up remotely, be sure that you can access the remote storage facility (change passwords as necessary).

Finally, if working with a premium backup solution, check who is paying for it. When taking over a website from another designer, chances are that it’s coming out of their pocket and not the client’s. More on that below.

6. Update Everything That is Out of Date

Once you are sure that the entire site is kept safe, it’s time to do the first round of maintenance. That means, updating themes, plugins and WordPress core. When you take over an existing website, chances are good that at least some of this will be out of date.

If you haven’t done so in the last step, now is the time to make a full site backup. Then, update both core, plugins and themes one by one, checking regularly if the site is still working correctly. In contrast to bulk updates, this allows you to spot immediately if one component is making the site kaput.

You might even consider downloading the site to a local development environment or staging area and making the updates there to keep any hiccups invisible from your visitors.

7. Audit the Security System

After the backup, it’s time to deal with the rest of security. After all, keeping the site safe is one of the most central tasks when you take over an existing website.

• Run a scan — The first task is to make sure there isn’t already a problem. Run a security scan (for example this one) for the site to make sure it is not blacklisted, malware infected or the like.
• Install security plugin — Should no security system exist yet, make sure to secure the site with one of the many WordPress security plugins and other security measures.
• Change email address — For any existing security solution, make sure that from now on alerts come your way, not your predecessor’s.
• Check if the site has SSL — A must these days. If the administrator before you didn’t take care of this, make it a point to do so. Use this post for more information.

Same as for backups, if there is a premium solution in place, find out who is paying for it so you can change it if necessary.

8. Check All Premium Features

For many WordPress contractors, it’s standard practice to pay for premium components themselves and then invoice their client for them. Even worse, some just add client sites to unlimited accounts they themselves own.

Therefore, when taking over a website from another developer, it’s up to you to sniff out where the project is still entangled with its former administrator:

1. Make a list of all add-ons that are either premium or otherwise need accounts (for API usage, updates etc.).
2. Find out who owns the licenses and accounts. Contact the previous admin for everything still in their name (if you can) to see if a switch is possible.
3. For everything that is not possible to transfer, talk to your client about re-purchasing them.

9. Get Ready to Manage Site Content

If content creation and/or management will be part of your duties, there are a few more things you need to be aware of/ask for:

• Contact details — To get in touch with writers or the editorial team for coordination purposes.
• Content calendar — If there is a document that shows what content will come out when, be sure that you have access to it.
• Assets — Images and other media are a crucial part of web content. See that you know the right formatting, where to source them, etc.

In short, know the workflow and how you fit into it. By the way, much of that will be part of a blog style guide, so see if the site you are taking over has something like that.

10. Begin Your Job as Site Administrator

Once done with all of the above, it’s time to take on your new responsibilities as the person in charge. If don’t know what that entails, check the post on site maintenance linked above.

Aside from that, it’s important that you keep vigilant. Every website is different so there may be things not included in this checklist. If that is the case, it’s up to you to get all necessary information and include them on your end.

Taking Over Existing Websites in a Nutshell

The moment you take on an existing WordPress site, it’s best to know what is expected of you. Since most websites exist in a network of different components, it’s easy to forget some of them.

For that reason, the checklist above walks you through the process of taking over a site from another designer or developer so you don’t forget anything important.

Once fully in charge, you have other opportunities to help your client improve their website. You can optimize images, do on-page SEO, keyword research, help monetize the site and much more.

That way, taking over a site from someone else can result in additional income instead of a liability. However, only when you make the effort.

What do you check when you take over an existing website? Anything important to add to the above? Let us know in the comments section below.

The post 10 Easy Tips to Successfully Take Over an Existing WordPress Website appeared first on Torque.

Even if you have reverted back to the classic editor, chances are good that at some point in the next few years you will also start creating web pages in the form of blocks.

More and more themes, like Twenty Nineteen, will take advantage of what the new WordPress editor has to offer. Plus, soon you will also use blocks in other parts of WordPress like the navigation menu or widgets. Therefore, you better to wrap your head around them now.

The editor comes with a number of standard blocks that can be extended via plugins. However, being able to build your own custom solutions is often very useful, which is what this Gutenberg block tutorial will teach you. But first, let’s start with the basics.

What Are Gutenberg Blocks?

Before we get to how-to part, let’s first settle on what we are even talking about.

Gutenberg Block Examples

The main change that Gutenberg introduced to content creation in WordPress is that, instead of having one big chunk of content (as it was with the classic editor), web pages are now segmented into smaller parts, called blocks.

These can be many different things:

• Paragraphs
• Headings
• Blockquotes
• Images and galleries
• Lists
• Embedded media
• Buttons
• Tables

Each block has its own content, formatting, and other options and you can move, delete, and reuse them at will.

Why the Change?

Why change a running system? Well, the main idea behind the Gutenberg editor is to make the editing experience more flexible and easier to customize, especially for beginner users.

It gives you more control over the entire page, not just the main content. You can customize elements in a more detailed fashion and without applying CSS classes to them or other technical hijinks.

Instead, you are able modify their format, positioning, colors, sizes and much more directly from the user interface.

In addition, blocks in the editor look the same as they do on the page. This makes for a better user experience as the editor view more closely resembles the final product.

Plus, soon you no longer have to learn different ways of displaying page elements (like shortcodes and widgets) but simply one: blocks. When you know how to use them, you can control all different parts of your site.

So, Why Create Your Own Gutenberg Block?

One of the most exciting things about WordPress is that it’s so customizable. Pretty much anything about the platform is adaptable to your needs.

For example, the classic editor is completely customizable. So, why not do the same with its new counterpart?

Especially if there are content blocks that you need frequently but that the editor, plugins or themes don’t offer (yet), creating your own makes sense. Instead of putting in custom code every time, it’s more practical to be able to choose it from the built-in menu. Don’t you agree?

After all, your website is supposed to adapt to your needs in order to make working with it as easy as possible. Plus, knowing how to create your own Gutenberg block is quickly becoming a useful skill.

Is It Easy?

From a technical standpoint, it’s important to note that most components of Gutenberg blocks are written in JavaScript. This goes hand in hand with Matt Mullenweg’s 2015 advice to learn the programming language — deeply (if you want to do that, check these useful resources).

The shift toward JavaScript has been evident in recent years, for example, in Calypso. The programming language comes with a ton of benefits and JavaScript-powered web applications built onto APIs (like Gutenberg is) are the future of the web.

However, that also means that, unfortunately, creating Gutenberg blocks is not very beginner friendly. I am not a developer even by a very long stretch of the word but I have been working with, writing about and building sites with WordPress for close to ten years.

Still, I have to admit that I struggled with completing the challenge I set myself with this post. I hope that, by laying the process out step by step, I can open it up for other people who don’t earn their living writing code. Let’s see, shall we?

How to Create Blocks for the WordPress Gutenberg Editor

Alright, now that we have the theory out of the way, let’s talk about how to create a Gutenberg block.

For this tutorial we will be using the Twenty Nineteen theme, the first theme that was specifically made for the new editor. Out of the box, it offers several custom blocks, among them cover, widgets, quote, pullquote and more. To that we will add a simple call to action block with customizable content and custom styling.

In order to not start completely from scratch, we will be using the create guten block dev toolkit by Ahmad Awais. Everything you are about to read is based on it. In addition, will link to the official Gutenberg documentation where I find it prudent or necessary.

1. Prepare Your Environment

One of the first challenges to create a Gutenberg block is configuring the development environment. While it’s easy to set up a local WordPress installation, in order to tinker with the new editor you need things like webpack, React, ESLint, Babel, and more.

If you don’t know what half of these things mean, that’s ok, neither do I. What’s important is that all of them are included and correctly configured in the aforementioned create guten block kit.

Yet, in order to use it, you first need to install node.js and npm. For that, go to the official node.js website and download the correct installation file for your system.

Once it’s done, execute and run the installation. Ready? Great, you just completed the first step.

2. Set Up Your Plugin Files With create guten block

After that, it’s time to create your first block. You can do so quite easily via the console. If you have never worked with it before, don’t worry. It was also my first time.

The first thing you need to do is open the console. In Windows, hit the Windows button, search for command prompt, and open it. If you are on a Mac, use Cmd+F and then search for console. Both should open something like this:

Here, the first thing you want to do is to navigate to your local site’s plugin directory. You can do that with the cd command. Typing cd [directory name] opens a directory, cd.. goes back one directory.

You can also copy the path to the plugin directory from top of its window and just paste it after the cd command to go there directly.

Once there, you want to run the following command:

npx create-guten-block my-block

Make sure to replace my-block with the name of the block you want to create. For example, in my case, I went with cta-block.

The machine will then create a directory of the same name, download all the necessary information and set up the plugin files you need for your Gutenberg block.

It will take a little while but when it’s finished, you end up with this:

Once done with that, follow the advice of create guten block and enter your plugin folder (remember, cd [directory name]) and type npm start.

The latter will run the block in development mode, watch for changes and report errors in your code.

3. Activate the Plugin and Test Drive It

Once you have come this far, you can already use the plugin you just created. For that, log into your WordPress site, go to the Plugins menu and activate it there.

When you now go to the editor, click the plus symbol and search for the name of the block, you also find it included.

You can even input it into the page to find this on the screen:

Not bad, right?

4. Edit plugin.php

The reason why you see anything at all is because currently the block contains dummy content. Time to change that.

The important files for any changes are plugin.php inside the plugin directory as well as the three files inside src/block called blocks.js, editor.scss and style.scss.

With them, you control everything that has to do with the functionality and design of your self-made Gutenberg block.

The easiest to change is plugin.php. Here, you find the plugin header that contains all the information seen in the plugin menu in the back end.

/**
 * Plugin Name: cta-block — CGB Gutenberg Block Plugin
 * Plugin URI: https://github.com/ahmadawais/create-guten-block/
 * Description: cta-block — is a Gutenberg plugin created via create-guten-block.
 * Author: mrahmadawais, maedahbatool
 * Author URI: https://AhmadAwais.com/
 * Version: 1.0.0
 * License: GPL2+
 * License URI: https://www.gnu.org/licenses/gpl-2.0.txt
 *
 * @package CGB
 */

As a first step, modify all of this so it reflects the right name, author and other information of the plugin. It’s all pretty self-explanatory but if you run into problems, read this post.

Once done and saved, you also see the changes in WordPress.

5. Register Your Gutenberg Block

After that, you want to do the same for how your block appears in the Gutenberg editor. For that, turn to block.js. It contains all the code for registering the block on a WordPress site and for what it does on the front end and back end.

The default file for create guten block is very well annotated. It tells you which part is responsible for what so you can make your own changes. registerBlockType is what registers the block. The functions following edit: and save: describe the content and behavior of the block inside Gutenberg and on page respectively. More information here and here.

In my case, I simply delete everything starting with registerBlockType and replace it with the example from the Gutenberg documentation (toward the bottom). This creates a simple rich-text editor field with minimal formatting options including bold, italics, hyperlinks, etc.

However, in order for it to work with what we have created so far, we need to change this part:

blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
        title: 'Example: Editable',
        icon: 'universal-access-alt',
        category: 'layout',

In particular, what you want to change is:

• Registration path — This refers to the path that appears after blocks.registerBlockType. It needs to fit your current environment.
• title: — The name of the block as it will appear in Gutenberg.
• icon: — The icon associated with the block in the editor. You can use the dashicons. Be sure to insert the name without the dashicons- prefix. Alternatively, use your own SVG file.
• category: — Under which category your block will appear. Some of the standard categories are: common, formatting, layout, widgets and embed.

In my case, I simply changed it to this:

blocks.registerBlockType( 'cgb/block-cta-block', {
        title: 'CTA Block',
        icon: 'testimonial',
        category: 'common',

After that, it appears in the editor like so:

And this is what it looks like on the page:

I left the rest of the code as I found it.

6. Adjust the Block Styling

After that, it’s time to adjust the display of your new block. This happens inside editor.scss and style.scss.

As the file names suggest, the first controls what your block looks like inside the Gutenberg editor, the second the output on the front end.

In the default example from create guten block you can see that the output is green in the editor but red on the page. This is the consequence of using two different sets of markup.

In most cases, it probably makes sense to keep the styling the same. After all, one of the biggest selling points of Gutenberg is that the editing experience and end product are more closely aligned than before.

In my case, I add the following to both files:

.wp-block-cgb-block-cta-block {
    background: #d6f279;
    border: 0.2rem dotted #292929;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}

And here is the result in the editor:

And on the front end:

By the way, Gutenberg automatically assigns CSS classes to blocks depending on their name and you can find out what they are with your browser tools. Yet, the style sheets from create guten block will already contain the right class names. In addition, you can define your own.

7. Finish Up

Alright, once you are satisfied with your block, there are a few more steps. The first thing you want to do is go back to the console and hit Ctrl/Cmd+C to stop npm from monitoring your files.

After that, run the following command:

npm run build

This will compile the necessary files to production code (don’t worry, it won’t stop your block from working, I checked).

If you think you don’t want to use this block within create guten block ever again, you can also type in npm run eject. However, this means that, from now on, you will have to maintain the project yourself.

Are You Ready to Create a Gutenberg Block?

Gutenberg blocks are set to become the new default element in WordPress. They help create posts, pages, layouts and designs in a modular way and offer a lot of control.

Learning how to set up custom Gutenberg blocks helps you stay on top of the current development and gives you the tools to customize your site with the new technology.

Above, you have learned a basic way to create a block for the Gutenberg editor. It’s more complicated than making changes to PHP templates and for significant modifications, you probably don’t get around learning at least some JavaScript.

However, by knowing how it works in principle, you can start small and grow from there. If I can manage it, so can you.

Plus, the makers of Advanced Custom Fields are working on a way to make creating blocks much easier. The feature is currently in beta but as soon as it is available, you can expect to read about it here.

Have you created a Gutenberg block before? What was your experience like? Any additional tips or comments? Let us know in the comment section below!

The post Why and How to Create a Gutenberg Block – A Tutorial for Beginners appeared first on Torque.

• 14 Ways To Speed Up WordPress And Decrease Page Load Time
• 10 Easy Ways to Speed Up Your WordPress Website [Case Study]

However, the basis of putting any of these tips into action is that you have a proper understanding of the current state of your site. While there are many software solutions to test site speed out there you also need to be able to understand and interpret the results. Only then can you take steps to correct problems.

In this post, you will learn exactly that. Below, we will discuss in depth how to speed test your WordPress site. We will go over the loading process of web pages, examine important speed metrics and list tools to test them. After that, the post will discuss how to acquire meaningful data from that and what to do with the results.

Learning this will allow you to take the correct measures to make your site load fast and be of better service to your audience.

Website Speed Optimization – First Steps

Before getting into how to speed test your site, it makes sense to cover important concepts and tools in this area.

How a Webpage Loads

A basic thing to understand is how a web page ends up in front of a visitor. Knowing this will help you better understand where issues may arise and thus correct them.

First, the user opens a browser and puts in a web address. This creates a DNS request that resolves into the domain name provider, which points to a server. From there, the browser starts loading the files that make up your site:

• HTML — Provides the main structure of your site. If you are using WordPress, the CMS dynamically produces it from PHP. The HTML document also includes calls to all following file types.
• CSS — Responsible for styling, colors, dimensions, and more. Found in style sheets.
• JavaScript — Mostly adds interactive elements and functionality to your site. Whenever something moves, it is often thanks to JavaScript.
• Assets — Other files that provide parts of your site. The most common here are usually images.
• External resources — Not everything that goes into your site lies on your own server. Some elements (like custom fonts) come from external sources.

Once the browser receives the files, it can start building and then rendering the content. The order and speed in which it receives files determine how fast visitors can see changes in their browser window. For a more detailed breakdown of how this works, check this article.

What’s important to note is that all of the above represent different HTTP requests. Having too many of them can already cause a slowdown. If you suspect that is the case, the linked post will tell you how to deal with it.

Important Speed Metrics

In addition to the above, in order to troubleshoot speed issues on your website, it’s good if you understand some basic metrics that influence the user experience while loading a page.

• Time to first byte (TTFB) — Amount of time it takes for a browser to receive the first information from the site.
• First paint — The moment the screen is no longer blank. For example, a background color change counts as first paint.
• First contentful paint — When the first content appears. Might be part of the navigation, header image or any other element.
• First meaningful paint — Here, users are able to see the primary content so that they can understand what the page is about.
• Time to interactive — The duration until the page is usable and you can interact with it.

Many of the tools below will show you exactly this type of information.

Each step depends on different factors and thus needs different solutions when there is a problem. For example, if the time to first byte is very long, it’s often an indicator for a slow server. Thus, knowing the steps will help you pick up on where the process stalls and take targeted action.

Site Speed Testing Tools

Below are a number of tools you can use to test your site. They will give you different sets of data to understand how it is faring. Further below, we will discuss what to do with this data.

• Lighthouse — A chrome extension that you can use to generate reports on any website’s accessibility, SEO, best practices, and performance. It’s able to simulate a mobile connection, uses many of the metrics above and gives recommendations on how to improve your site.
• PageSpeed Insights — I have recommended this tool many times in other posts. It now comes with data from the Chrome User Experience Report, at least for popular sites. Aside from that, the service provides similar data as the Lighthouse extension.
• Test Your Mobile Speed — A Google testing tool specifically for mobile speed. Allows you to simulate different locations and connection speeds, compare the results with competitors, evaluate the potential business impact of improving your loading speed and get tailored recommendations for different pages. You can also get a detailed report emailed to you.
• Pingdom — The first non-Google tool for speed testing. Pingdom will give you a lot of the same information as PageSpeed Insights, however, in my opinion, easier to digest and understand. For example, it comes with a waterfall diagram to spot bottlenecks and has other information.
• GTmetrix — Similar to Pingdom but with even more data. Can be a bit more overwhelming and less user-friendly but gives you a lot of information to work with.
• WP Engine Website Tester — For a comprehensive analysis of your site with a specific focus on WordPress speed and security, WP Engine’s free WordPress Website Tester will provide you with a detailed health report for your site that includes many of the metrics listed above (and more).

In addition to the above, there are two other sources of information on how visitors see your site. The first is located in Google Search Console under Crawl > Crawl Stats.

Here, you can see the response time for when Google accesses your site. If the average is above 500ms, it’s time to take action

The second tool is the speed reports in your Google Analytics (find them under Behavior > Site Speed).

Here, you get information about the page loading speed for different browsers and pages as well as suggestions for improvement. Be aware, that, by default, Google Analytics will only track this for 1 percent of your pages. To get more information, increase this number to 50 or 100 percent.

So, How Do You Use This to Speed Test Your Website Then?

Alright, now that you know what to look for and how to track it, here’s how you can you use the above information to test the speed of your website.

1. Test Your Homepage

A site’s front page often gets a large share of traffic. It’s also your site’s figurehead. For that reason, this page is one of the first things you should test. Doing so will also give you information about how your site fares in general.

Therefore, feel free to plug your homepage into one or more of the speed testing tools above. However, when you input the URL somewhere, it’s a good idea to add a cache buster parameter to it like so: https://yoursite.com/?cache=busted. That way, it doesn’t use any pre-loaded assets and you get closer to the experience that a first-time visitors would have.

If this makes a huge difference on your page, it might mean that you are relying too much on caching for speeding up your site. In that case, you should take action to make the experience better for those coming to your site for the first time. For repeat tests, add numbers to the end of the parameter (e.g. https://yoursite.com/?cache=busted2), otherwise, you might get cached results again.

2. Take Multiple Tests From Multiple Locations

Your site speed will be different depending on the time of day and location from which people access it. Thus, to get a more accurate reading about its situation, it’s best to take several measurements.

Ideally, you should schedule automatic tests every hour and let them run for a week. You can set up monitoring like this with GTmetrix and Pingdom but it’s not free. So, if that’s not something you want to pay for, at least do a number of manual tests at different times.

In addition to that, it makes sense to try several locations. You can use the same tools to do so, just note that you have to register for a (free) GTmetrix account to enable switching locations there.

Here, it’s important that you test according to your audience. If you have a local site (for example, one that is only available in your home country’s language), using the closest location to your server is enough. However, if you target an international audience, it makes sense to see what the experience is like for visitors from different locations.

3. Test Your Most Important Pages

At this point, you need to be aware that there is a difference between site speed and page speed. Site speed is the sum of the loading speed of all pages on your site. Page speed is how fast singular pages on it load.

For that reason, it’s not enough to simply test the front page of your website. This is especially important, since, in many cases, it is actually one of the least content-heavy pages you’ll have.

Theoretically, you should run tests on all of your pages, as most organic visitors do not come through the main address but random pages they find in search results. It’s possible to do so with crawlers, for example, Sitebulb or Screaming Frog (both paid products).

If you are not using those, depending on the size of your site, testing all pages isn’t all that practical. In that case, you should check at least your most important pages. You can find those via your analytics band Behavior > Site Content > Landing Pages.

These are the parts of your site that visitors mainly use to enter it. When you set yourself a goal to optimize at least the top 20 results, you already have your work cut out for you.

In addition, you might want to check the aforementioned page timings and order them by average page load time to find the worst offenders.

Put those on your list of pages to optimize as well. Also, come back here after you have optimized your site as the average will change and there will be a new set of slowest pages.

4. Now Do the Same for Your Competition

After figuring out how your own site is faring in the above areas, if you still have energy, you might want to engage in some competitor analysis. That means, taking a handful of your closest competitors (business wise or in the search results) and put them through the same process.

Why?

Because speed might be something that you can beat them at. Studies have shown that people are likely to go to a competitor website if their first choice takes too long.

In addition to that, page loading speed might be the thing that puts you above your competitors in the SERPs. Since the majority of clicks go to the top Google results, that can never be a bad thing. For that reason, don’t forget to speed test the competition.

How to Use the Speed Test Results

Alright, by now you should possess a lot of information about your site’s speed profile. Now is the question, what do you do with it? Let’s talk about that quickly.

Focus on Real-Life Improvements

While many of the speed testing tools give you ratings and percentages, it’s important that you don’t concentrate on these scores. It’s possible to have a lot of green lights but still provide an abysmal user experience.

Instead, focus on what your visitors really care about: how many seconds it takes to load your pages. If you can improve that, it will make the most impact and also automatically lead to better scores. So, forget about the feel-good metrics and concentrate on producing real-life results.

How to do that? I’m glad you asked.

Fix Sitewide Problems First

When trying to speed up your WordPress website, it’s best to first focus on factors that affect all parts of it. By fixing general shortcomings, you can improve the page loading speed of all pages at once. Doing so will make the biggest difference for the largest share of visitors.

Examples of measures you can take in this area include:

• Changing your hosting provider
• Updating your PHP version
• Cleaning up your database
• Cleaning up your site
• Enabling Gzip compression
• Optimizing Images

All of this will affect your site as a whole, leading to great improvements.

After That, Focus on Single Pages

When you have taken measures to improve your site in general, you can then go ahead and deal with single pages. If your tests showed that some of the most important ones have bigger problems, it’s time to dive into the waterfall diagram and find out who is the culprit.

It could be an image that is too large, a remote script that would be better off hosted locally or any other of the many files that go into a page. Each instance is different, therefore, the solutions will vary. Improve one page after the other in the order of importance and you will make a big difference in the end.

Final Thoughts on How to Speed Test Your Website

Learning how to test your website for loading speed is a helpful skill in creating better, more user-friendly sites. The influence of page loading speed on website success is something many people underestimate. Only having proper data will allow you to take the right action in this area.

Above, you have gotten a first-rate education on performing a speed test on your WordPress site. You have learned what goes into loading a web page, important metrics for page loading speed and tools to measure them. You now also know how to apply that knowledge to your own site to make it faster.

The above should be enough to give your website a significant speed bump. When you do that, chances are good that it will improve the rest of your success metrics as well.

How do you speed test your website? Any additional comments, tips or tools to share? Please do so in the comments section below.

The post How to Speed Test Your Website (Metrics, Tools, Optimization Tips) appeared first on Torque.

Fortunately, what ‘quality’ means has been distilled into the WordPress coding standards. These will help you ensure that your code is up to par, and give you a roadmap of sorts to follow when working on important projects.

In this post, we’ll look at the WordPress coding standards in more detail. We’ll also introduce the GitHub version of the standards, and explain why you may want to use them as your go-to resource. However, before that, let’s talk a little about code quality!

A Quick (and Friendly) Lecture on Striving for High-Quality Code

We’re willing to bet that you’re someone who takes immense pride in what they do. At the very least, if you’re calling yourself a developer, it’s a smart idea to act like one. You may have the mystique-enhancing hoodie, a Newton’s cradle, and a myriad of other cliches at hand, but can you say that your coding quality is at a level matching your ambition?

The reality is that no matter where you’re at, there will always be improvements you can make. In a nutshell, your attempts to deliver the best work possible will usually take you through the following cycle:

1. You identify (or have identified) some aspect of your code that’s not meeting your standards.
2. Through a period of learning and implementation, you improve your ability.
3. You identify another area of improvement you could make.

Imagine a bell curve, with your worst skills plotted to the left, and your best to the right. You should constantly be looking towards the left, and picking the shakiest elements of your coding to work on.

This will shift the whole bell curve to the right, and cause other aspects to become the new ‘worst’. This practice is called the ‘Inchworm’ technique and serves as a disciplined way of constantly evolving your abilities. The best news is that WordPress developers have an advantage when it comes to implementing this technique.

The Measures WordPress Takes to Shepherd You into Strong Coding Practices

Striving to develop your poorer areas is a noble goal, and a helping hand along the way will always be welcome. Naturally, WordPress’ core developers have a vested interest in making sure the community has a shallow learning curve when creating for the platform. If WordPress were difficult to code for, it wouldn’t be adopted by nearly as many developers.

For starters, consider how WordPress itself is coded. It’s practically sewn together by hooks, meaning that you can implement basic functionality across every project, without introducing any esoteric issues. You can also see this developer-friendly stance in how templates are used to piece together layouts, and even throughout the comprehensive comments contained within each PHP file.

In fact, WordPress has such a solid reputation in this area that regular users often crack open a code editor and tinker in their own sites’ back ends. There’s also the official Codex, which is full of reference material on how to achieve practically anything within WordPress.

As for developers, perhaps the only document you’ll need to ensure your code is high quality (and keep potential issues to a minimum) – is the official coding standards.

Introducing WordPress’ Official Coding Standards

The Core Contributor Handbook offers plenty to digest on the matter of WordPress core development. However, it also contains the official coding standards, which is what we’ll be focusing on here.

As you may have gathered, these standards contain the guidelines for committing code to WordPress’ core. Although we’ve talked about why they shouldn’t necessarily apply to theme and plugin development, they’ll still be helpful in those situations too.

In short, you’ll use the official standards to write code that validates and introduces no basic errors. Let’s quickly go over each set quickly:

• PHP. This large collection of standards, relating to indentation, brace style, formatting SQL statements, and much more, is arguably the most important set for WordPress users.
• HTML. Given the relative reduction in complexity, HTML has a few less entries than the other languages do. Even so, important elements such as indentation and self-closing tags are represented here.
• CSS. Next to PHP, CSS is the most important language for styling. There’s plenty to look over in this set, although there’s more general instruction than specific elements.
• JavaScript. JavaScript is understandably the most dense of all the coding standards here, due to its fledgling implementation in WordPress. In fact, you can consider this to be a mirror of the PHP coding standards, especially as it grows in prominence down the line.

Once you’ve spent a little time with them, you’ll notice that even the most comprehensive of these standards are still easily digestible. This is good news, as it means you’ll be able to implement them without wading through tons of instructions.

Finding an Up-to-Date Version of the Coding Standards (and Making Sure You Stick to Them)

Before we finish up, we’d like to make you aware of GitHub – specifically the WordPress Coding Standards page. This is similar to Make WordPress’ standards, but there are a few additions representing more current changes, which aren’t outlined on the official site.

In our opinion, this makes the GitHub version the de facto official coding standards. Version 1.0 was released in July 2018, and has one key difference – it’s essentially a collection of PHP_CodeSniffer rules (or ‘sniffs’). If you’re unfamiliar with this tool, it tokenizes your PHP, CSS, and JavaScript, and detects any differences or violations between your code and the standards.

If you’re following the standards for core contribution (as you should be), leveraging these sniffs is practically essential. We recommend reading through the GitHub documentation and picking your preferred installation method. Then you can leverage some of the additional sniffs available, such as those for inline documentation, and you’ll have access to some best practices not included within the core standards.

Conclusion

We can use an old programmer’s paradigm to describe how you should approach every aspect of your coding: “Garbage In, Garbage Out.” Ultimately, if the quality of your code is any less than top-notch, you’re doing yourself and your users a disservice.

Fortunately, WordPress has a documented set of standards any developer can follow to ensure that their code is worthy of inclusion. By following these standards, you all but guarantee that the dedicated review teams will approve your commits. This gives you a head start on beginning your next project.

Do you have any questions about how to use the WordPress coding standards? Let us know in the comments section below!

The post The WordPress Coding Standards: An Introduction appeared first on Torque.