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… Read More »

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.

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. You may also want to see our ultimate guide boost WordPress speed and performance for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.

How WordPress Plugins Affect Your Site’s Load Time

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time,… Read More »

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time, and how you can control them more efficiently.

How WordPress plugins affect your site's load time

How WordPress Plugins Work?

WordPress plugins are like apps for your WordPress site. You can install them to add more features to your website like contact forms, photo galleries, or an ecommerce store.

When someone visits your website, WordPress first loads its core files and then loads all your active plugins.

For more details, take a look at our article about what are WordPress plugins? And how do they work?.

How Can Plugins Affect Site Load Time?

Each WordPress plugin offers different functionality and features. To do that, some plugins make database calls on the backend while others load assets on the front-end such as CSS stylesheets, JavaScript files, images, etc.

Making database queries and loading assets adds up to your site’s load time. Most plugins make an HTTP request to load assets like scripts, CSS, and images. Each request increases your site’s page load time.

When done properly, the performance impact is often not too noticeable.

However, if you are using multiple plugins that are making too many http requests to load files and assets, then it will affect your site’s performance and user experience.

How to Check Files Loaded by WordPress Plugins?

To see how plugins are affecting your page load time, you need to check the files loaded by WordPress plugins.

There are plenty of tools that you can use to figure this out.

You can use your browser’s developer tools (Inspect in Google Chrome and Inspect Element in Firefox).

Simply visit your website and right click to select Inspect. This will open the developer tools panel.

You need to click on the ‘Network’ tab and then reload your website. As the page reloads, you will be able to see how your browser loads each file.

See page load time and files loaded with inspect tool

You can also use third-party tools like Pingdom and GTmetrix to see this. Among other useful information, these tools will also show you all files that are loaded and how much time they took to load.

Testing page load time using Pingdom

How Many Plugins are Too Many?

As you see these files being loaded, you may start wondering how many plugins you should I use on my site? How many plugins are too many?

The answer really depends on the set of plugins you are using on your website.

A single bad plugin can load 12 files while multiple good plugins will add just a couple of extra files.

All well-coded plugins try to keep the files they load to a minimum. However, not all plugin developers are that careful. Some plugins will load files on every single page load, even when they don’t need those files.

If you are using too many of such plugins, then this will start affecting your site’s performance.

How to Keep Plugins in Control?

The most important thing you can do on your WordPress site is to only use plugins that are well coded, have good reviews, and are recommended by trusted sources.

See our guide on how to find which WordPress plugins.

If you find that a WordPress plugin is affecting your site’s load, then look for a better plugin that does the same job but better.

Next, you need to start using caching and CDN to further improve your site’s performance and speed.

Another factor you should consider is your website hosting. If your hosting servers are not properly optimized, then it will increase your site’s response time.

This means that not just plugins, but your site’s overall performance will be slower. Make sure you are using one of the best WordPress hosting companies.

As a last resort, you can uninstall plugins that you can live without. Carefully review the installed plugins on your website,and see if you can uninstall some of them. This is not an ideal solution as you will have to compromise on features for speed.

Optimize WordPress Plugin Assets Manually

Advanced WordPress users can try to manage how WordPress plugins load files on their site. Doing so requires some knowledge of coding and some debugging skills.

The proper way to load scripts and stylesheets in WordPress is by using the wp_enqueue_style and wp_enqueue_script functions.

Most WordPress plugin developers use them to load plugin files. WordPress also comes with easy functions to deregister those scripts and stylesheets.

However, if you just disable loading those scripts and stylesheets, then this will break your plugins, and they will not work correctly. To fix that, you will need to copy and paste those styles and scripts into your theme’s stylesheet and JavaScript files.

This way you will be able to load all of them at once, minimizing the http requests and effectively decreasing your page load time.

Let’s see how to easily deregister stylesheets and JavaScript files in WordPress.

Disable Plugin Stylesheets in WordPress

First, you will need to find the name or handle of the stylesheet that you want to deregister. You can locate it using your browser’s inspect tool.

Finding a style name

After finding the stylesheet handle, you can deregister it by adding this code to your theme’s functions.php file or a site-specific plugin.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

You can deregister as many style handles as you want within this function. For example, if you have more than one plugin to deregister the stylesheet for, then you would do it like this:


add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

Remember, that deregistering these stylesheets will affect plugin features on your website. You need to copy the contents of each stylesheet you deregister and paste them in your WordPress theme’s stylesheet or add them as custom CSS.

Disable Plugin JavaScripts in WordPress

Just like stylesheets, you will need to find out the handle used by the JavaScript file to deregister them. However, you will not find the handle using the inspect tool.

For that you will need to dig deeper into plugin files to find out the handle used by the plugin to load a script.

Another way to find out all the handles used by plugins is to add this code into your theme’s functions.php file.

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

After adding this code, you can use [pluginhandles] shortcode to display a list of plugin script handles.

Display a list of plugin script handles in WordPress

Now that you have script handles, you can easily deregister them using the code below:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

You can also use this code to disable multiple scripts, like this:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

Now, as we mentioned earlier that disabling these scripts will stop your plugins to work properly.

To avoid this, you will need to combine JavaScripts together, but sometimes it does not work smoothly, so you must know what you are doing. You can learn from trial and error (like a lot of us do), but we recommend you do not do that on a live site.

The best place to test is on a local WordPress install or on a staging site with managed WordPress hosting providers.

Load Scripts Only on Specific Pages

If you know that you will be needing a plugin script to load on a specific page on your website, then you can allow a plugin on that particular page.

This way the script remains disabled on all other pages of your site and is loaded only when needed.

Here is how you can load scripts on specific pages.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code simply disables contact-form-7 script on all pages except the contact page.

That’s all for now.

We hope this article helped you learn how WordPress plugins affect your site’s load time. You may also want to see our ultimate guide to improve WordPress speed and site performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

How WordPress Plugins Affect Your Site’s Load Time

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time,… Read More »

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time, and how you can control them more efficiently.

How WordPress plugins affect your site's load time

How WordPress Plugins Work?

WordPress plugins are like apps for your WordPress site. You can install them to add more features to your website like contact forms, photo galleries, or an ecommerce store.

When someone visits your website, WordPress first loads its core files and then loads all your active plugins.

For more details, take a look at our article about what are WordPress plugins? And how do they work?.

How Can Plugins Affect Site Load Time?

Each WordPress plugin offers different functionality and features. To do that, some plugins make database calls on the backend while others load assets on the front-end such as CSS stylesheets, JavaScript files, images, etc.

Making database queries and loading assets adds up to your site’s load time. Most plugins make an HTTP request to load assets like scripts, CSS, and images. Each request increases your site’s page load time.

When done properly, the performance impact is often not too noticeable.

However, if you are using multiple plugins that are making too many http requests to load files and assets, then it will affect your site’s performance and user experience.

How to Check Files Loaded by WordPress Plugins?

To see how plugins are affecting your page load time, you need to check the files loaded by WordPress plugins.

There are plenty of tools that you can use to figure this out.

You can use your browser’s developer tools (Inspect in Google Chrome and Inspect Element in Firefox).

Simply visit your website and right click to select Inspect. This will open the developer tools panel.

You need to click on the ‘Network’ tab and then reload your website. As the page reloads, you will be able to see how your browser loads each file.

See page load time and files loaded with inspect tool

You can also use third-party tools like Pingdom and GTmetrix to see this. Among other useful information, these tools will also show you all files that are loaded and how much time they took to load.

Testing page load time using Pingdom

How Many Plugins are Too Many?

As you see these files being loaded, you may start wondering how many plugins you should I use on my site? How many plugins are too many?

The answer really depends on the set of plugins you are using on your website.

A single bad plugin can load 12 files while multiple good plugins will add just a couple of extra files.

All well-coded plugins try to keep the files they load to a minimum. However, not all plugin developers are that careful. Some plugins will load files on every single page load, even when they don’t need those files.

If you are using too many of such plugins, then this will start affecting your site’s performance.

How to Keep Plugins in Control?

The most important thing you can do on your WordPress site is to only use plugins that are well coded, have good reviews, and are recommended by trusted sources.

See our guide on how to find which WordPress plugins.

If you find that a WordPress plugin is affecting your site’s load, then look for a better plugin that does the same job but better.

Next, you need to start using caching and CDN to further improve your site’s performance and speed.

Another factor you should consider is your website hosting. If your hosting servers are not properly optimized, then it will increase your site’s response time.

This means that not just plugins, but your site’s overall performance will be slower. Make sure you are using one of the best WordPress hosting companies.

As a last resort, you can uninstall plugins that you can live without. Carefully review the installed plugins on your website,and see if you can uninstall some of them. This is not an ideal solution as you will have to compromise on features for speed.

Optimize WordPress Plugin Assets Manually

Advanced WordPress users can try to manage how WordPress plugins load files on their site. Doing so requires some knowledge of coding and some debugging skills.

The proper way to load scripts and stylesheets in WordPress is by using the wp_enqueue_style and wp_enqueue_script functions.

Most WordPress plugin developers use them to load plugin files. WordPress also comes with easy functions to deregister those scripts and stylesheets.

However, if you just disable loading those scripts and stylesheets, then this will break your plugins, and they will not work correctly. To fix that, you will need to copy and paste those styles and scripts into your theme’s stylesheet and JavaScript files.

This way you will be able to load all of them at once, minimizing the http requests and effectively decreasing your page load time.

Let’s see how to easily deregister stylesheets and JavaScript files in WordPress.

Disable Plugin Stylesheets in WordPress

First, you will need to find the name or handle of the stylesheet that you want to deregister. You can locate it using your browser’s inspect tool.

Finding a style name

After finding the stylesheet handle, you can deregister it by adding this code to your theme’s functions.php file or a site-specific plugin.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

You can deregister as many style handles as you want within this function. For example, if you have more than one plugin to deregister the stylesheet for, then you would do it like this:


add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

Remember, that deregistering these stylesheets will affect plugin features on your website. You need to copy the contents of each stylesheet you deregister and paste them in your WordPress theme’s stylesheet or add them as custom CSS.

Disable Plugin JavaScripts in WordPress

Just like stylesheets, you will need to find out the handle used by the JavaScript file to deregister them. However, you will not find the handle using the inspect tool.

For that you will need to dig deeper into plugin files to find out the handle used by the plugin to load a script.

Another way to find out all the handles used by plugins is to add this code into your theme’s functions.php file.

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

After adding this code, you can use [pluginhandles] shortcode to display a list of plugin script handles.

Display a list of plugin script handles in WordPress

Now that you have script handles, you can easily deregister them using the code below:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

You can also use this code to disable multiple scripts, like this:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

Now, as we mentioned earlier that disabling these scripts will stop your plugins to work properly.

To avoid this, you will need to combine JavaScripts together, but sometimes it does not work smoothly, so you must know what you are doing. You can learn from trial and error (like a lot of us do), but we recommend you do not do that on a live site.

The best place to test is on a local WordPress install or on a staging site with managed WordPress hosting providers.

Load Scripts Only on Specific Pages

If you know that you will be needing a plugin script to load on a specific page on your website, then you can allow a plugin on that particular page.

This way the script remains disabled on all other pages of your site and is loaded only when needed.

Here is how you can load scripts on specific pages.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code simply disables contact-form-7 script on all pages except the contact page.

That’s all for now.

We hope this article helped you learn how WordPress plugins affect your site’s load time. You may also want to see our ultimate guide to improve WordPress speed and site performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

How to Fix “Missing a Temporary Folder” Error in WordPress

Are you seeing ‘Missing a temporary folder’ error on your WordPress site? This error makes it impossible to upload images, update themes and plugins, or update WordPress core. In this article, we will show you how to easily fix “Missing a temporary folder” error in… Read More »

The post How to Fix “Missing a Temporary Folder” Error in WordPress appeared first on WPBeginner.

Are you seeing ‘Missing a temporary folder’ error on your WordPress site? This error makes it impossible to upload images, update themes and plugins, or update WordPress core. In this article, we will show you how to easily fix “Missing a temporary folder” error in WordPress.

How to fix 'Missing temporary folder' error in WordPress

What Causes The ‘Missing a Temporary Folder’ Error in WordPress?

This error is caused by incorrect PHP settings on your WordPress hosting environment. There is a specific PHP setting that defines a temporary folder to be used by apps like WordPress to temporarily store data before saving it to the desired location.

WordPress needs access to this temporary folder when you upload an image, install or update a theme or plugin, or update WordPress core.

If the location of this folder is not defined in your server’s PHP configuration, then WordPress will be unable to do any of these things and will show you ‘Missing a temporary folder’ error.

Missing temporary folder error

Having said that, let’s see how to easily fix the ‘Missing a temporary folder’ error in WordPress.

Fix Missing Temporary Folder Error in WordPress

For this tutorial, you will need to edit wp-config.php file in WordPress. If you haven’t done this before, then please see our guide on how to edit wp-config.php file in WordPress.

First, you will need to connect to your website using an FTP client or File Manager in cPanel dashboard of your hosting account.

Next, you will need to locate the wp-config.php file and edit it.

Editing wp-config.php file using an FTP client

You need to paste this code to the file just before the line that says ‘That’s all, stop editing! Happy blogging’.

define('WP_TEMP_DIR', dirname(__FILE__) . '/wp-content/temp/');

Save your changes and upload the wp-config.php file back to your website.

Next, you need to go to /wp-content/ folder and create a new folder inside it. You need to name this new folder temp.

Creating temp folder

That’s all, you can now visit your WordPress admin area and try uploading an image.

Troubleshooting

If this method doesn’t work, then check the directory permissions for your wp-content folder.

Note: This error is caused by poorly configured hosting environment. The solution described above is just a workaround. You should still ask your hosting provider to fix this. If they don’t, then you should switch to one of these top WordPress hosting companies.

We hope this article helped you fix the ‘Missing a temporary folder’ error in WordPress. You may also want to bookmark our ultimate list of the most common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix “Missing a Temporary Folder” Error in WordPress appeared first on WPBeginner.

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… Read More »

The post How to Disable Trackbacks and Pings on Existing WordPress Posts appeared first on WPBeginner.

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 to Settings » 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. You may also want to see our list of tips and tools to combat comment spam in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Disable Trackbacks and Pings on Existing WordPress Posts appeared first on WPBeginner.

How to Create a Local WordPress Site Using XAMPP

Do you want to create a local WordPress site on your computer using XAMPP? Installing WordPress on your computer helps you try out WordPress, test themes / plugins, and learn WordPress development. In this article, we will show you how to create a local WordPress… Read More »

The post How to Create a Local WordPress Site Using XAMPP appeared first on WPBeginner.

Do you want to create a local WordPress site on your computer using XAMPP? Installing WordPress on your computer helps you try out WordPress, test themes / plugins, and learn WordPress development. In this article, we will show you how to create a local WordPress site Using XAMPP.

Create a local WordPress site using XAMPP

Why Create a Local WordPress Site?

Creating local WordPress sites is a common practice among developers and site owners. It allows you to test WordPress without creating an actual website on the internet.

Local websites are only visible to you on your computer. You can try different WordPress themes and plugins, test their features, and learn the WordPress basics.

If you already have a WordPress website, then you can create a local copy of your website on your computer to try out new plugin updates before implementing them on your live website.

Important: Local website will only be visible to you on your computer. If you want to build a live WordPress site, then you will need a domain name and WordPress hosting. Follow the step by step instructions in our how to start a WordPress blog guide when you are ready to create a live website.

Having said that, let’s check out how to install WordPress locally on Windows, Mac, or Linux using XAMPP.

What is XAMPP?

In order to create a local WordPress site, you will need to set up a web server software (Apache), PHP, and MySQL on your computer.

PHP is a programming language and MySQL is a database management software. Both of them are required to run WordPress.

Installing each of these software separately is quite difficult for beginners. This is where XAMPP comes in.

XAMPP makes it easy for you to build WordPress websites locally. It is available for Windows, Mac, and Linux based computers.

Let’s get started.

Installing XAMPP on Your Computer

First, you need to visit the XAMPP website and click on the download button for your operating system.

Download XAMPP

Depending on your operating system, your installation wizard and the application interface may differ from the screenshots here. For the sake of this article, we will show you the Windows version of the software.

After downloading XAMPP, you will need to click and run the installer.

XAMPP setup wizard

XAMPP will ask you where you want to install the software and which packages you’d like to install. The default settings will work for most users. Keep clicking on ‘Next’ to finish the setup wizard.

After finishing the wizard, check the ‘start the control panel now’ option and then click on the finish button.

Setup finished

This will launch the XAMPP control panel. Go ahead and click on the start button next to Apache and MySQL.

Start Apache and MySQL

XAMPP will now start Apache and MySQL. You may see a Windows Firewall notification, it is important that you click on ‘Allow Access’ button for both applications to run on your computer.

Allow firewall access to Apache and MySQL

Once both applications are started their names will be highlighted in Green.

You have successfully installed XAMPP on your computer.

Now you are ready to create a local website and install WordPress using XAMPP.

Creating a Local WordPress Site with XAMPP

First, you will need to download WordPress. Visit the WordPress.org website and click on the ‘Download WordPress’ button.

Download WordPress

After downloading WordPress, you need to extract the zip file, and you will see a wordpress folder. You need to copy this folder.

Copy WordPress folder

Next, head over to your XAMPP installation folder.

On Windows it would be C:/Program Files/XAMPP/htdocs or C:\Xampp\htdocs folder.

On Mac, it will be /Applications/XAMPP/htdocs folder.

Paste the wordpress folder you copied earlier inside htdocs.

Rename WordPress folder

We recommend renaming the wordpress folder to website1. This will help you easily identify your local site.

Next, you need to open your favorite web browser and visit localhost/website1. You will see a page like this:

WordPress pre-setup

This page will tell you that WordPress needs a database name, database username, password, and host information.

Let’s create a database for your WordPress site.

You’ll need to open a new browser tab and visit localhost/phpmyadmin/. This will launch phpMyAdmin app that comes pre-installed with XAMPP. It allows you to easily manage your databases using a simpler interface.

You would need to click on Databases, provide a name for your new database, and then click on the create button to continue.

Creating a MySQL database for your local WordPress site

Now that you have created a database, you can use it for your WordPress site.

Switch back to /localhost/website1/ browser tab and click on the ‘Let’s Go’ button.

On the next screen, you will be asked to provide your WordPress database information.

Enter the database name you created earlier. Your username is ‘root’ and you should leave the password field blank. For the database host field, you need to use localhost.

See the screenshot below:

Connect your WordPress database

Once you are done, click on the ‘Submit’ button to continue.

If you are on Windows or Linux, WordPress will now store these settings in your WordPress configuration file called wp-config.php file.

However, if you are on Mac, then it will show you the contents of the file and will ask you to create it.

You will need to create this file in your website’s root folder.

After creating the file, paste the text you copied earlier inside it. Next, you need to save the file and return back to WordPress installer to continue.

In the next step, WordPress will ask you to provide information about your website. First, enter the title you want to use for this site.

After that you need to enter a username, password, and an email address for your admin account.

Enter your WordPress website info

Once you have filled all the information, click on the ‘Install WordPress’ button to continue.

WordPress will now run the installation and prompt you to login once it’s done.

You can login to your website by going to /localhost/website1/wp-admin page and use the username / password that you entered during installation to login.

WordPress login screen

Things to Try After Creating a Local WordPress Site

Now that you have created your local WordPress site using XAMPP, you can work on it like you would do on a live WordPress site.

Head over to Appearance to customize your site’s appearance or install a new theme. Here are some great free themes that you can try.

The next thing you would want to try is WordPress plugins. Plugins are like apps for your WordPress site and allow you to add cool features like contact form, photo galleries, eCommerce store, etc.

Need help installing plugins? See our step by step guide on how to install a WordPress plugin.

After working on your local WordPress site you may want to move it to a live server. Head over to our step by step guide on how to move WordPress from local server to live site.

We hope this article helped you learn how to create a local WordPress site using XAMPP. You may also want to look at alternate ways to create local WordPress sites on Windows using Wampserver, and on Mac using MAMP.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Local WordPress Site Using XAMPP appeared first on WPBeginner.

How to Display the Total Number of Comments in WordPress

Do you want to show total number of comments on your WordPress site? Comments allow users to participate and engage with content on your WordPress site. By showing off your total comment count, you can encourage more users to join the conversation. In this article,… Read More »

The post How to Display the Total Number of Comments in WordPress appeared first on WPBeginner.

Do you want to show total number of comments on your WordPress site? Comments allow users to participate and engage with content on your WordPress site. By showing off your total comment count, you can encourage more users to join the conversation. In this article, we will show you how to easily display total number of comments in WordPress.

How to display total number of comments in WordPress

Method 1. Display WordPress Comment Count with a Plugin

This method is easier and is recommended for all users.

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

Upon activation, you need to visit Settings » Simple Blog Stats page to configure plugin settings.

Simple Blog Stats settings

The plugin allows you to show your blog stats using shortcodes and template tags.

On this page you will see all the shortcodes that you can use to show different stats like total number of comments, registered users, categories, tags, and much more.

You need to copy the shortcode [sbs_approved] to display the total number of approved comments on your WordPress site.

You can use this shortcode in any WordPress post, page, or text widget. If the shortcode does not work in the text widget, then please see our guide on how to use shortcode in WordPress sidebar widgets.

Method 2. Display WordPress Comment Count with Code

This method requires you to add code to your WordPress files. If you haven’t done this before, then please check out our guide on how to copy paste code in WordPress.

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


function wpb_comment_count() { 

$comments_count = wp_count_comments();
$message =  'There are <strong>'.  $comments_count->approved . '</strong> comments posted by our users.';

return $message; 

} 

add_shortcode('wpb_total_comments','wpb_comment_count'); 
add_filter('widget_text','do_shortcode'); 

This code simply creates a function that outputs total number of approved WordPress comments on your site. It then creates a shortcode to display it. You can customize the output message as needed.

Next, you can use the shortcode [wpb_total_comments] in your WordPress posts, pages, or text widget to display total number of comments on your site.

This is how it looked on our demo site.

Preview of comment numbers

We hope this article helped you display total number of comments on your WordPress site. You may also want to check out 11 ways to get more comments on your WordPress blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display the Total Number of Comments in WordPress appeared first on WPBeginner.

How to Display the Total Number of Comments in WordPress

Do you want to show total number of comments on your WordPress site? Comments allow users to participate and engage with content on your WordPress site. By showing off your total comment count, you can encourage more users to join the conversation. In this article,… Read More »

The post How to Display the Total Number of Comments in WordPress appeared first on WPBeginner.

Do you want to show total number of comments on your WordPress site? Comments allow users to participate and engage with content on your WordPress site. By showing off your total comment count, you can encourage more users to join the conversation. In this article, we will show you how to easily display total number of comments in WordPress.

How to display total number of comments in WordPress

Method 1. Display WordPress Comment Count with a Plugin

This method is easier and is recommended for all users.

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

Upon activation, you need to visit Settings » Simple Blog Stats page to configure plugin settings.

Simple Blog Stats settings

The plugin allows you to show your blog stats using shortcodes and template tags.

On this page you will see all the shortcodes that you can use to show different stats like total number of comments, registered users, categories, tags, and much more.

You need to copy the shortcode [sbs_approved] to display the total number of approved comments on your WordPress site.

You can use this shortcode in any WordPress post, page, or text widget. If the shortcode does not work in the text widget, then please see our guide on how to use shortcode in WordPress sidebar widgets.

Method 2. Display WordPress Comment Count with Code

This method requires you to add code to your WordPress files. If you haven’t done this before, then please check out our guide on how to copy paste code in WordPress.

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


function wpb_comment_count() { 

$comments_count = wp_count_comments();
$message =  'There are <strong>'.  $comments_count->approved . '</strong> comments posted by our users.';

return $message; 

} 

add_shortcode('wpb_total_comments','wpb_comment_count'); 
add_filter('widget_text','do_shortcode'); 

This code simply creates a function that outputs total number of approved WordPress comments on your site. It then creates a shortcode to display it. You can customize the output message as needed.

Next, you can use the shortcode [wpb_total_comments] in your WordPress posts, pages, or text widget to display total number of comments on your site.

This is how it looked on our demo site.

Preview of comment numbers

We hope this article helped you display total number of comments on your WordPress site. You may also want to check out 11 ways to get more comments on your WordPress blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display the Total Number of Comments in WordPress appeared first on WPBeginner.

How to Display the Last Updated Date of Your Posts in WordPress

Do you want to display last updated date for your posts in WordPress? Some websites regularly update their posts and would like to show users when the article was last updated. In this article, we will show you how to easily display the last updated… Read More »

The post How to Display the Last Updated Date of Your Posts in WordPress appeared first on WPBeginner.

Do you want to display last updated date for your posts in WordPress? Some websites regularly update their posts and would like to show users when the article was last updated. In this article, we will show you how to easily display the last updated date of your posts in WordPress.

How to display last updated date of your posts in WordPress

When You Need Last Updated Date for Posts in WordPress?

Most WordPress themes usually show the date when a post was last published. This is fine for most blogs and static websites.

However, WordPress is also used by websites where old articles are regularly updated (like ours). This last updated date and time is important information for those publications.

The most common example is news websites. They often update old stories to show new developments, add corrections, or media files. If they only added the published date, then their users would miss those updates.

Many popular blogs and websites don’t show any date on their articles. This is a bad practice and you should never remove dates from your blog posts.

Having said that, let’s see how to easily display last updated date for your posts in WordPress.

Displaying Last Updated Date in WordPress

This tutorial requires you to add code to your WordPress files. If you haven’t done this before, then we recommend you to look at our guide on how to copy paste code in WordPress.

Method 1: Show Last Updated Date Before Post Content

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


function wpb_last_updated_date( $content ) {
$u_time = get_the_time('U'); 
$u_modified_time = get_the_modified_time('U'); 
if ($u_modified_time >= $u_time + 86400) { 
$updated_date = the_modified_time('F jS, Y');
$updated_time = the_modified_time(); 
$custom_content = '<p class="last-updated">Last updated on'. $updated_date . 'at'. $updated_time .'</p>';  
} 

    $custom_content .= $content;
    return $custom_content;
}
add_filter( 'the_content', 'wpb_last_updated_date' );

This code checks to see if a post’s published date and last modified dates are different. If they are, then it displays last modified date before the post content.

You can add custom CSS to style the appearance of the last updated date. Here is a little CSS that you can use as starting point:

.last-updated {
    font-size: small;
    text-transform: uppercase;
    background-color: #fffdd4;
} 

This is how it looked on our demo website.

Last updated date in post content

Method 2: Add Last Updated Date in Theme Templates

This method requires you to edit specific WordPress theme files. Many WordPress themes now use their own template tags which define how these themes show post meta data like date and time.

Some themes also use content templates or template parts to display posts.

Few simpler themes will use single.php, archive.php, and other template files to show content and meta information.

You will be looking for the code responsible for displaying the date and time. You can then either replace that code with the following code, or add it right after your theme’s date and time code.

$u_time = get_the_time('U'); 
$u_modified_time = get_the_modified_time('U'); 
if ($u_modified_time >= $u_time + 86400) { 
echo "<p>Last modified on "; 
the_modified_time('F jS, Y'); 
echo " at "; 
the_modified_time(); 
echo "</p> "; } 

This is how it looked on our demo site:

Last updated date in post meta

We hope this article helped you learn how to display last updated date of your posts in WordPress. You may also want to see our list of most useful time saving WordPress shortcuts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display the Last Updated Date of Your Posts in WordPress appeared first on WPBeginner.

How to Display the Last Updated Date of Your Posts in WordPress

Do you want to display last updated date for your posts in WordPress? Some websites regularly update their posts and would like to show users when the article was last updated. In this article, we will show you how to easily display the last updated… Read More »

The post How to Display the Last Updated Date of Your Posts in WordPress appeared first on WPBeginner.

Do you want to display last updated date for your posts in WordPress? Some websites regularly update their posts and would like to show users when the article was last updated. In this article, we will show you how to easily display the last updated date of your posts in WordPress.

How to display last updated date of your posts in WordPress

When You Need Last Updated Date for Posts in WordPress?

Most WordPress themes usually show the date when a post was last published. This is fine for most blogs and static websites.

However, WordPress is also used by websites where old articles are regularly updated (like ours). This last updated date and time is important information for those publications.

The most common example is news websites. They often update old stories to show new developments, add corrections, or media files. If they only added the published date, then their users would miss those updates.

Many popular blogs and websites don’t show any date on their articles. This is a bad practice and you should never remove dates from your blog posts.

Having said that, let’s see how to easily display last updated date for your posts in WordPress.

Displaying Last Updated Date in WordPress

This tutorial requires you to add code to your WordPress files. If you haven’t done this before, then we recommend you to look at our guide on how to copy paste code in WordPress.

Method 1: Show Last Updated Date Before Post Content

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


function wpb_last_updated_date( $content ) {
$u_time = get_the_time('U'); 
$u_modified_time = get_the_modified_time('U'); 
if ($u_modified_time >= $u_time + 86400) { 
$updated_date = the_modified_time('F jS, Y');
$updated_time = the_modified_time(); 
$custom_content = '<p class="last-updated">Last updated on'. $updated_date . 'at'. $updated_time .'</p>';  
} 

    $custom_content .= $content;
    return $custom_content;
}
add_filter( 'the_content', 'wpb_last_updated_date' );

This code checks to see if a post’s published date and last modified dates are different. If they are, then it displays last modified date before the post content.

You can add custom CSS to style the appearance of the last updated date. Here is a little CSS that you can use as starting point:

.last-updated {
    font-size: small;
    text-transform: uppercase;
    background-color: #fffdd4;
} 

This is how it looked on our demo website.

Last updated date in post content

Method 2: Add Last Updated Date in Theme Templates

This method requires you to edit specific WordPress theme files. Many WordPress themes now use their own template tags which define how these themes show post meta data like date and time.

Some themes also use content templates or template parts to display posts.

Few simpler themes will use single.php, archive.php, and other template files to show content and meta information.

You will be looking for the code responsible for displaying the date and time. You can then either replace that code with the following code, or add it right after your theme’s date and time code.

$u_time = get_the_time('U'); 
$u_modified_time = get_the_modified_time('U'); 
if ($u_modified_time >= $u_time + 86400) { 
echo "<p>Last modified on "; 
the_modified_time('F jS, Y'); 
echo " at "; 
the_modified_time(); 
echo "</p> "; } 

This is how it looked on our demo site:

Last updated date in post meta

We hope this article helped you learn how to display last updated date of your posts in WordPress. You may also want to see our list of most useful time saving WordPress shortcuts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display the Last Updated Date of Your Posts in WordPress appeared first on WPBeginner.