Category Archives: Wordpress Beginners

How to Fix Render-Blocking JavaScript and CSS in WordPress

Do you want to eliminate render-blocking JavaScript and CSS in WordPress? If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scrips and CSS. In this article, we will show you how to easily fix render blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

How to fix render blocking JavaScript and CSS in WordPress

What is Render-Blocking JavaScript and CSS?

Every WordPress site has a theme and plugins that add JavaScript and CSS files to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page.

A user’s browser will have to load those scripts and CSS before loading rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.

These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.

Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

What is Google PageSpeed Score?

Google PageSpeed Insights is an online tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your site’s page load time.

It shows you a score based on the number of rules that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).

Do You Really Need the Perfect “100” Google PageSpeed Score?

The purpose of Google PageSpeed insights is to provide you guidelines to improve speed and performance of your website. You are not required to follow these rules strictly.

Remember that speed is only one of the many SEO metrics that help Google determine how to rank your website. The reason speed is so important is because it improves user experience on your site.

A better user experience requires a lot more than just speed. You also need to offer useful information, better user interface, and engaging content with text, images, and videos.

Your goal should be to create a fast website that offers great user experience.

We recently redesigned WPBeginner, and we kept our focus on speed as well as improving user experience.

We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive to do as much as you can and then don’t worry about the rest.

Having said that, let’s take a look at what you can do to fix render blocking JavaScript and CSS in WordPress.

We will cover two methods that will fix the render blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.

1. Fix Render Blocking Scripts and CSS with Autoptimize

This method is simpler and recommended for most users.

First thing you need to do is install and activate the Autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

Autoptimize Settings

You can start by checking the box next to JavaScript Options and CSS Options and then click on the save changes button.

You can now test your website using PageSpeed tool. If there are still render blocking scripts, then you need to come back to the plugin’s settings page and click on ‘Show Advanced Settings’ button at the top.

Advanced JavaScript Options

Here you can allow plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.

Next, scroll down to CSS option and allow plugin to aggregate inline CSS.

Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.

Once you are done, go ahead and check your website again with the PageSpeed tool.

Make sure that you thoroughly test your website to see that nothing is broken by optimizing your JavaScripts or CSS.

How does it work?

Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.

This allows you to fix the render blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.

2. Fix Render Blocking JavaScript using W3 Total Cache

This method requires a little more work and is recommended for users already using W3 Total Cache plugin on their website.

First you will need to install and activate the W3 Total Cache plugin. If you need help, then see our guide on how to install and setup W3 Total Cache for Beginners.

Next, you need to visit Performance » General Settings page and scroll down to Minify section.

W3 Total Cache enable minify

First you need to check ‘Enable’ next to Minify option and then select ‘Manual’ for minify mode option.

Click on the save all settings button to store your settings.

Next, you need to add the scripts and CSS that you want to minify.

You can get the URLs of all the scripts and stylesheets that are render blocking from Google PageSpeed Insights tool.

Under the suggestions where it says: ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, click on ‘Show how to fix’. It will show you the list of scripts and stylesheets.

Get JavaScript and Stylesheet URLs from Google PageSpeed tool

Take your mouse over to a script and it will show you the full URL. You can select this URL and then use your keyboard’s CTRL+C (Command+C on Mac) keys to copy the URL.

Now head over to your WordPress admin area and go to Performance » Minify page.

First you need to add JavaScript files that you want to be minified. Scroll down to JS section and then under the ‘Operations in areas’ set the embed type to ‘Non-blocking async’ for the <head> section.

Add scripts to minify

Next, you need to click on the ‘Add script’ button and then start adding script URLs that you copied from Google PageSpeed tool.

Once you are done, scroll down to CSS section and then click on the ‘Add a stylesheet’ button. Now start adding stylesheet URLs you copied from Google PageSpeed tool.

Add stylesheets to minify

Now click on the ‘Save settings and purge cache’ button to store your settings.

Visit the Google PageSpeed tool and test your website again.

Make sure that you also test your website thoroughly to see that everything is working fine.

Troubleshooting

Depending on how the plugins and your WordPress themes uses JavaScript and CSS, it could be quite challenging to completely fix all render blocking JavaScript and CSS issues.

While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break your plugins or they could behave unexpectedly.

Google may still show you certain issues like optimizing CSS delivery for above the fold content. Autoptimize allows you to fix that by manually adding inline CSS required to display the above fold area of your theme.

However, it could be quite difficult to find out what CSS code you will need to display above the fold content.

That’s all, we hope this article helped you learn how to fix render blocking JavaScript and CSS in WordPress.

How to Disable Trackbacks and Pings on Existing WordPress Posts

Do you want to disable trackbacks and pings on your old WordPress posts? Trackbacks and pingbacks allow blogs to notify each other that they have linked to a post. However, today it is mainly used by spammers to send trackbacks from spam websites. In this article, we will show you how to disable trackbacks and pings on existing WordPress posts.

How to Disable Trackbacks and Pings on Existing WordPress Posts

Why Disable Trackbacks and Pings in WordPress?

In the early days of blogging, trackbacks and pingbacks were introduced as a way for blogs to notify each other about links.

Let’s suppose you write an article and add a link to a post on your friend’s blog. Your blog will then automatically send a ping to their blog.

This pingback will then appear in their blog’s comment moderation queue with a link to your website.

However, today this feature is mostly used by spammers to send thousands of fake trackbacks and pings. Even if you are using Akismet, some of these trackbacks may still get into your moderation queue.

WordPress allows you to turn off this feature. You can do that by going toSettings » Discussion page and then uncheck the box next to ‘Allow link notifications from other blogs (pingbacks and trackbacks) on new articles’option.

Disable pings on all new articles

However, it only turns them off on any new articles that you publish. All your old posts will still have trackbacks and pingbacks enabled. WordPress will even add trackbacks to those posts whenever you link them on your own blog. See our guide on how to disable self pingbacks in WordPress.

Let’s take a look at how to easily disable trackbacks and pings on existing WordPress posts.

Disable Trackbacks and Pings for WordPress Posts

First you need to visit Posts » All Posts page and then click on the Screen Options button at the top right corner of the screen.

Show more posts per page

Now enter 999 next to ‘Number of items per page’ option and then click on apply button.

This will reload the post’s list, and it will now show upto 999 posts on the same page.

Next, you need to select all posts by checking the box next to title label.

Select all posts on the page

After that you need to select ‘Edit’ from Bulk Actions drop down and click on the ‘Apply’ button.

Bulk edit all selected posts

WordPress will now show you a bulk edit box with all posts on the page selected.

In the bulk edit box, you need to look for the pings option and then change it to ‘Do not allow’.

Do not allow pings

Next, you just need to click on the update button to save your changes.

WordPress will now update and turn off pings on all selected posts.

If you have more than 999 posts on your WordPress site, then you need to go to the next page and repeat the process.

We hope this article helped you learn how to easily disable trackbacks and pings on existing WordPress posts.

The Ultimate Guide to Boost WordPress Speed & Performance

Do you want to speed up your WordPress site? Fast loading pages improve user experience, increase your pageviews, and help with your WordPress SEO. In this article, we will share the most useful WordPress speed optimization tips to boost WordPress performance and speed up your website.

Speed up WordPress - Ultimate Guide

Unlike other “X best WordPress caching plugin” lists or generic “X tips to speeding up WordPress” tutorials, this article is a comprehensive guide to WordPress performance optimization.

We include everything from why speed is important, what slows down your WordPress site to actionable steps that you can take to improve your WordPress speed immediately.

To make it easy, we have created a table of contents to help you navigate through our ultimate guide to speeding up your WordPress site.

Table of Contents

Basics of WordPress Performance

Speeding Up WordPress in Easy Steps (No Coding)

WordPress Performance Optimization Best Practices

Fine-Tuning WordPress for Speed (Advanced)

Why Speed is Important for Your WordPress Site?

Studies show that from 2000 to 2016, the average human attention span has dropped from 12 seconds to 7 seconds.

What does this mean for you as a website owner?

You have very little time to show users your content and convince them to stay on your website.

A slow website means users will potentially leave your website before it even loads.

According to a StrangeLoop case study that involved Amazon, Google, and other larger sites, a 1 second delay in page load time can lead to 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction.

How slow websites cost you money

On top of that, Google and other search engines have already started penalizing slower websites by pushing them down in the search results which means lower traffic for slow websites.

To sum it all up, if you want more traffic, subscribers, and revenue from your website, then you must make your WordPress website FAST!

How to Check Your WordPress Website Speed?

Often beginners think that their website is OK just because it doesn’t feel slow on their computer. That’s a HUGE mistake.

Since you frequently visit your own website, modern browsers like Chrome store your website in cache and automatically prefetch it as soon as you start typing an address. This makes your website load almost instantly.

However, a normal user who is visiting your website for the first time may not have the same experience.

In fact, users in different geographical locations will have a completely different experience.

This is why we recommend that you test your website speed using a tool like Pingdom.

It is a free online tool that allows you to test your website’s speed from different locations.

Pingdom site speed tool

After you run your website speed test, you might be wondering what’s a good website speed that I should aim for?

A good page load time is under 2 seconds.

However, the faster you can make it, the better it is. A few milliseconds of improvements here and there can add up to shaving off half or even a full second from your load time.

[Back to Top ↑]

What Slows Down Your WordPress Website?

Your speed test report will likely have multiple recommendations for improvement. However most of that is technical jargon which is hard for beginners to understand.

However understanding what slows down your website is key to improving performance and making smarter long-term decisions.

The primary causes for a slow WordPress website are:

  • Web Hosting – When your web hosting server is not properly configured it can hurt your website speed.
  • WordPress Configuration – If your WordPress site is not serving cached pages, then it will overload your server thus causing your website to be slow or crash entirely.
  • Page Size – Mainly images that aren’t optimized for web.
  • Bad Plugins – If you’re using a poorly coded plugin, then it can significantly slow down your website.
  • External scripts – External scripts such as ads, font loaders, etc can also have a huge impact on your website performance.

Now that you know what slows down your WordPress website, let’s take a look at how to speed up your WordPress website.

Importance of Good WordPress Hosting

Your WordPress hosting service plays an important role in website performance. A good shared hosting provider like BlueHost or Siteground take the extra measures to optimize your website for performance.

However, on shared hosting you share the server resources with many other customers. This means that if your neighboring site gets a lot of traffic, then it can impact the entire server performance which in turn will slow down your website.

On the other hand, using a managed WordPress hosting service give you the most optimized server configurations to run WordPress. Managed WordPress hosting companies also offer automatic backups, automatic WordPress updates, and more advanced security configurations to protect your website.

We recommend WPEngine as our preferred managed WordPress hosting provider. They’re also the most popular one in the industry. (See our special WPEngine coupon).

For enterprise WordPress hosting, we recommend using Pagely because they’re the best in business.

[Back to Top ↑]

Speeding Up WordPress in Easy Steps (No Coding)

We know that making changes to your website configuration can be a terrifying thought for beginners, especially if you’re not a tech-geek.

But don’t worry, you’re not alone. We have helped thousands of WordPress users improve their WordPress performance.

We will show you how you can speed up your WordPress site with just a few clicks (no coding required).

If you can point-and-click, you can do this!

Install a WordPress Caching Plugin

WordPress pages are “dynamic.” This means they’re built on the fly every time someone visits a post or page on your website. To build your pages, WordPress has to run a process to find the required information, put it all together, and then display it to your user.

This process involves a lot of steps, and it can really slow down your website when you have multiple people visiting your site at once.

That’s why we recommend every WordPress site use a caching plugin. Caching can make your WordPress site anywhere from 2x to 5x faster.

Here’s how it works: Instead of going through the whole page generation process every time, your caching plugin makes a copy of the page after the first load, and then serves that cached version to every subsequent user.

How caching works

As you can see in the graphics above, when a user visits your WordPress site, which is built using PHP, your server retrieves information from a MySQL database and your PHP files, and then it’s all put together into a HTML content which is served served to the user. It’s a long process, but you can skip a lot of it when you use caching instead.

There are a lot of caching plugins available for WordPress, but we recommend using the WP Super Cache plugin. Check out our step by step guide on how to install and setup WP Super Cache on your WordPress site. It’s not difficult to set up, and your visitors will notice the difference.

Note: If you’re using a managed WordPress hosting provider, then you don’t need a caching plugin because they take care of it for you.

[Back to Top ↑]

Optimize Images for Speed

Optimize images for the web

Images bring life to your content and help boost engagement. Researchers have found that using colored visuals makes people 80% more likely to read your content.

But if your images aren’t optimized, they could be hurting more than helping. In fact, non-optimized images are one of the most common speed issues we see on beginner websites.

Before you upload a photo directly from your phone or camera, we recommend that you use photo editing software to optimize your images for web.

In their original formats, these photos can have huge file sizes. But based on the image file format and the compression you choose in your editing software, you can decrease your image size by up to 5x.

At WPBeginner, we only use two image formats: JPEG and PNG.

Now you might be wondering: what’s the difference?

Well, PNG image format is uncompressed. When you compress an image it loses some information, so an uncompressed image will be higher quality with more detail. The downside is that it’s a larger file size, so it takes longer to load.

JPEG, on the other hand, is a compressed file format which slightly reduces image quality, but it’s significantly smaller in size.

So how do we decide which image format to choose?

  • If our photo or image has a lot of different colors, then we use JPEG.
  • If it’s a simpler image or we need a transparent image, then we use PNG.

The majority of our images are JPEGs.

Below is a comparison chart of the file sizes and different compression tool that we could have used for the StrangeLoop image used above.

Image Speed Chart

As you can see in the chart, the image format you use can make a HUGE difference on your website performance.

For details on exactly how to optimize your images using Photoshop and other popular editing tools, without sacrificing quality, see our step by step guide on how to save images optimized for web.

[Back to Top ↑]

WordPress Performance Optimization Best Practices

After installing a caching plugin and optimizing your images, you’ll notice your site will start loading a lot faster.

But if you really want to keep your website as fast as possible, you’ll need to use the best practices listed below.

These tips aren’t too technical, so you don’t need to know any code to implement them. But using them will prevent common problems that will slow down your website.

Keep Your WordPress Site Updated

Keep your WordPress site up to date

As a well maintained open source project, WordPress is updated frequently. Each update will not only offer new features, but also fix security issues and bugs. Your WordPress theme and plugins may have regular updates, too.

As a website owner, it’s your responsibility to keep your WordPress site, theme, and plugins updated to the latest versions. Not doing so may make your site slow and unreliable, and make you vulnerable to security threats.

For more details on the importance of updates, see our article on why you should always use the latest WordPress version.

[Back to Top ↑]

Use Excerpts on Homepage and Archives

Using excerpts

By default, WordPress displays the full content of each article on your homepage and archives. This means your homepage, categories, tags, and other archive pages will all load slower.

Another disadvantage of showing full articles on these pages is that users don’t feel the need to visit the actual article. This can reduces your pageviews, and the time your users spend on your site.

In order to speed up your loading times for archive pages, you can set your site to display excerpts instead of the full content.

You can navigate to Settings » Reading and select “For each article in a feed, show: Summary” instead of “Full Text.”

Display excerpts instead of full text to boost WordPress speed

For more details on the pros and cons of displaying summaries, see our article on full post vs summary (excerpt) in your WordPress archive pages.

[Back to Top ↑]

Split Comments into Pages

Paginated comments

Getting lots of comments on your blog posts? Congratulations! That’s a great indicator of an engaged audience.

But the downside is, loading all those comments can impact your site’s speed.

WordPress comes with a built-in solution for that. Simply go to Settings » Discussion and check the box next to the “Break comments into pages” option.

Break comments into pages in WordPress

For more detailed instructions, see our guide on how to paginate comments in WordPress.

[Back to Top ↑]

Use a Content Delivery Network (CDN)

Remember how we mentioned above that users in different geographical locations may experience different loading times on your site?

That’s because the location of your web hosting servers can have an impact on your site speed. For example, let’s say your web hosting company has its servers in the United States. A visitor who’s also in the United States will generally see faster loading times than a visitor in India.

Using a CDN, or Content Delivery Network, can help to speed up loading times for all of your visitors.

A CDN is a network made up of servers all around the world. Each server will store “static” files used to make up your website. Static files are unchanging files such as images, CSS, and JavaScript, unlike your WordPress pages which are “dynamic” as explained above.

When you use a CDN, every time a user visits your website they are served those static files from whichever server is closest to them. Your own web hosting server will also be faster since the CDN is doing a lot of the work.

You can see how it works in this infographic.

What is a CDN

We use MaxCDN on all our projects, including here on WPBeginner. It works well with WordPress websites and complements your existing WordPress caching plugins for even faster loading times. See our guide on how to install and setup WordPress CDN solution MaxCDN to get started.

[Back to Top ↑]

Don’t Upload Videos Directly to WordPress

YouTube

You can directly upload videos to your WordPress site, and it will automatically display them in an HTML5 player…

But you should NEVER do that!

Hosting videos will cost you bandwidth. You could be charged overage fees by your web hosting company, or they may even shut down your site altogether, even if your plan includes “unlimited” bandwidth.

Hosting videos also increases your backup sizes tremendously, and makes it difficult for you to restore WordPress from backup.

Instead, you should use a video hosting service like YouTube, Vimeo, DailyMotion, etc., and let them take care of the hard work. They have the bandwidth for it!

WordPress has a built-in video embed feature, so you can copy and paste your video’s URL directly into your post and it will embed automatically.

Find out more details on how it works in our guide on embedding videos in WordPress.

[Back to Top ↑]

Use a Theme Optimized For Speed

Choosing a theme optimized for speed

When selecting a WordPress theme for your website, it’s important to pay special attention to speed optimization. Some beautiful and impressive-looking themes are actually poorly coded and can slow your site way down.

It’s usually better to go with a simpler theme and use quality plugins to get the features you need, than to choose a theme that’s bloated with complex layouts, flashy animations, and other unnecessary features.

Premium WordPress theme shops like StudioPress, Themify, and Array Themes offer themes that are well coded and optimized for speed. You can also check out our article on selecting the perfect WordPress theme for advice on what to look for.

Before you activate your new theme, see our guide on how to properly switch your WordPress theme for a smooth transition.

[Back to Top ↑]

Use a Faster Slider Plugin

Faster slider

Sliders are another common web design element that can make your website slow.

Even if your images are all optimized as described above, a poorly coded slider plugin will mean all your work is wasted.

We compared the best WordPress slider plugins for performance and features, and Soliloquy was the fastest by far.

Here’s how it compares to other popular slider plugins.

Slider Plugin Page Load time Requests Page size
Soliloquy 1.34 secs 26 945 KB
Nivo Slider 2.12 secs 29 1 MB
Meteor 2.32 secs 27 1.2 MB
Revolution Slider 2.25 secs 29 1 MB
LayerSlider 2.12 secs 30 975 KB

[Back to Top ↑]

Use a Faster Gallery Plugin

If you have a photography website or a portfolio, then you’ll probably want to use an image gallery plugin to display your photos.

It’s really important that you use a WordPress gallery plugin that is optimized for speed.

We recommend using Envira Gallery, which is the best WordPress gallery plugin in the market. It allows you to create beautiful image galleries that are lightning fast to load.

We tested its speed compared to a couple of other popular gallery plugins, and found that Envira Galley is almost twice as fast:

Gallery Plugin Page Load time Requests Page size
Envira Gallery 1.08 secs 24 1MB
Foo Gallery 1.89 secs 23 357.1KB
NextGEN 1.88 secs 33 518KB

[Back to Top ↑]

Fine-Tuning WordPress for Speed (Advanced)

By using the WordPress optimization best practices and basic speed tips listed above, you should see a big improvement in your site’s loading times.

But every fraction of a second counts. If you want to get the very fastest speed possible, you’ll need to make a few more changes.

The following tips are a little more technical, with some requiring you to modify your site files or have a basic understanding of PHP. You’ll want to make sure to backup your site first just in case.

Split Long Posts into Pages

Split long posts into pages

Readers tend to love blog posts that are longer and more in-depth. Longer posts even tend to rank higher in search engines.

But if you’re publishing long form articles with lots of images, it could be hurting your loading times.

Instead, consider splitting up your longer posts into multiple pages.

WordPress comes with built-in functionality to do that. Simply add the <!––nextpage––> tag in your article where you want to split it into next page. Do that again if you want to split the article on to the next page as well.

For more detailed instructions, see our tutorial on post pagination – how to split WordPress posts into multiple pages.

[Back to Top ↑]

Reduce External HTTP Requests

Cross domain http requests

Many WordPress plugins and themes load all kinds of files from other websites. These files can include scripts, stylesheets, and images from external resources like Google, Facebook, analytics services, and so on.

It’s ok to use a few of these. Many of these files are optimized to load as quickly as possible, so it’s faster than hosting them on your own website.

But if your plugins are making a lot of these requests, then it could slow down your website significantly.

You can reduce all these external HTTP requests by disabling scripts and styles or merging them into one file. Here’s a tutorial on how to disable your plugins’ CSS files and JavaScript.

[Back to Top ↑]

Reduce Database Calls

WordPress database calls

Note: This step is a little more technical and will require basic knowledge of PHP and WordPress template files.

Unfortunately, there are a lot of poorly coded WordPress themes out there. They ignore WordPress standard practices and end up making direct database calls, or too many unnecessary requests to the database. This can really slow down your server by giving it too much work to do.

Even well-coded themes can have code that makes database calls just to get your blog’s basic information.

In this example, every time you see <?php, that’s the start of a new database call:

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php language_attributes(); ?>">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?> 
charset=<?php bloginfo('charset'); ?>" />

You can’t blame theme developers for that. They simply have no other way to find out what language your site is in.

But if you are customizing your site using a child theme, then you can replace these database calls with your specific information in order to reduce all those database calls.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Review your parent theme for instances like this that can be easily replaced with static information.

[Back to Top ↑]

Optimize WordPress Database

WordPress database optimization

After using WordPress for a while, your database will have lots of information that you probably don’t need any more. For improved performance, you can optimize your database to get rid of all that unnecessary information.

This can be easily managed with the WP-Sweep plugin. It allows you to clean your WordPress database by deleting things like trashed posts, revisions, unused tags, etc. It will also optimize your database’s structure with just a click.

See our guide on how to optimize and clean up your WordPress database for improved performance.

[Back to Top ↑]

Limit Post Revisions

Revisions in WordPress

Post revisions take up space in your WordPress database. Some users believe that revisions can also affect some database queries run by plugins. If the plugin doesn’t specifically exclude post revisions, it might slow down your site by searching through them unnecessarily.

You can easily limit the number of revisions WordPress keeps for each article. Simply add this line of code to your wp-config.php file.

define( 'WP_POST_REVISIONS', 4 );

This code will limit WordPress to only save your last 4 revisions of each post or page, and discard older revisions automatically.

[Back to Top ↑]

Disable Hotlinking and Leaching of Your Content

Prevent image theft in WordPress

If you’re creating quality content on your WordPress site, then the sad truth is that it’ll probably get stolen sooner or later.

One way this happens is when other websites serve your images directly from their URLs on your website, instead of uploading them to their own servers. In effect, they’re stealing your web hosting bandwidth, and you don’t get any traffic to show for it.

Simply add this code to your .htaccess file to block hotlinking of images from your WordPress site.

#disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?wpbeginner.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L] 

Note: Don’t forget to change wpbeginner.com with your own domain.

How to Remove the Welcome Panel in WordPress Dashboard

Do you want to remove the welcome panel in your WordPress dashboard? The welcome panel is a box added to the dashboard page of your WordPress admin area. It contains shortcuts to perform different tasks and helps new users find their way around. In this article, we will show you how to remove the welcome panel in WordPress dashboard.

Remove welcome panel in WordPress dashboard

Why Remove Welcome Panel in WordPress?

Welcome panel is a meta box added to the dashboard screen of WordPress admin area. It shows shortcuts to different sections of your WordPress site.

Welcome Panel

The purpose of the welcome panel is to help beginners find their way around WordPress.

However as you become more familiar to all these locations, this panel will become less useful for you.

Having it on the screen, pushes down other important dashboard widgets and make them less noticeable.

Let’s see how you can easily get rid of the welcome panel from your WordPress dashboard screen.

Removing Welcome Panel from WordPress Dashboard

There are multiple ways to hide and even completely remove the welcome panel.

The easiest way to remove it is by simply clicking on the Dismiss button at the top right corner of the panel.

Dismiss welcome panel in WordPress dashboard

You can also remove the welcome panel by clicking on the Screen Options button at the top right corner of the screen.

This will bring a fly down menu. You need to uncheck the checkbox next to ‘Welcome’ option.

Remove welcome panel using Screen Options in WordPress

Both methods mentioned above will hide the welcome panel. You can access it again by clicking on the Screen Options button and checking the box next to Welcome option.

However if you want to completely remove the welcome panel even from the Screen Options, then that’s also possible.

This method requires you to add code to your WordPress site. If you haven’t done this before, then take a look at our guide on pasting snippets from the web into WordPress.

You will need to add this code to your theme’s functions.php file or a site-specific plugin.

1 remove_action('welcome_panel', 'wp_welcome_panel');

This code simply removes the action that adds the welcome panel to the admin dashboard.

You can now visit the dashboard screen and click on the Screen Options menu. You will notice that the welcome panel option will no longer be available.

Welcome panel removed from dashboard and Screen Options menu

That’s all. We hope this article helped you remove the welcome panel in WordPress dashboard.

How to Display Category Descriptions in WordPress

Do you want to display category descriptions on your WordPress site? Categories allow you to easily sort content on your website. They also help users easily find content and are good for SEO. In this article, we will show you how to easily display category descriptions in WordPress.

How to display category description in WordPress

Adding Category Descriptions in WordPress

WordPress comes with two built-in taxonomies called categories and tags. These taxonomies allow you to easily sort your content into different topics.

When used correctly, categories and tags can also be very helpful in improving your WordPress SEO.

WordPress allows you to add descriptions for your categories. However, many users don’t notice it because they create categories when writing a post which doesn’t let them add description.

Here is how to easily add description to your categories.

Head over to Posts » Categories page. If you are creating a new category, then you can simply enter category name and description here and then click on ‘Add new category’ button.

Add category description

If you want to add description to an existing category, then you need to click on the ‘Edit’ link below that category.

This will take you to category edit screen where you can add description for your category.

Editing a category to add description

Don’t forget to click on the ‘Update’ button to save your changes.

Repeat the process to add descriptions to all your categories. You can use the same method to add descriptions for tags as well.

Display Category Description on Category Archive Page

Most WordPress themes will automatically display the category description on the category archive pages.

Category description shown on category archive page in WordPress

However if your theme does not display category description on archive pages, then you will need to edit your theme files.

Connect to your WordPress site using an FTP client and then go to /wp-content/themes/your-current-theme/ folder.

Now you will need to locate and edit category.php file. If your theme doesn’t have category.php file, then you will need to edit archive.php file.

Copy and paste this code where you would like the category description to be displayed.

<?php 
the_archive_description( '
', '
' ); ?>

You can now save your changes and upload the file back to your website.

After that, you can visit the category archive page on your website to see the description in action.

Display Category Description in WordPress Theme

If you want to display the category description in other parts of your website, then you can also use the category_description template tag:

<?php echo category_description(3); ?>

Don’t forget to replace 3 with your own category ID.

If you want to display category description inside a single post, then you can use this code.

$catID = get_the_category();
echo category_description( $catID[0] ); 

This code simply gets all categories for the current post and then outputs the category description of the first category.

If you would like to list all your WordPress categories with a description in list format, then you can add this code in your theme’s functions.php file:

function wpb_catlist_desc() { 
$string = '<ul>';
$catlist = get_terms( 'category' );
if ( ! empty( $catlist ) ) {
  foreach ( $catlist as $key => $item ) {
    $string .= '<li>'. $item->name . '<br />';
    $string .= '<em>'. $item->description . '</em> </li>';
  }
}
$string .= '</ul>';

return $string; 
}
add_shortcode('wpb_categories', 'wpb_catlist_desc');

This code creates a shortcode which displays all your categories and their descriptions in a plain list.

You can now use [wpb_categories] in your posts and pages. To use this shortcode inside a text widget, you will need to enable shortcodes for widgets.

List WordPress categories with description

We hope this article helped you learn how to add and display category descriptions in WordPress.

How to Add Signature or Ads after Post Content in WordPress

Do you want to add a signature or advertisement after your blog post content in WordPress? By default, WordPress does not come with an easy way to display signature or ads after post content. In this article, we will show you how to easily add signature ads after post content in WordPress.

Method 1: Display Ads After Post Content Using Plugin

First thing you need to do is install and activate the Insert Post Ads plugin.

Upon activation you need to visit Post Adverts » Settings page to configure plugin settings.

On the settings page, you need to select where you want to enable post ads. You can enable it for posts, pages, and custom post types.

Don’t forget to click on the save settings button to store your changes.

Next, you need to go to Post Adverts » Add New to create your signature or advertisement.

Simply provide a title for this particular signature or
after post ad. In the box below, paste your ad code, signature, or any HTML or text you want to display.

Next, you need to select ‘After content’ next to ‘Display the advert’ option. You also need to enter 1 in the field next to it.

Don’t forget to click on the publish button to make your ad available on your website. That’s all, your after post ad or signature is now live on your website. You can visit a post or page on your site to see it in action.

Method 2: Manually Add Signature Ads After Post Content

This method requires you to add code to your WordPress files. If you haven’t done this before, then please take a look at our beginner’s guide on adding code in WordPress.

First you need to add this code to your theme’s functions.php file or a site-specific plugin.

/ / A d d s i g n a t u r e o r a d a f t e r p o s t c o n t e n t f u n c t i o n wp b _ a f t e r _ p o s t _ c o n t e n t ( $ c o n t e n t ) { i f ( i s _ s i n g l e ( ) ) { $ c o n t e n t . = ‘ Y o u r s i g n a t u r e o r a d c o d e g o e s h e r e ‘ ;$ c o n t e n t . = ‘ Y o u r s i g n a t u r e o r a d c o d e g o e s h e r e ‘ ; } r e t u r n $ c o n t e n t ; } a d d _ f i l t e r ( ” t h e _ c o n t e n t ” , ” c u s t om _ c o n t e n t _ a f t e r _ p o s t ” ) ;

Don’t forget to replace the value of $content with your ad code, image, or signature you want to display.

You can now visit your website to see your signature ad in action.

We hope this article helped you add signature and ads after post content in WordPress.

How to Remove the Welcome Panel in WordPress Dashboard

Do you want to remove the welcome panel in your WordPress dashboard? The welcome panel is a box added to the dashboard page of your WordPress admin area. It contains shortcuts to perform different tasks and helps new users find their way around. In this article, we will show you how to remove the welcome panel in WordPress dashboard.

Why Remove Welcome Panel in WordPress?

Welcome panel is a meta box added to the dashboard screen of WordPress admin area. It shows shortcuts to different sections of your WordPress site.

The purpose of the welcome panel is to help beginners find their way around WordPress.

However as you become more familiar to all these locations, this panel will become less useful for you.

Having it on the screen, pushes down other important dashboard widgets and make them less noticeable.

Let’s see how you can easily get rid of the welcome panel from your WordPress dashboard screen.

Removing Welcome Panel from WordPress Dashboard

There are multiple ways to hide and even
completely remove the welcome panel.

The easiest way to remove it is by simply clicking
on the Dismiss button at the top right corner of the panel.

You can also remove the welcome panel by clicking on the Screen Options button at the top right corner of the screen.

This will bring a fly down menu. You need to uncheck the checkbox next to ‘Welcome’ option.

Both methods mentioned above will hide the welcome panel. You can access it again by clicking on the Screen Options button and checking the box next to Welcome option.

However if you want to completely remove the welcome panel even from the Screen Options, then that’s also possible.

This method requires you to add code to your
WordPress site.

You will need to add this code to your theme’s functions.php file or a site-pecific plugin.

r emo v e _ a c t i o n ( ‘ we l c ome _ p a n e l ‘ , ‘ wp _ we l c ome _ p a n e l ‘ ) ;

This code simply removes the action that adds the welcome panel to the admin dashboard.

You can now visit the dashboard screen and click on the Screen Options menu. You will notice that the welcome panel option will no longer be
available.

That’s all. We hope this article helped you remove the welcome panel in WordPress dashboard.

How to Improve WordPress Email Deliverability with SendGrid

Do you want to improve email deliverability from your WordPress site? Often web hosting providers don’t have properly configured mail settings, which blocks WordPress from sending emails. In this article, we will show you how to improve WordPress email deliverability with SendGrid.

The Problem with Emails in WordPress

By default, WordPress uses the PHP mail function to send out emails. Many WordPress hosting providers do not have this function configured properly. Some even block it to make sure that their servers aren’t used to send spam.

This becomes problematic for site owners because their WordPress site fails to send some or all emails.

WordPress emails are crucial for resetting passwords, sending notification emails, running an online store, getting contact form notifications, and more. If WordPress can’t send emails, you could get locked out of your site or lose customers by missing out on important notifications.

Having said that, let’s take a look at how to improve WordPress email deliverability with SendGrid (for free).

What is SendGrid?

SendGrid is an email service provider. They offer highly optimized email servers that you can use to send out your emails.

They offer both transactional email service (one-to-one emails like WordPress notices, order receipts, password resets, etc.) and email marketing services. Like all good email service providers, SendGrid spends significant resources to improve deliverability. This ensures that your WordPress emails land in your users’ inboxes, instead of being marked as spam. This is why companies like Uber, Spotify, Airbnb, Yelp, and thousands of others use SendGrid.

Sending WordPress Emails Using SendGrid

To set up SendGrid to work with your WordPress site, first you’ll need to visit the SendGrid website and sign up for an account. SendGrid is a paid service, but they also offer a free plan which allows you to send up to 12,000 emails each month.

That’s plenty for most small to medium-sized websites.

As your site grows, you can upgrade to their paid plan. It starts at $9.90 per month for up to 40,000 emails.

You can scale your pricing based on how many emails you need to send every month, but in our experience the free plan is sufficient for most folks.

Next, you need to install and activate the SendGrid WordPress plugin.

Upon activation, visit Settings » SendGrid to configure the plugin.

The plugin allows you to connect your WordPress site to SendGrid. You can do that by adding an API key or by using your SendGrid username or password.

We recommend using the API key method because it’s more secure. We will only cover the API method in this tutorial.

Start by visiting your SendGrid account dashboard and then click on Settings » API Keys

Next, you need to choose how to send mail. You can send it using the SendGrid API, or with SMTP.

The SMTP method requires Swift Mailer support. You can add it by installing and activating the Swift Mailer plugin on your WordPress site.

But you don’t need that. We recommend using the API method, since it’s easier to set up and more secure.

Go back to the Settings » SendGrid page in your WordPress dashboard. Under the Mail Settings heading, you’ll need to provide the sender name, email address, and reply-to address.

The name can be your website name, and the sending address can be your professional email address.

In other optional settings, you can choose to use email templates from SendGrid website and add their template ID in plugin settings. You can also create and use categories for emails you send through WordPress.

Don’t forget to click on the Save Changes button to store your settings.

That’s all! SendGrid will now replace the default WordPress mail function with SendGrid API, providing more reliable email service.

You can test it by performing any action that generates an email notification from WordPress. For example, you could reset your password, add a new user, or fill out your contact form.

We hope this article helped you improve your WordPress email deliverability with SendGrid.

How to Move WordPress to a New Host or Server With No Downtime

Are you looking to move your WordPress site to a new host or different server? The biggest risk when migrating a website to a new server is data loss and potential downtime. In this step by step guide, we will show you how to properly migrate your WordPress site to a new host with no downtime.

Migrate WordPress to New Server

Important: Before we start, we want to remind you that most WordPress hosting companies offer free migration services. If they don’t publicly state that, then all you have to do is ask. Usually it’s free, but some may charge a small fee.

Step 1: Choose Your New WordPress Host

If you’re stuck with a slow web host even after optimizing your WordPress site for speed, it’s time to move your WordPress site to a new host that can handle your growing traffic.

When looking for a new WordPress hosting provider, it’s important to choose carefully, so you don’t have to move again any time soon.

Here’s who we recommend:

  • For reliable shared hosting, we recommend going with Bluehost. They’re officially recommended by WordPress.org. And with our Bluehost coupon, WPBeginner users get 60% off and a free domain name.
  • If you’re looking for cloud hosting or location-specific providers, then we recommend you check out Siteground. They have data centers across 3 different continents.
  • If you’re looking for dedicated servers, then we recommend you check out InMotion Hosting. Their commercial class servers and support are amazing.

After buying your new hosting, do NOT install WordPress. We’ll do that in a later step. For now, your new web host account should be completely empty, with no files or folders in your main directory.

Step 2: Set Up Duplicator for Easy Migration

The first thing you need to do is install and activate the free Duplicator plugin on the website that you want to move.

Duplicator is a free plugin that we highly recommend. We’ve written in the past about how to use Duplicator to move your WordPress site to a new domain name without losing your SEO rankings.

However, in this article we will walk you through how to use it to migrate your WordPress site with zero downtime. The process is similar, but this guide will focus on moving your hosting, while the other guide focuses on switching to a new domain (such as from http://www.oldsite.com to http://www.newsite.com).

Once you have installed and activated Duplicator, go to the Duplicator » Packages section in your WordPress admin area.

Next, you need to click the Create New button in the top right corner.

Duplicator Packages

After that, click the Next button and follow the steps to create your package.

Create a copy of your website using Duplicator

Make sure that your scan results check out (everything should say “Good”), and then click the Build button. The process may take several minutes to complete, so leave the tab open as it works.

Duplicator scan results

Once the process is complete, you need to click on both the Installer and then the Archive buttons to download the package. You will need both files.

Download Duplicator package

The archive file is a copy of your site, and the installer file will automate the installation process for you.

Step 3: Import Your WordPress Site to Your New Host

Now that you have downloaded both the archive and installer files, the next step is to upload them to your new web host.

You can do this by connecting to your new web host using FTP. If you’ve never done this before, check out our beginner’s guide to uploading files via FTP to WordPress.

Note: When setting up your FTP client to connect to your new web host, keep in mind that your domain name still points to your old web host. That means you’ll need to enter the IP address of your new host instead of your domain. This is to ensure that these files go to the new host rather than the old host.

Using your FTP client, upload both installer.php file and your archive .zip file to the root directory of your website. This is usually /username/public_html/ or /username/public_html/example.com where example.com is your domain name.

If you’re not sure, just ask your web hosting company.

Make sure that your root directory is completely empty. If you have WordPress installed in your root directory, then you need to delete WordPress first.

Step 4: Change The Hosts File to Prevent Downtime

Once you’ve uploaded both files to your new host, you need to access the installer.php file in a browser.

The file can be accessed using a URL like this:

http://www.example.com/installer.php

However, the problem is this URL will take you to your old web host, and you will get a 404 error. This is because your domain name is still pointing to your old web host.

Normally, folks will tell you to change your domain nameservers and point to your new host. However, that will result in your users seeing a broken website as you migrate it.

We’ll show you how you can access your new site temporarily on your computer, without affecting your old site.

This is done with a hosts file on your computer.

The hosts file maps domain names to specific IP addresses. In this step, we will show you how to add an entry for your domain name in the hosts file so that it points to your new host, but only when using your computer.

Making these changes will allow you to access the files on your new host using your own domain name, while the rest of the world will still be accessing your site from the old host. This ensures 100% uptime.

The first thing you need to do is find the IP address of your new web hosting server. To find this, you need to log into your cPanel dashboard and click on expand stats link in the left-hand sidebar. This will expand the sidebar showing you information about the status of your server. The information you need to copy is the Shared IP Address.

Finding your server's ip address in cPanel

In the next step, Windows users need to go to Programs » All Programs » Accessories, right click on Notepad and select Run as Administrator. A Windows UAC prompt will appear, and you need to click on Yes to launch Notepad with administrator privileges.

On the Notepad screen, go to File » Open and then go to C:\Windows\System32\drivers\etc. Select hosts file and open it.

Mac users will need to open the Terminal app and enter this command to edit hosts file:

sudo nano /private/etc/hosts

For both Windows and Mac users, at the bottom of the hosts file, you need to enter the IP address you copied and then enter your domain name. Like this:

192.168.1.22 http://www.example.com

Make sure that you replace the IP address with the one you copied from cPanel, and example.com with your own domain name. Save your changes, and you can now access your files on the new host using your domain name on your computer.

Important: Don’t forget to undo the changes you made to hosts file after you have finished the migration (step 5).

Step 5: Begin the Duplicator Migration Process

Now we’re ready to run the installer. Navigate to this address in your browser window, replacing example.com with your domain name:

http://www.example.com/installer.php

If you have not already created a database on your new host, then it is time for you to create a database in cPanel. Be sure to make note of the database username and password.

Once you have created the database, you will need to enter the database information in the fields below and then click on the Test Connection button.

Test your database connection

If the installer fails to connect to your database, then check the values you entered above and make sure they are correct.

Once you have successfully connected to your database, scroll down to read the warnings and notices and check the box confirming you’ve read them. Then click the Run Deployment button.

Run deployment

The installer will now import your database. The process may take several minutes, so keep the tab open as it works.

In step 2 of the installer, you’ll be asked to verify your old and new URL paths. Make sure it’s accurate and click Run Update to update your URLs.

In the final step, you can complete the process and verify that everything is working correctly by clicking the buttons in order.

Duplicator installer final steps

Important: Now you can remove the changes you made to your hosts file in step 4.

Step 6: Update Your Domain

At this point, you’ve created a complete copy of your WordPress database and files on your new hosting server. But your domain still points to your old web hosting account.

To update your domain, you need to switch your DNS nameservers. This ensures that your users are taken to the new location of your website when they type your domain into their browsers.

If you registered your domain with your hosting provider, then it’s best to transfer the domain to the new host. If you used a domain registrar like Godaddy, Namecheap, etc, then you need to update your nameservers.

You will need the nameserver information from your new web host. This is usually a couple of URLs that look like this:

ns1.hostname.com
ns2.hostname.com

For the sake of this guide, we will be showing you how to change DNS nameservers with GoDaddy. Depending on your domain registrar or web host, the screenshots may not reflect the setup on your registrar or web host. However the basic concept is the same.

Just look for domain management area and then look for nameservers. If you need assistance with updating your nameservers, you can ask your web hosting company.

First you need to login to your Godaddy account and then click on the launch button next to domains.

Launch domains

On the next screen, click on your domain name. You will see your domain details, along with your nameservers. You need to click on the manage link under the nameservers.

Manage nameservers

On the next screen, you will see a link to enter custom nameservers. Clicking on the link will open a form where you can enter your custom DNS nameservers.

Entering nameservers

Save your changes and you’re done.

You have successfully changed the nameservers. DNS changes can take 4 – 48 hours to propagate for all users.

Now since you have the same content on your old host and the new host, your users wouldn’t see any difference. Your WordPress migration will be seamless with absolutely no downtime.

To be on the safe side, you can wait to cancel your old hosting account until 7 days after your migration.

We hope that this step by step guide helped you move WordPress to your new host with no downtime whatsoever.

How to Add Post Type Archive in WordPress Navigation Menus

Recently, one of our readers asked if it was possible to add a link to custom post type archive pages in WordPress navigation menus. An archive page in WordPress displays a list of all posts under a specific post type, category, or tag. In this article, we will show you how to add post type archive in WordPress navigation menus.

Custom Post Type Archives in WordPress

In WordPress, the term ‘Archives’ is used for a list of entries from a post type or taxonomy (like categories and tags).

If archives are enabled for a custom post type, then you can display them on your website. Typically, the URL of your custom post type archive page is in this format:

http://example.com/post-type-slug/

For example, we have a custom post type called‘Deals’, and you can view its archive page at a URL like this:

h t t p : / /www . wp b e g i n n e r . c om/ d e a l s /

You can place a link to the archive page of your custom post type in your site’s navigation menus. This will allow your users to see all past entries posted in that post type on a single page.

Having said that, let’s see how to add a link to your custom post type archive page in WordPress navigation menus.

Adding Link to Custom Post Type Archive page in Navigation Menus

First, you need to visit Appearance » Menus page. You will notice a tab for each of your custom post type in the left column.

You need to click on the name of your custom post type to expand it and then click on the ‘View all’ tab.

You will see an option for your post type archives. Check the box next to it and then click on the Add to Menu button.

Your custom post type archive will now appear as a menu item in the right column.

By default, it will use your custom post type name with the word archives for the link label.

You may want to change this into something easier. Click on the menu item to edit it and then change its navigation label.

Don’t forget to click on the save menu button to store your changes.

You can now visit your website to see the custom post type archive link in your navigation menu.

Just like posts and pages, you can also add a single entry from your post type to navigation menus.

Simply select an entry and then click on add to menu button.

Don’t forget to click on the save menu button to store your changes.

My Custom Post Type Doesn’t Appear on Menus Screen

Custom post types need to match some requirements in order to be displayed on Appearance » Menus page.

First you need to make sure that an archive page exists for your custom post type. Typically it is a URL like this:

h t t p : / / e x amp l e . c om/mo v i e s /

Replace example.com with your own domain name and movies with your post type.

If you can see entries from your post type on this page, then this means your post type supports archives but does not support other requirements.

Good news is that you can still add your custom post type archive page as a custom link.

Visit Appearance » Menus page and then click on the ‘Custom Link’ tab to expand it.

Enter the URL of your custom post type archive page in the URL field and add the label you want to display in the link field.

Next, click on the add to menu button, and you will notice the custom link appear in the right column.

You can now click on the save menu button to store your changes.

We hope this article helped you learn how to add post type archive in WordPress navigation menus.