Do you want to list your upcoming scheduled posts in WordPress?
Showing a list of future scheduled posts to your users can generate a buzz around your content and encourage visitors to return to your website. This can help you improve user interaction and engagement on your blog posts.
In this article, we will show you how to easily display future upcoming posts in WordPress, step by step.
Why Display Future Upcoming Posts in WordPress?
If you have been running a WordPress blog for a while, then you will know that publishing posts at a certain time can get more people to read them.
However, you can’t just sit around and wait for the right time to hit the publish button. That’s why WordPress has a built-in scheduling feature that lets you schedule posts to be published later.
Once you have scheduled the posts on your site, it is also a good idea to show a list of these upcoming articles to create hype around them and increase engagement on your blog.
Displaying future scheduled posts can be especially effective for content like serialized stories, product launches, or event announcements.
It may encourage users to discuss upcoming topics in the comments section, sign up for your newsletter, or even pre-register for events.
Having said that, let’s see how to easily list upcoming scheduled posts in WordPress.
How to Show a List of Scheduled Upcoming Posts in WordPress
You can easily show a list of scheduled upcoming posts on your WordPress site by adding custom code to your theme’s functions.php file. However, making even the smallest error while typing the code can break your site and make it inaccessible.
That is why we recommend always adding custom code using WPCode. It is the best WordPress code snippets plugin on the market that makes it safe and easy to add code to your website.
First, you need to install and activate the WPCode plugin. For detailed instructions, you can see our beginner’s guide on how to install a WordPress plugin.
Note: WPCode has a free plan that you can use for this tutorial. However, upgrading to the pro plan will give you access to more features like a cloud library for code snippets, a CSS snippet option, advanced conditional logic, and more.
Upon activation, visit the Code Snippets » + Add Snippet page from the WordPress dashboard and click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page, where you can start by adding a name for your code snippet. The name is only for your identification and can be anything you like.
After that, choose ‘PHP Snippet’ as the Code Type from the dropdown menu on the right.
Next, you need to copy and paste the following custom code into the ‘Code Preview’ box:
function wpb_upcoming_posts() {
// The query to fetch future posts
$the_query = new WP_Query(array(
'post_status' => 'future',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'ASC'
));
// The loop to display posts
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$output .= '<li>' . get_the_title() .' ('. get_the_time('d-M-Y') . ')</li>';
}
echo '</ul>';
} else {
// Show this when no future posts are found
$output .= '<p>No posts planned yet.</p>';
}
// Reset post data
wp_reset_postdata();
// Return output
return $output;
}
// Add shortcode
add_shortcode('upcoming_posts', 'wpb_upcoming_posts');
// Enable shortcode execution inside text widgets
add_filter('widget_text', 'do_shortcode');
After that, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.
Keep in mind that you will still have to add a shortcode to show a list of upcoming posts on your WordPress website.
Finally, scroll back to the top of the page to toggle the ‘Inactive’ switch to ‘Active’.
Once you do that, simply click the ‘Save Snippet’ button to store your settings.
Display a List of Scheduled Upcoming Posts in the Sidebar of a Classic Theme
To display a list of upcoming posts in the WordPress sidebar, visit the Appearance » Widgets page from the WordPress dashboard. Keep in mind that this option will only be available if you are using a classic (non-block) theme.
Here, you need to click the add block ‘+’ button in the top left corner of the screen to open the block menu.
From here, drag and drop the Shortcode block into the sidebar section. After that, add the following shortcode into the block:
[upcoming_posts]
Next, click the ‘Update’ button at the top to store your settings.
Now, you can visit your WordPress site to view the list of upcoming scheduled posts in action.
Display a List of Scheduled Upcoming Posts in the Full Site Editor
If you are using a block-based theme, then the Widgets menu tab won’t be available for you. In that case, you need to visit the Appearance » Editor page from the WordPress dashboard.
Once the editor opens up, click on ‘Pages’ and then simply choose a page where you want to add the shortcode from the options on the left.
The page of your choice will now be launched in the full site editor. Here, you must click the add block ‘+’ button to open the block menu and add the Shortcode block to the page.
After that, just add the following shortcode into the block:
[upcoming_posts]
Finally, click the ‘Save’ button at the top to store your settings.
Now, simply visit your WordPress site to view the list of scheduled upcoming posts.
Bonus: How to Display Recent Posts in WordPress
Apart from displaying upcoming posts, you may also want to show a list of recently published posts on your WordPress site.
Doing this can help introduce visitors to new content and encourage them to explore your website more.
You can easily display a list of recent posts in WordPress using the Latest Posts block in the Gutenberg editor.
After that, you can further customize this block by adding post excerpts, author name, publication date, or featured image.
Are you looking for a way to display random posts in WordPress?
Displaying random posts can encourage users to browse through the different articles on your website, resulting in more pageviews and higher user engagement.
In this article, we will show you how to easily display random posts in WordPress.
Why Display Random Posts in WordPress?
By default, WordPress lists your blog posts in reverse chronological order (from newest to oldest). This allows users to see your latest posts first.
However, most users will not get to see your older articles. For example, if you have been running your WordPress blog for a long time, then your older articles will not be prominently displayed anywhere on the website.
One way to overcome this is by making internal linking a habit. Linking to your older articles in new posts will help users discover them. It will also increase your page views and improve SEO.
Another way around this problem is displaying random posts on your WordPress pages, posts, or sidebar.
This helps users discover content that they may not have found otherwise, improving the overall user experience.
Having said that, let’s see how you can easily display random posts in WordPress. We will cover two methods, and you can use the quick links below to jump to the one you want to use:
Method 1: Display Random Posts in WordPress Using WPCode (Recommended)
If you are looking for an easy and customizable way to display random posts in WordPress, then this method is for you.
Many tutorials will tell you to do this by adding code to your theme’s functions.php file. However, the smallest error while typing the code can break your website and make it inaccessible.
That’s why we recommend using WPCode, which is the best WordPress code snippets plugin on the market. It is the easiest and safest way to add custom code to your website.
Note: You can also use the free WPCode plugin for this tutorial. However, upgrading to the Pro version will give you access to a cloud library of code snippets, smart conditional logic, and more.
Upon plugin activation, head over to the Code Snippets » + Add Snippet page from the WordPress admin sidebar.
Once you are there, click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for the code snippet.
This title is only there for your reference and won’t be shown on the website’s front end.
After that, you must choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right side of the screen.
Next, simply copy and paste the following code into the ‘Code Preview’ box:
function wpb_rand_posts() {
$args = array(
'post_type' => 'post',
'orderby' => 'rand',
'posts_per_page' => 5,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$string .= '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$string .= '<li><a href="'. get_permalink() .'">'. get_the_title() .'</a></li>';
}
$string .= '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
} else {
$string .= 'no posts found';
}
return $string;
}
add_shortcode('wpb-random-posts','wpb_rand_posts');
add_filter('widget_text', 'do_shortcode');
Upon activation, this code will display 5 random posts on your website. You can also change the 'posts_per_page' value to a different number.
Next, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.
Even after choosing this mode, you will need to add the [wpb-random-posts] shortcode to your website’s sidebar, page, or post to display random posts.
Keep in mind that this shortcode isn’t a result of the WPCode ‘Shortcode’ feature and is part of the code snippet itself.
Finally, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active’.
After that, simply click the ‘Save Snippet’ button to store your changes.
Display Random Posts on a WordPress Page or Post
Once you have saved your code snippet, you can display random posts on your website’s page or post using this method.
First, open up a new or existing page/post from the WordPress dashboard.
Next, click the ‘Add Block’ (+) button at the top left corner of the screen to open up the block menu. From here, find and add the Shortcode block to the WordPress page or post.
After that, simply copy and paste the following shortcode into the block:
[wpb-random-posts]
Finally, click the ‘Publish’ or ‘Update’ button at the top to save your changes.
Now, you can visit your WordPress website to check out the random posts.
Display Random Posts in the Sidebar as a Widget
If you are using a classic theme, then this method is for you.
First, you need to visit the Appearance » Widgets page from the WordPress admin sidebar.
Once you are there, just click the ‘Add Block’ (+) button at the top left corner of the screen to open up the block menu.
From here, locate and add the Shortcode block in the ‘Sidebar’ tab. Next, copy and paste the following shortcode into the block:
[wpb-random-posts]
Finally, click the ‘Update’ button at the top to save your changes.
Now, you can visit your site to check out the random posts displayed in your WordPress sidebar.
Display Random Posts in a Block Theme
If you are using a block-based theme with the full site editor, then this method is for you.
You can start by visiting the Appearance » Editor page from the WordPress admin sidebar. This will launch the WordPress full site editor.
Once you are there, you need to click on the ‘Add Block’ (+) button at the top left corner and add the Shortcode block to your preferred place on the website.
After that, copy and paste the following shortcode into the block:
[wpb-random-posts]
Finally, click the ‘Save’ button at the top to store your changes.
Now, you can visit your website to see the random list of posts.
Method 2: Display Random Posts in the WordPress Sidebar Using the Recent Posts Widget Extended
If you want to display random posts in your WordPress sidebar without using any code, then this method is for you.
Once the plugin has been activated, you can simply display random posts in your WordPress sidebar using a block.
Note: The plugin only works for the widget area in classic WordPress themes. If you are using a block theme, then the plugin’s block won’t be available.
Similarly, the plugin doesn’t allow you to display random posts on a WordPress page or post.
To display random posts in the WordPress sidebar, visit the Appearance » Widgets page from the admin dashboard.
Here, click the ‘Add Block’ (+) button at the top left corner of the screen to open up the block menu. Next, find and add the Recent Posts Extended block to the ‘Sidebar’ tab.
This will open up configuration settings for the block. Here, you can start by typing a title to be shown above your list of random posts.
Once you have done that, switch to the ‘Posts’ tab in the column on the left.
From here, you can select the post type, post status, and order of the posts that you want to be displayed on your website.
Next, scroll down to the ‘Orderby’ dropdown menu and select the ‘Random’ option. If you don’t configure this setting, then the block will only display the most recent posts published on your site.
After that, you can also limit the posts to certain categories by selecting them in the ‘Limit to Category’ section.
You can also configure the settings for thumbnails, excerpts, custom CSS, and more by switching to other tabs in the block.
Finally, click the ‘Update’ button at the top to save your changes. Now, you can visit your website to check out the random posts displayed in the WordPress sidebar.
Bonus: Optimize Your Blog Posts For SEO
Other than displaying random posts on your website, it is also important to optimize each and every post for SEO.
This will improve your website’s search engine rankings and bring more traffic, helping you generate leads.
Other than that, you can also use SEO writing assistant tools like Semrush to discover LSI and related keywords, change the language tone, and find out the average article length.
You can also use All in One SEO to improve your content quality further. It is the best WordPress SEO plugin on the market that lets you add FAQs and comes with a headline analyzer, AI title generator, article schema, link assistant, and more.
All of these features can ultimately help you boost the quality and SEO of your blog posts. For more details, you can see our complete AIOSEO review.
Some other tips to increase blog post ranking can be using categories and tags, improving readability, adding a meta description, or using visual content like videos and images in your posts.
Do you want to display ad blocks in specific posts on your WordPress website?
Inserting ad blocks into a specific post allows you to showcase ads where your users will be highly engaged with the content. This increases ad visibility and helps you get more clicks.
In this article, we will show you how to easily display ad blocks in specific WordPress posts.
Why Display Ads in Specific WordPress Posts?
When visiting a WordPress website, you will often see banner ads in the sidebar or beneath the header. Since those are very common ad spots, they can lead to banner blindness, where users won’t notice the ads. In turn, this can affect the click rate.
By displaying ad blocks in specific WordPress posts, you can increase the visibility of your ads and target users who are most engaged with your content.
Not only does this help prevent ad fatigue by spreading out ads across multiple pages on your WordPress blog, but it also allows you to segment your audience. By showing targeted ads to users who are more likely to be interested in them, you improve your chances of engagement and clicks.
For example, a user who is reading one of your travel blog posts is more likely to be interested in an ad for travel gear or flights and may click on it to check out the prices.
Having said that, let’s see how to easily display ads in specific WordPress posts. You can use the quick links below to jump to the method you wish to use:
Method 1: Display Ad Blocks in Specific WordPress Posts Using WPCode (Recommended)
The easiest way to display ad blocks in specific WordPress posts is by using the WPCode plugin.
It is the best WordPress code snippets plugin on the market that makes it super easy to place ads within any page, post, or widget area on your WordPress website.
With WPCode, you can show advertisements from third-party platforms like Google AdSense or your own hosted ads.
First, you will need to install and activate the WPCode plugin. For more detailed instructions, please see our beginners’ guide on how to install a WordPress plugin.
Note: You can also use the free WPCode plugin for this tutorial. However, upgrading to the Pro version will give you access to a cloud library of code snippets, smart conditional logic, and more.
Upon activation, head over to the Code Snippets » + Add Snippet page in the WordPress admin sidebar.
From here, you need to click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for your code snippet. The code snippet title is only for your reference and won’t be shown to users on the website’s front end.
After that, you need to select ‘HTML Snippet’ as the Code Type from the right dropdown menu.
Next, you need to choose the type of ad you want to place on your site.
However, if you are creating your own ad, then you will need to get the code from the person who is paying you to show the ad on your site or write your own code.
Upon getting your ad code, simply copy and paste it into the ‘Code Preview’ box.
Once you have done that, you must scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.
The ad will automatically be displayed in the specific post you choose.
Next, click on the ‘Location’ dropdown menu to expand it, and then select the ‘Page-Specific’ tab from the left sidebar.
From here, choose the ‘Insert After Paragraph’ option.
You can also modify the number of paragraphs after which you want to insert the snippet.
For example, if you want to display the ad block after the 3rd paragraph, then you can type this value into the ‘after paragraph number’ box.
Next, scroll down to the ‘Smart Conditional Logic’ section and toggle the ‘Enable Logic’ switch to Active.
After that, make sure that the ‘Show’ option is selected for the code snippet condition. Once you have done that, just click the ‘+ Add new group’ button.
This will open up some new settings in the ‘Smart Conditional Logic’ section.
From here, you need to select the ‘Page URL’ option from the dropdown menu on the left.
After that, you must select the ‘Is’ option from the dropdown menu in the middle.
Next, add the URL of the specific post where you want to display the ad block into the empty field in the right corner of the screen.
If you want to display this ad on more than one page or post, just click ‘AND’ and then follow the same process to insert the other post URL.
Once you have created this conditional logic, your ad block will only be displayed in that specific WordPress post.
Now, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active’.
Finally, click the ‘Save Snippet’ button to execute the ad code on your website automatically.
Now, you can visit the specific post you chose to see the ad block in action.
This is what it looked like on our demo website.
Method 2: Display Ad Blocks in WordPress Posts Using AdSanity
If you don’t want to use code on your website, then this method is for you.
AdSanity is a premium WordPress ad management plugin that allows you to easily create ad blocks and display them anywhere on your WordPress site. It works with any third-party ad network, including Google AdSense.
Upon activation, you need to head to the Adsanity » Create Ad page from the WordPress admin sidebar.
From here, you can start by typing a name for the ad that you are creating.
Next, you must switch to the ‘Ad Hosted On-Site’ tab at the top if you are creating your own hosted ad.
However, if you are displaying an ad from a third-party platform, then go to the ‘External Ad Network’ tab. Similarly, if you want to upload an HTML file for your ad, then you must switch to the ‘HTML5’ tab.
For this tutorial, we will be displaying a self-hosted ad in a specific WordPress post, but the steps will be the same for other types of ads.
Once you have entered a name for your ad, select its size from the dropdown menu. This will be the banner size of the ad in your post.
After that, you need to scroll down to the ‘Ad Details’ section and copy and paste the tracking URL of the ad you want to display.
Once you have done that, check the ‘Open in a new window?’ option if you want the ad to open up in a different window when a user clicks on it.
You can also set an image for your ad by clicking on the ‘Set ad image’ link. This will open up the WordPress media library, where you can upload an image.
Finally, click the ‘Publish’ button at the top to save your changes.
You can also click on the ‘Edit’ link in the ‘Publish’ section to set a start date and an expiration date for the ad.
Once you have clicked on the ‘Publish’ button, you can display the ad block on any page or post on your WordPress website.
Display the Ad in a Specific WordPress Post
First, you will need to open an existing or new WordPress post where you want to display the ad you created.
Once you are there, click the ‘+’ button in the top left corner of the screen to open up the block menu. Next, you need to look for and add the AdSanity Single Ad block to the WordPress post.
After that, select the ad that you want to display from the dropdown menu in the block.
You can also choose an alignment option for the ad block.
Finally, click the ‘Update’ or ‘Publish’ button at the top to save your changes.
Now, you can visit your website to check out the ad block in action.
Do you want to display different sidebars for certain posts and pages on your WordPress site?
A lot of the time, you will want to show the same sidebar across your entire website or blog. However, sometimes you may need to show different sidebar content on some of your posts and pages.
In this article, we will show you how to create and display different sidebars for each post and page in WordPress.
When Would You Need Different Sidebars in WordPress?
Many WordPress themes have a sidebar where you can add useful widgets and content. For example, many sites add a search bar to the sidebar or show a list of recent posts.
If your WordPress theme has a sidebar, then by default, it will look the same on all your posts, pages, categories, and archive pages.
However, you may want to display different sidebar widgets on certain posts and pages.
For example, you might show different content in the sidebar of your most popular posts or display ads that are more relevant to a particular page.
Having said that, let’s see how to create and display a different sidebar for each post and page in WordPress. Simply use the quick links below to jump straight to the method you want to use:
Method 1: Displaying Different Sidebars for Each Post and Page in WordPress (Easy)
If your theme supports sidebar widgets, then you can easily create multiple sidebars using Lightweight Sidebar Manager. This plugin lets you build as many custom sidebars as you want and then assign them to different posts and pages. You can also add them to custom post types or assign a sidebar to all the pages or posts that have a specific category.
The first thing you need to do is install and activate the Lightweight Sidebar Manager plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to go to Appearance » Sidebars. To create the first sidebar, click on the ‘Add New’ button.
You can now type in a title for the sidebar. This is just for your reference, so you can use anything you want.
With that done, open the ‘Sidebar To Replace’ dropdown menu and choose the location where you want to show the sidebar. The options you see may vary depending on your WordPress theme.
Now, you can control where the sidebar appears by creating inclusion or exclusion rules.
To create an inclusion rule, just open the ‘Display On’ dropdown and choose the pages, posts, custom post types, or categories where you want to use the sidebar.
For example, you might add the sidebar to a specific page, such as your 404 error page or the author archive.
Another option is using the sidebar for a particular page, post, or category by selecting ‘Specific Pages/Posts/Taxonomies.’
This adds a box where you can type in the page, post, or category.
To create more inclusion rules, simply click on the ‘Add Display’ Rule button.
This adds a section where you can create the new inclusion rule.
If you prefer, then you can create exclusion rules instead. For example, you may want to show the sidebar on every page except the homepage.
You can also combine inclusion and exclusion rules to control exactly where the sidebar appears on your WordPress website.
To create an exclusion rule, just click on the ‘Add Exclusion Rule’ button.
In the new ‘Do Not Display On’ section, open the dropdown menu and select the page or post that shouldn’t use this sidebar.
You can also exclude the sidebar from pages that have a specific category by following the same process described above.
After deciding where the sidebar will appear on your WordPress blog, you may want to show different content to different users.
For example, if you have a membership site, then you might use a different sidebar for visitors compared to logged-in members.
To do this, open the ‘User’ dropdown and choose a role from the dropdown menu. Now, only people with this specific user role will see the sidebar.
Finally, you may want to type in an optional description. This will only appear in the WordPress dashboard, so it’s a good way to share information with other admins or users on a multi-author WordPress blog.
If you are going to create lots of sidebars, then you can also use this field to leave yourself notes and helpful reminders.
When you are happy with the information you have entered, simply click on ‘Publish.’
With that done, go to Appearance » Widgets. You will now see all the widget-ready areas that your theme supports by default, plus the new sidebar you created in the previous step.
You can now go ahead and add widgets to the sidebar, just like any other widget-ready area.
SeedProd is the best landing page builder plugin for WordPress. With this plugin, you can create any type of custom page without writing any code. It also has dozens of professional site kits and templates that you can easily edit and fine-tune using the drag-and-drop builder.
When designing a custom page, you can choose a layout that has a sidebar.
You then simply find the blocks you want to show in that sidebar and add them using drag and drop.
SeedProd has all the blocks and features you’d expect from a powerful page builder, such as optin forms, social profiles, countdown timers, contact forms, buttons, various content blocks, and more. This makes it easy to create powerful and unique sidebars for your WordPress blog.
Optimizing your WordPress workflow often involves tweaking a few settings and functions. One of these features is post revisions. This built-in functionality can be a lifesaver, especially when you want to revert changes or restore an earlier version of a post. However, having an excessive number of revisions can be overwhelming and may clutter your database.
We’ll guide you through the steps to limit post revisions in WordPress, without turning to specific plugins.
Understanding WordPress Post Revisions
Post revisions, a core feature of WordPress, allows you to undo changes and revert to previous versions of your posts or pages. For every draft in progress, WordPress automatically generates a temporary revision (known as an auto-save) every 60 seconds. It supersedes older versions with these new auto-saves.
Alongside auto-saves, WordPress creates permanent revisions each time a user hits save, update, or publish. These permanent revisions are stored in the WordPress database and can be managed from the post-edit screen.
Why Would You Limit Post Revisions?
Limiting post revisions does not necessarily mean you’re capping your site’s performance. WordPress intelligently excludes post revisions from the database calls on the front end, only including them on the post-edit screen or while browsing revisions.
However, having a large number of post revisions can cause your WordPress database to become bulky, and although it won’t affect your site’s performance, it may make you feel a bit disorganized. Keeping your database clean and neat is good practice and can make your backend operations smoother.
The Manual Approach
Now, let’s jump into how you can limit post revisions manually in WordPress without the use of plugins.
Restricting the Number of WordPress Post Revisions
WordPress enables you to control the number of revisions retained for an article. To set a limit, you’ll need to add a specific line of code to your WordPress site’s wp-config.php file.
define( 'WP_POST_REVISIONS', 7 );
In the above code snippet, replace “7” with the desired number of revisions you wish to store for each post. Remember to save and close the file after making your adjustments.
How to Completely Turn Off WordPress Post Revisions
If your objective is to entirely disable post revisions, WordPress allows for this as well. By incorporating the following line of code into your wp-config.php file, you can turn off the post revision functionality:
define('WP_POST_REVISIONS', false );
Specifically, this command will deactivate the post revisions feature on your website. However, it’s crucial to understand that WordPress will continue to preserve one auto-save and one browser-stored revision despite this change.
Wrapping Up
Fine-tuning how post revisions are handled in WordPress can lead to a tidier database and a more streamlined content production process. It’s worth noting that manipulating core files requires a basic level of comfort with code or additional guidance. For related WordPress management topics, feel free to check out our guide on managing widgets in your WordPress dashboard.
Your website’s command center, the WordPress dashboard, arrives with several widgets that enhance functionality. However, not all of these may be beneficial for every user. As plugins introduce more widgets over time, your dashboard may start to feel crowded and less straightforward to navigate. WordPress offers the ability to remove these unnecessary widgets, either manually or programmatically. We’ll guide you through both of these methods, aiding in decluttering your dashboard and promoting better website management.
Understanding Widgets
Widgets are elements you can include in your WordPress site’s sidebars or other widget-ready areas. WordPress includes default widgets, and plugins may introduce more. All these widgets can be managed through the Appearance » Widgets screen in your WordPress dashboard. However, an excess of unused widgets can lead to a messy widget screen. To make your dashboard more navigable, consider disabling those you don’t need. For an in-depth look at managing widgets, you can explore the WordPress official documentation.
Manual Widget Removal from WordPress Dashboard
For the quick and temporary cleanup of your dashboard, WordPress allows you to hide widgets that you don’t frequently use. Follow these steps to hide widgets:
Log into your WordPress Dashboard.
Locate the “Screen Options” button at the top right corner of the screen and click on it.
Uncheck the boxes beside the widgets you want to hide.
While this method doesn’t eliminate the widgets entirely, it does make them invisible from your view. Other users can still enable these widgets from the Screen Options panel.
Programmatic Widget Removal from WordPress Dashboard
For a more lasting cleanup, WordPress provides a way to get rid of dashboard widgets completely, preventing other users from turning them back on. This involves adding a code snippet to your theme’s functions.php file or to the site-specific plugin you’re using. Here’s the code snippet:
function clear_dashboard_widgets() {
global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_drafts']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}
add_action('wp_dashboard_setup', 'clear_dashboard_widgets' );
}
The function above targets and removes the widgets listed. If there are certain widgets you wish to retain, simply remove the corresponding line from the code.
To customize this further, you can add the following function to the functions.php file to restrict the dashboard widget removal to only non-admin users:
if (!current_user_can('manage_options')) {
add_action('wp_dashboard_setup', 'clear_dashboard_widgets' );
}
Concluding Remarks
Having a neat and organized dashboard is a significant step towards more efficient WordPress management. Discarding unnecessary widgets tailors your dashboard to your exact needs, fostering a more effective and enjoyable user experience.
Aside from decluttering your dashboard, there are other optimization steps you can take to bolster your website’s performance and security. For instance, hiding your WordPress version can contribute to creating a more secure WordPress environment.
We hope these tweaks will help you maintain a clean and efficient dashboard, helping you focus on what truly matters: creating outstanding content.
WordPress is generally a secure platform, but there are ways to make it even more robust. Hiding the version of your WordPress instance is one such way to beef up security. While this might seem a bit technical, we’ll guide you through the process step by step.
Why Hide the WordPress Version?
By default, WordPress discloses its version information on your site. While it’s a helpful detail for developers, it may provide potential hackers with a road map to your site’s vulnerabilities. If they’re aware of the version you’re running, they can tailor their attacks accordingly. Hence, obscuring this information can be an essential part of your security strategy.
Incomplete Solutions and Their Limitations
You might find suggestions to edit your theme’s header.php file to eliminate the version number:
However, each time you update your theme, this change will be overridden, and the version number will reappear. Consequently, it’s a fleeting solution at best.
Another commonly recommended approach is to inject this code into your theme’s functions.php file or a specific plugin:
remove_action('wp_head', 'wp_generator');
While this will mask the version number in the site’s header, it won’t do so in your RSS feeds, making this solution incomplete.
A Better Solution: Hiding the Version with Code
For a more holistic approach, you’ll want to hide the WordPress version from both your header and RSS feeds. To achieve this, you can use this function:
function remove_wp_version() {
return '';
}
add_filter('the_generator', 'remove_wp_version');
You can add this code to your theme’s functions.php file. It effectively ceases the broadcasting of the WordPress version, making it much more challenging for hackers to tailor their attacks.
Beyond Hiding the Version: Other Security Measures
Hiding your WordPress version represents only one facet of your site’s security. Other key steps include regularly updating your WordPress site and utilizing strong, unique passwords.
For more concrete security practices, consider restricting user access according to roles, implementing two-factor authentication, using secure FTP to transfer files, and making sure to use trusted themes and plugins.
Remember, maintaining website security isn’t a set-and-forget task. It’s crucial to stay current with the latest threats and to adjust your protective measures as needed.
Moreover, while focusing on security, don’t neglect website performance. An action as simple as disabling the emoji autoload function can significantly boost site speed.
Wrapping Up
Ensuring your website’s security is a continual task. As your site grows, so does the potential pool of threats. Each step you take – whether it’s regularly updating WordPress, hiding its version number, or implementing other security practices – contributes to a more secure environment.
Website speed is critical to the success of any online venture, which is why we’ll discuss how to disable Emoji Autoload in WordPress in this guide. Not only does site speed have a direct impact on user engagement and conversion rates, but it also influences how search engines rank your site. One often overlooked factor affecting website speed, particularly in WordPress, is the Emoji Autoload feature. Let’s delve into this feature and discuss its implications on site performance.
Emojis, those fun little icons we often use in our digital conversations, are universally supported on almost all devices and browsers. To ensure emojis display correctly across all platforms, WordPress introduced the Emoji Autoload feature in version 4.2. This feature, which is part of the core WordPress functionalities, automatically loads a JavaScript file (wp-emoji-release.min.js) on every page of your WordPress site, impacting the site’s loading speed.
While this ensures a consistent emoji experience across all devices, it also adds an extra HTTP request to your site on every page load. In the world of web performance, each HTTP request can add to your site’s load time. For websites that do not rely heavily on emojis, this feature can slow down the site unnecessarily.
Why You Should Disable Emoji Autoload
Optimizing your WordPress website for speed involves minimizing unnecessary HTTP requests, including those made by features like Emoji Autoload. By disabling the Emoji Autoload feature in WordPress, you eliminate one such HTTP request from every page load, thereby enhancing your website’s speed. Remember, in the speed race, every millisecond counts. As per the HTTP Archive, among the top contributors to page bloat are HTTP requests.
How to Disable Emoji Autoload
Disabling Emoji Autoload is straightforward and involves adding a short code snippet to your theme’s functions.php file. Remember, before editing any theme files, ensure you have a recent backup of your site and preferably use a child theme to prevent issues when updating your theme.
Here is the code snippet to disable Emoji Autoload:
This code stops the emoji script from loading on your site, thereby eliminating the associated HTTP request.
The code snippet is made up of two functions:
remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7); – This line tells WordPress to stop printing the emoji detection script into the <head> of your website.
remove_action(‘wp_print_styles’, ‘print_emoji_styles’); – This line does the same for the emoji styles, preventing them from being printed on your site.
When adding these two lines to your functions.php file and saving your changes, you effectively disable the Emoji Autoload feature.
Wrapping Up
Optimizing your WordPress site for speed involves many tweaks and adjustments, and disabling Emoji Autoload is just one of them. It’s a small change that can contribute to a faster, more efficient website, particularly if emojis are not a critical part of your site’s content. After making these adjustments, it’s crucial to assess the impact on your website’s performance. You might consider using a tool like Lighthouse to monitor your website’s page experience.
Do you want to update WordPress but don’t know where to start? Often beginners are afraid that an update may break their website.
This fear is understandable. However, it’s important to use the latest version of WordPress for the best website security and performance.
In this beginner’s guide, we will show you how to safely update WordPress like a pro without breaking your website.
Upgrading your WordPress website is a regular maintenance task. We have created an easy-to-follow infographic that you can use as a reference guide.
Just click on the image below to view the full infographic, or continue reading the text instructions.
Why Should You Always Update WordPress?
Leading WordPress security research shows that the majority of WordPress websites that get hacked have outdated WordPress core, plugins, or themes.
WordPress is actively maintained by developers from all over the world. These developers find and fix bugs, add new features, and hunt down security vulnerabilities on a regular basis. These changes are then released in a new WordPress version.
If it is not a big release, then WordPress can automatically update itself to the newer version. For major releases, unless you are on managed WordPress hosting, you will have to manually initiate the update yourself.
You need to update to make sure that your website has the latest security patches, the newest features, and the best speed and performance.
Even if you have an automated WordPress backup plugin set up like Duplicator, you still need to create a new backup and store it safely in a remote location, such as your computer or cloud storage like Google Drive.
Once you have created a complete backup and stored it remotely, then you can move on to the next step.
Updating WordPress to the Latest Version
There are two easy ways to upgrade your WordPress site to the latest version. One is automatic, and the other one is manual. We will show you both of them.
Method 1: Updating WordPress Using the Built-in System (1-Click)
This method is easier and is recommended for all users.
First, log in to the admin area of your WordPress website and go to the Dashboard » Updates page.
You will see the notice that a new version of WordPress is available. Now you just need to click on the ‘Update to version X.X.X’ button to initiate the upgrade.
WordPress will now fetch the latest version of the software and install it for you.
You will see the update progress on your screen. During the upgrade, WordPress will put your site into maintenance mode.
Your site will still be visible to users, but you can’t install plugins or themes while the update is underway.
Once the update is over, you will be redirected to the WordPress welcome screen. Depending on each release, you may see a page explaining what’s new in WordPress and the features you should try.
That’s all; you have successfully upgraded WordPress to the latest version.
First, you will need to download the latest version of WordPress. Head over to the WordPress download page and click on the ‘Download’ button.
Your browser will now download WordPress in a zip file. Once downloaded, you need to extract the zip file.
Inside you will see a wordpress folder. This folder contains all the WordPress files you need for the update.
Next, you need to open your FTP client and connect to your website. Once connected, go to the wordpress folder you just extracted from the zip file in the local files column.
In the remote files column, go to your website’s root folder. This folder could be public_html or named after your website’s domain name. Inside this folder, you will see your WordPress files and folders.
You should select all files inside the wordpress folder on your computer and then right-click to select ‘Upload’.
Your FTP client will now start uploading WordPress files from your computer to your website.
However, your website already has older versions of the files with the same name. You will be asked what you want to do with those files. You need to select ‘Overwrite’ and check the box next to ‘Always use this action’.
This will ensure that all WordPress files on your website are replaced by the newer versions.
Once the upload is finished, you need to go to the admin area of your WordPress site. This step is necessary because sometimes, a newer version of WordPress may also need to update your WordPress database.
In that case, you may see a page mentioning that a database update is required. Simply click the ‘Update WordPress Database’ button to continue.
That’s all; you have successfully updated your WordPress website.
Things to Do After Updating WordPress
Once you have upgraded WordPress on your website, you need to make sure that everything is working as expected. Simply visit your website in a new browser window and review the settings in the WordPress admin area.
If you come across any issues, then take a look at our list of common WordPress errors and how to fix them. If the issue you are facing is not listed there, then follow the steps in our WordPress troubleshooting guide to figure out the problem and apply a solution.
Are you wondering what to do if your WordPress site keeps going down?
A website that is down (offline) can hurt your business. It creates a bad user experience for visitors who cannot access your content, and you may even lose customers and potential sales.
In this article, we will share the most important things you need to do if your WordPress website keeps going down.
Why Does Your WordPress Website Keep Going Down?
When your WordPress website is down, your users will see an error message that prevents them from visiting the page.
If your website is down due to one of the common WordPress errors, then you can simply fix it to resolve the issue.
However, if the issue keeps happening, or your website is not showing an error, then you will need to investigate it further.
Website downtime can happen for several reasons, including unreliable hosting, an expired domain, security reasons, an error in custom code, and more.
Another reason for downtime can be increased website traffic that exceeds your WordPress hosting resource limits.
No matter the reason, if your WordPress website keeps going down on a regular basis, then it can harm your business. Your conversion rates may fall, and you might lose customers.
Luckily, we have compiled a list of things to do if your WordPress website keeps going down. These steps will help you troubleshoot the cause and fix it easily.
1. Check if It Is Just You or if the Website Is Down for Everyone
Your WordPress website may not be down for everyone. Sometimes you might just be unable to access your site due to a network error or lack of internet connection.
First, you will need to verify that your website is down for everyone and not just you.
To do that, you can use IsItWP’s free uptime checker.
Click on the ‘Analyze Website’ button, and the tool will tell you if your website is down for everyone or just you.
If it is only down for you, then we recommend checking your internet connection. You can try clearing your browser cache or restarting your network router.
On the other hand, if your website is down for everyone, then continue reading to learn how to fix it.
2. Make Sure Your WordPress Hosting Plan Has Not Expired
One of the most common reasons for website downtime is your WordPress hosting provider. Your plan may have expired, or the provider might be having server problems.
First, you need to make sure that your hosting plan hasn’t expired. You can usually find this information in your hosting account dashboard.
If your plan has not expired, but your WordPress website keeps going down, then you will need to contact your hosting provider. It is possible that they are facing an issue on their end and can provide you with more information about it.
For example, your hosting company might be performing server maintenance, facing DDoS attacks, or may have taken down a few servers. All of these reasons could result in downtime.
Your website may also be down due to the failure of some hardware components of the host’s server.
In these cases, your website should be up and running again once the hosting provider fixes the issues.
If you’re constantly running into issues with your hosting provider, then it’s a good idea to switch to a more reliable managed WordPress hosting company.
Sometimes the website goes down because the domain name you bought when starting your website might have expired. If this is the case, it needs to be renewed.
To check if your domain is still valid, you can use a WHOIS lookup tool. You just need to enter your domain name and click the ‘Lookup’ button.
The tool will then look up details of your domain name. If your domain has expired, it might show as available for registration.
If your domain has expired, then you can now go ahead and renew it using any domain registrar, such as Domain.com.
You can also obtain a free domain from some hosting providers, including Hostinger. This is a top WordPress hosting company that provides a free domain name with any web hosting plan.
You can also use our Bluehost coupon code, which provides WPBeginner users with a free domain name, SSL certificate, and a discount on web hosting plans.
4. Check Your Plugins and Themes
WordPress plugins or themes can sometimes cause website downtime. The software may be outdated and / or have a vulnerability that hackers can use to take down your site.
Similarly, a WordPress theme can conflict with a particular WordPress version or a plugin on your website.
To see if a plugin or theme is causing downtime, you will need to deactivate all of your plugins and switch to a default theme.
Deactivate All WordPress Plugins
Deactivating all of your WordPress plugins can quickly show you if one of the tools is causing your site’s downtime.
If you have access to the WordPress admin area, then you need to visit the Plugins » Installed Plugins page from the admin sidebar.
From here, you can select all plugins by simply checking the bulk select checkbox at the top.
Next, open the ‘Bulk actions’ dropdown menu and select the ‘Deactivate’ option.
After that, click on the ‘Apply’ button to deactivate all of the plugins.
However, if you don’t have access to the WordPress admin, then you can deactivate plugins using a File Transfer Protocol (FTP) client.
First, you need to connect to your website using an FTP client or the File Manager app in your hosting account control panel. Once your site is connected, head to the /wp-content/ folder.
Inside, you should see a folder named ‘plugins.’ This is where all your WordPress plugin files are stored.
Simply rename the plugins folder to ‘plugins_deactivate.’ This will deactivate all WordPress plugins installed on your website.
Your WordPress theme may also cause your website to malfunction. This can happen if you are using a poorly coded or outdated WordPress theme that has not been updated for a while.
To find out if your current WordPress theme is causing downtime, you will need to switch to a default WordPress theme.
First, connect to your website using an FTP client or the File Manager app in your hosting account control panel.
After that, go to the /wp-content/themes/ folder.
From here, you need to locate the ‘themes’ folder. This is where all the themes from your WordPress website are stored.
Simply rename the folder to ‘themes_deactivate’ to deactivate your current theme.
Next, you need to create a new folder named ‘themes.’
After that, you can go ahead and download a default WordPress theme like Twenty Twenty-Three from the WordPress themes directory.
Once it has been downloaded, you need to unzip the file.
Next, simply upload the downloaded theme file in the new ‘themes’ folder. This will activate it on your WordPress website.
You can also delete themes using the WordPress database. For more instructions, you can see our guide on how to delete a WordPress theme.
If changing the theme or deactivating plugins didn’t resolve the issue, then continue reading.
5. Check Your WordPress Settings
Your website may also experience downtime due to incorrect WordPress configuration settings. Most commonly, your site may be using the wrong WordPress address.
First, you will need to check if your WordPress address and site address are the same.
The WordPress address is where your WordPress files and folders are stored. By contrast, the site address points to the part of your website that visitors see and interact with.
If you have access to the WordPress admin dashboard, then just visit the Settings » General page from the admin sidebar.
From here, make sure that the ‘WordPress Address’ and ‘Site Address’ boxes have the same URL.
However, if you don’t have access to the WordPress admin, then you can check your site URLs by editing the wp-config.php file.
Permalinks are the permanent URLs for posts and pages on your website.
Your permalinks can break due to installing or updating a particular theme or plugin. Additionally, migrating your website to a new server or domain can also break your permalinks and cause your site to go down.
In this case, you can regenerate your site’s permalinks by going to Settings » Permalinks from the admin sidebar. Here, make sure that you have the right permalink structure selected.
Next, you simply need to click on the ‘Save Changes’ button at the bottom to repair the broken permalinks.
If your website is still down after repairing its permalinks, then you will need to continue reading.
7. Try Reuploading the WordPress Core Files
Updating the core WordPress software can also cause downtime due to changes or corruption of the core files. When this happens, important system files for your website cannot be accessed.
To fix this problem, you can try reuploading the /wp-admin/ and /wp-includes/ folders from a fresh WordPress install.
Note: This method will not remove any information or content from your site, but it may fix a corrupted core file.
First, you’ll need to visit the WordPress.org website and click the ‘Download & Extend’ menu link, followed by ‘Get WordPress’. Next, click the blue ‘Download WordPress’ button to download the .zip folder to your computer.
Next, you’ll need to extract the zip file and find the ‘wordpress’ folder inside of it.
After that, connect to your website using an FTP client. Once you have made the connection, head to the root folder of your website. It is typically called ‘public_html’ and it contains the wp-admin, wp-includes, and wp-content folders, along with other files.
Open the WordPress folder on your computer in the left column. Then, select all of its files and hit ‘Upload’ to transfer them to your website.
The FTP client will now transfer these folders to your server.
Next, it will ask if you would like to overwrite the files. You need to simply check the ‘Overwrite’ option and then select ‘Always use this action.’
Finally, hit the ‘OK’ button. Your older WordPress files will now be replaced with fresh copies.
If replacing corrupted files doesn’t solve the problem, then you need to move to the next step.
8. Install a Firewall on Your Website
Your WordPress website might also be down due to malware or DDoS attacks.
During a DDoS attack, a hacker sends a large amount of data requests to your WordPress hosting server. This causes the server to slow down and eventually crash.
Similarly, malware is software that injects itself into your WordPress files. It uses up your WordPress server resources by attacking other websites or generating spam.
The firewall acts as an filter between your website and incoming traffic. It identifies and blocks all suspicious requests before they reach your server.
It runs on a DNS level and catches DDoS attacks before they can even make a request to your website.
However, if you are looking for a free solution, then we recommend using Cloudflare instead.
You may want to read our article on Sucuri vs Cloudflare for a detailed comparison.
For better website protection, you will also need to use security best practices on your WordPress website. For more details, see our complete WordPress security guide with step-by-step instructions on how to secure your site.
9. Move to a Reliable WordPress Hosting Plan
Finally, if you have tried all the steps above and your website keeps going down, then it might be time to move to a reliable WordPress hosting provider.
If you have a small business or blog, then we recommend moving to Bluehost or Hostinger.
Do you want to change block height and width in WordPress?
By default, WordPress makes it easy to create beautiful content layouts for your posts and pages using blocks. However, sometimes you may want to resize blocks to make them look better.
In this article, we will show you how to easily change block height and width in WordPress.
Why Change Block Height and Width in WordPress?
The block editor enables you to add content to your WordPress website using different blocks, including headings, paragraphs, images, videos, audio, and more.
However, sometimes you may want to change the width or height of a specific block to improve its appearance or the layout of the overall content.
Adjusting block sizes can also ensure that your content is responsive and displays properly on all devices, including phones, tablets, and laptops.
For example, you may have uploaded an image in the content editor, but it is too large and makes the page look unappealing.
Or, you might want to change the size of the heading block to align it better with the content.
By adjusting the width and height of the blocks, you can make your posts and pages look more aesthetically pleasing.
That being said, let’s see how you can easily change block height and width in WordPress.
Method 1: Change the Block Height and Width Using Block Settings
For this method, we will show you how to change a block’s height and width using the default settings offered by WordPress.
Currently, WordPress does not offer the same resizing options for all of the blocks. However, the block editor provides many ways to resize the height and width of different blocks.
Let’s start with the Image block in WordPress.
First, you can change the alignment of the Image block by clicking on the ‘Align’ button in the toolbar above the block.
Here, choosing the ‘Wide Width’ option will make the block the same width as the container.
Or, the ‘Full Width’ alignment option will make the block the entire width of the page.
You can also resize a block by going to the ‘Block Settings’ panel on the right and scrolling down to the ‘Settings’ section. From here, you can resize a block from the ‘Image Size’ dropdown menu.
You can also adjust the block’s width and height by typing the preferred pixel size into the ‘Width’ and ‘Height’ boxes in the ‘Image dimensions’ section.
Below that, you can also adjust the block’s size by percentage.
Another way to resize an Image block is by clicking on the image itself to bring up a blue border with circular anchors.
Then, simply drag these anchors to change the height and width of the image block.
Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.
Method 2: Change the Block Height and Width Using the Columns Block
If the block you want to resize does not come with alignment buttons or resize settings, then this method is for you.
For this method, we will place our block inside the Columns block. It acts as a container where you can add blocks in each column. Then, you can resize those blocks by adjusting the height and width of the columns.
First, you will need to click on the ‘Add Block’ (+) button in the top left corner of the screen.
From here, simply locate and add the Columns block to the content editor. Then, you will be asked to choose a variation.
After that, the column layout will be displayed on the screen, and you can now add the block you want by clicking on the ‘Add Block (+)’ button inside a column.
Once the block has been added, you can resize it by using the ‘Column settings’ located in the right panel.
Once you are done, simply click the ‘Publish’ button to store your changes.
This is how the content looked on our demo website after resizing and aligning two paragraph blocks inside a two-column block.
Method 3: Change the Block Height and Width Using the Group Block
You can also adjust the width and height of blocks using the Group block. It allows you to group different blocks and style them together.
First, you will need to click on the ‘Add Block’ (+) button at the top. Next, you must locate and add the Group block to the content editor.
Once you do that, the Group block will display three different layout options that you can choose from. For this tutorial, we will use the ‘Group’ layout.
After that, the ‘Add Block’ button will be displayed on the screen. You can now add any block you want.
In this tutorial, we will be adding and resizing a Heading block, a Paragraph block, and an Image block.
To add multiple blocks to the Group, you must click on the ‘Select Group’ button from the block toolbar.
Once the Group is selected, simply click on the ‘Add Block’ button (+) at the bottom.
Clicking on the ‘Select Group’ button also opens up the block settings in the right column. From here, you can easily adjust the layout, justification, and orientation of all the blocks.
Changing the layout will also change the different block sizes. You can configure these settings until you are happy with the result.
Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.
This is how the Group block looked on our demo website.
Method 4: Change the Block Height Using the Cover Block
This resizing method is for you if you want to use the Cover block. It enables you to display text and other content on top of an image or video.
First, you will need to click on the ‘Add Block’ (+) button at the top and find the Cover block.
Once you have done that, you will be asked to choose a color or upload an image from the WordPress media library. This image or color will be used as the background for the Cover block.
Next, simply drag and drop any block you want into the Cover block.
After that, you need to click on the Cover block to open up its block settings in the right column.
From here, scroll down to the ‘Dimensions’ panel, where you can adjust the height of the Cover block using pixels.
Finally, don’t forget to click on the ‘Save Changes’ button to store your settings.
Bonus: Create Beautiful Pages Using Advanced Blocks in SeedProd
You can easily create beautiful and aesthetically-pleasing pages using the SeedProd plugin.
It is the best WordPress page builder on the market that allows you to create landing pages using blocks. These blocks are also super easy to customize and resize according to your needs.
Are you looking to enable or activate plugins from the WordPress database?
If you are unable to access your WordPress admin area and need to activate a plugin to restore your access, then you can do that from the WordPress database.
In this article, we will show you how to easily activate your WordPress plugins using the database.
When Should You Activate WordPress Plugins Using Database
However in some situations, a website owner may need to activate certain plugins to restore access to their WordPress website.
For example, let’s assume an error is stopping you from accessing your WordPress dashboard, and you have found a plugin that can fix that error.
Luckily, WordPress stores the active plugins information in your WordPress database. This means you can manually enter this information directly in the database and tell WordPress to activate a plugin.
The only condition is that the plugin must be installed on your WordPress site. Which means that it should be present in the plugins folder on your WordPress website.
With that being said, let’s see how you can easily enable/activate a plugin using the database.
Step 1. Find Your Database Name Using the Hosting Control Panel
To activate your WordPress plugins using phpMyAdmin, first, you need to find out your WordPress database’s name.
Now, to find the name of your database, you need to log in to your web hosting dashboard. For this tutorial, we will be using Bluehost.
If you are using a different hosting company, then your WordPress hosting dashboard may look slightly different.
Once you are on the cPanel, scroll down to the ‘Files’ section and click the ‘File Manager’ option.
This will open up the File Manager in a new window. Here you simply need to locate and click the public_html folder from the left column.
This will open up all the files that are stored in the public_html folder. Now, you simply need to locate and click the folder with your site’s name on it present under the ‘Name’ column.
Some users may instead see their WordPress files and folders installed inside public_html folder.
After you have opened up your WordPress site’s file, locate the wp-config.php file under the ‘Name’ section and right-click on it.
This will open up a menu where you need to select the ‘View’ option.
This will open up the wp-config.php file in a new window where you can locate your database details.
We recommend that you copy and paste your database details including username and password into a notepad on your computer.
Now you’ve successfully found your database’s name, let’s move to our next step.
Step 2. Locate Active Plugins Option via PhpMyAdmin
After you have found out the name of your database, you need to go back to your WordPress hosting control panel.
Once there, scroll down to the ‘Databases’ section and click the ‘phpMyAdmin’ option.
This will launch the phpMyAdmin app in a new browser tab.
Note: Before you make any kind of changes, please make sure to create a complete backup of your database. It will come in handy if anything goes wrong with the process.
Next, you simply need to click the ‘Database’ tab from the navigation menu present at the top of the page.
Now, simply locate your WordPress database and click on the browse button to expand it.
This will show your WordPress database tables.
Here, you will simply need to locate wp_options table and click browse next to it.
Note: By default, WordPress uses wp_ as the prefix for table names. Your WordPress database table may have a different table prefix.
Inside the wp_options table, you’ll need to find the row where option_name is set toactive_plugins.
After that, click on the Edit link next to it.
This will open up a box where you can manually enter details to activate a plugin.
Step 3. Activate a Plugin Using phpMyAdmin
WordPress stores the active plugins information in a special format so that it can be programatically accessed by the software.
In order to tell WordPress which plugins to activate, we’ll need to use that same format.
First, we’ll start by entering the option_value as a:1: and then open up the curly bracket ({).
We are entering this value as 1 because we only want to activate one plugin. You have to change the value to the number of plugins you plan on activating.
Next, we will be entering i:0; after the curly bracket. Here we are essentially assigning a serial number to our plugin.
Remember to always assign numbers starting from 0 instead of 1.
Next, we will be entering the number of characters present in the plugin’s name and the php file name of the plugin that we’re about to activate.
For that, we will type s:24: in the box. Keep in mind that the number of characters will differ for each plugin based on the characters in the plugin directory and file name.
For instance, we are activating WPForms in this tutorial which has 24 characters in its name including the file name of the plugin as stored in our file manager.
Next, you just need to type the plugin’s directory name. You can find it by visiting the /wp-content/plugins/ folder using the File Manager app.
Don’t forget to add quotation marks before typing the plugin’s directory name.
After the /, you need to enter the plugin’s file name. This is usually the file with similar name inside the plugin folder.
Now, go back to phpMyAdmin and type the name of the plugin and then close the quotation marks.
After that, simply add a semi-colon (;) and close the curly brackets (}). The final value in this example would look like this:
a:1:{i:0;s:24:"wpforms-lite/wpforms.php";}
This is how it will look once you’re done.
Next, simply click the ‘Go’ button to execute the command.
Now go visit your WordPress dashboard and head over to Plugins » Installed Plugins.
Your plugin has been successfully activated.
Now let’s say you want to activate two more plugins.
First you will need to change the number of plugins. After you will adjust each entry for the plugin that you want to activate.
Note: We have added line breaks here to make the code look more readable. You need to make sure that there are no line breaks or spaces in your code. Otherwise, it wouldn’t work.
By default, WordPress comes with a lazy load feature, which delays downloads for images and other media to improve page load speed.
However, for some websites, it may affect user experience by not displaying images and media right away.
In this article, we’ll show you how to easily disable lazy load in WordPress both using a code method as well as a plugin method.
What is Lazy Loading?
WordPress first introduced lazy loading images in WordPress 5.5. Later it extended the lazy load feature to iframes embeds (e.g. YouTube videos, Spotify, and other embeds).
A faster website is not just good for users, but it is also good for SEO. Search engines like Google consider speed as an important ranking factor.
Apart from images and embeds, you can also easily lazy load comments and Gravatars to further improve page load speed.
Lazy loading can be seen in action by right-clicking on an image and selecting the Inspect tool in your browser.
This will split your browser screen and show you the HTML source code. From here, you’ll be able to see the “loading=lazy” attribute added to the image.
Now normally, we don’t recommend disabling lazy load due to its overall benefits for your WordPress website. Turning it off can result in slower website speed, lower conversion rates, and lower SEO rankings.
However, sometimes lazy loading can affect the user experience for some websites.
For instance, if you run a photography website where images are the most significant aspect of your content, then lazy loading them may ruin the user experience for your customers.
In other cases, you might be using a different lazy loading solution and just want to turn off the default WordPress lazy load.
That being said, let’s see how you can easily disable lazy load in WordPress.
This is how the code will look after it is pasted in the ‘Code Preview’ box.
After adding the code, scroll down to the ‘Insertion’ section.
Here, simply choose ‘Auto Insert’ as the insertion mode. This will ensure that your custom code is automatically executed everywhere on your website once you activate the snippet.
Next, you need to scroll to the top of the page and simply toggle the ‘Inactive’ switch to ‘Active’.
After that, don’t forget to click the ‘Save Snippet’ button to save and execute your custom snippet.
Once activated, this custom code snippet will disable the lazy loading feature on your WordPress website.
You can test by right-clicking on an image and selecting Inspect from the browser menu.
In the HTML code for the image, the loading=lazy attribute will now disappear.
Method 2. Disable Lazy Load in WordPress Using a Plugin
If you don’t want to add code to your site, then you can use the Disable Lazy Load plugin.
The plugin works out of the box and does not require any configuration. Once activated, it will automatically disable the lazy load feature on your site.
Do you want to disable the admin email verification notice in WordPress?
By default, WordPress displays an admin email verification notice to the site administrators every few months to verify the email they use is still correct. It’s a pseudo-security measure that many site owners feel is unnecessary and annoying.
In this article, we will show you how to disable the admin email verification notice in WordPress.
What is an Admin Email Verification Notice
The admin email verification notice feature was introduced in WordPress 5.3. The purpose of this feature is to show a screen to website administrators every few months that asks them to verify their site email address.
The admin email verification notice ensures that the email address provided by the administrator is accurate and still in use. Having a working email is important to site security and management.
However, originally planned to appear every six months, sometimes the admin email verification notice can be displayed more frequently than necessary.
This can be annoying for users who’re just trying to log in to their WordPress website. Wouldn’t it be great if you could just turn off the admin email verification notice?
Let’s take a look at how to easily disable the admin email verification notice. You can click the links below to jump directly to the method you want to use.
Method 1. Disable Admin Email Verification Notice Using Code (Recommended)
You can easily disable the admin email verification notice by adding a code snippet to your WordPress files. If you haven’t done this before, then take a look at our beginner’s guide on pasting snippets from the web into WordPress.
Generally, you would need to manually add the code to your theme’s function.php file, but it can be a bit tricky since even a minor mistake can bring down your whole website.
This is why we recommend using a code snippet plugin like WPCode to add custom code in WordPress without having to edit your theme’s core files.
Once the plugin is activated, go to Code Snippets » Add New from your WordPress admin dashboard.
This will take you to the ‘Add Snippet’ page.
As we have to add custom code, simply click on the ‘Use Snippet’ button below the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page where you can start by entering a title for your code snippet. It can be anything that helps you identify the code.
Next, select the ‘PHP Snippet’ as the ‘Code Type’ from the drop-down menu on the right.
After that, all you have to do is copy and paste the following PHP code snippet in the ‘Code Preview’.
After that, scroll down to the ‘Insertion’ section and select an insert method.
Now, simply choose the ‘Auto Insert’ option to automatically execute code on your site upon saving the snippet. Make sure to select the location “Admin Only”.
Now, go to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’ in the top right corner and then click the ‘Save Snippet’ button.
Once, you have saved and activated the code snippet, it will be automatically executed on your site.
Now you will no longer see the admin email verification notice.
Method 2. Disable Admin Email Verification Notice Using a Plugin
If you prefer not to add code to your WordPress site, you can always use a plugin.
The first thing you need to do is install and activate the Make Disable Admin Email Verification Prompt plugin. For more instructions, you can check out our guide on how to install a WordPress plugin.
Once the plugin is activated, simply go to Settings » General from your WordPress admin dashboard.
Now that you’re on the ‘General Settings’ page, scroll down to the bottom.
Here you will find the ‘Disable Admin Email Verification Prompt’ option. Now, simply make sure to check the box beside ‘Disable Admin Email Verification Screen.’
Don’t forget to click on the ‘Save Changes’ button to store your settings.
That’s it! You and your team should not see the admin email verification notice anymore.
Do you want to remove the WordPress icon from the browser tab of your website?
Removing the WordPress icon can prove to be extremely beneficial for you as it will allow you to design your own site icon and increase your brand recognition among customers.
In this article, we will show you how to easily remove the WordPress icon from the browser tab.
Why Should You Remove the WordPress Icon from Browser Tab
The WordPress icon on your browser tab can make your website look generic and unprofessional. Most users have many tabs open in their browser which results in your website title being hidden.
With your website title hidden, users have no way to recognize your site immediately. With just the WordPress logo in the tab, your users will be unable to identify your site among many others.
By removing the WordPress icon from the browser tab and adding a favicon (aka your site icon), you can use your own brand and make your site more user-friendly for your visitors.
A favicon is a tiny image that appears next to your website’s title in the browser.
The favicon will help your users immediately recognize your website and switch between different tabs efficiently. More frequent visitors will even build instant recognition for that tiny image on your browser.
How to Remove the WordPress Icon from Browser Tab
The process of removing the WordPress icon and adding a favicon in its place is extremely easy. There are three methods that can be used to remove the WordPress icon from the browser tab.
Today, we’ll be taking a look at all three methods and you can choose the one that feels right for you.
Method 1. Removing the WordPress Icon Without a Plugin
As of WordPress 6.1, the WordPress default theme comes with a full site editor. You can also use this method if you’re using a block theme on your WordPress site to remove the WordPress icon.
At the time of writing this tutorial, the default WordPress 6.1 theme Twenty Twenty-Three doesn’t have a site icon block to change your favicon away from the WordPress logo.
If you navigate to Appearance » Editor from your WordPress admin dashboard, this will open up the full site editor, but you cannot change your favicon from here or remove the WordPress icon from the browser tab.
So you can copy and paste the URL below into your browser to open up the theme customizer.
https://example.com/wp-admin/customize.php
Remember to replace ‘example.com’ with your own site’s domain name.
This URL will take you to the Theme Customizer. Once there, simply click the ‘Site Identity’ tab.
Now on the ‘Site Identity’ page, scroll down to the ‘Site Icon’ section.
Simply click the ‘Select Site Icon’ button which will open up the WordPress media library.
You can now select any image that you want to use as a favicon to replace the WordPress icon on the browser tab.
For more details on how to create a favicon, you can check out our article on how to add a favicon in WordPress. If the image that you’ve chosen to use as a favicon exceeds the recommended size, then WordPress will allow you to crop it.
Once you’re satisfied with your choice simply click the ‘Publish’ button at the top.
Congratulations! You’ve successfully removed the WordPress icon from the browser tab and replaced it with your own.
Remove the WordPress Icon in a Theme without Full-Site Editing
If you’re using any non-FSE theme, then you can directly navigate to the Theme Customizer at Appearance » Customize to remove the WordPress icon from the browser tab.
In sites that don’t support the full-site editor, the WordPress theme customizer allows you to change details about your site such as the favicon, typography, default colors, footer, and more.
Once in the Theme Customizer, click on the ‘Site Identity’ tab. The process is the same as the one we showcased above. You can remove the WordPress icon simply by uploading a site icon of your choice.
Once you’re happy with your choice, simply click on the ‘Publish’ button to save changes.
Method 2. Removing the WordPress Icon Using a Plugin
You can also use a plugin to remove the WordPress icon and replace it with a favicon. For this tutorial, we will be using the Heroic Favicon Generator plugin.
It is a well-known plugin that is used by many to add a favicon to their website.
First, all you have to do is install and activate the Heroic Favicon Generator plugin.
After the plugin has been activated, simply go to Plugins » Installed Plugins and click on ‘Favicon Settings’ option.
This will take you to the ‘Heroic Favicon Generator Settings’ page. Here, simply click on the ‘Select Favicon’ button under the ‘Select Favicon’ option.
This will open up the WordPress media library. Now, you can choose and upload any image that you want to use as a favicon.
After you’ve uploaded your favicon, you can scroll down to the ‘Previews’ section where you will be able to see how the favicon will look on your website.
Once you’re satisfied, simply scroll down and click on the ‘Save Changes’ button.
You have successfully removed the WordPress icon and have added a favicon in its place.
Do you want to disable overflow on your WordPress website?
A horizontal scroll bar appears when an element on that page is too wide to display and overflows beyond the screen. Most WordPress themes don’t use horizontal scrolling because it can break your site layout and confuse users.
In this article, we will show you an easy and quick way to disable overflow in WordPress and remove the horizontal scroll bar.
What Causes Horizontal Scroll Bar or Overflow in WordPress
When setting up your WordPress website, it is important to make it user-friendly and accessible for everyone.
WordPress will show a horizontal scrollbar if an element is wider than your website layout. This is called ‘overflow.’ Having a horizontal scroll bar can break your design and make your website less user-friendly.
A web page with both horizontal and vertical scroll bars can be disorienting for the visitor and become hard to navigate. It can result in people leaving your site causing lower conversions and sales.
Disabling overflow can be beneficial for you as it will make your site more user-friendly and intuitive.
Disabling the overflow is an extremely easy process. With that in mind, let’s take a look at how to easily disable the overflow horizontal scroll bar in WordPress.
Method 1: Adding the CSS Snippet using Theme Customizer
You can disable overflow in WordPress by simply adding a CSS code in the ‘Additional CSS’ option of the theme customizer.
All you have to do is go to the WordPress dashboard and click Appearance » Customize.
Note: You might see Appearance »Editor instead of Customize. This means your theme uses the full-site editor (FSE) instead of the Theme Customizer, and you should check out our guide on how to fix the missing theme customizer or use Method 2 below.
Once you’re on the Customize page, click on the ‘Additional CSS’ option and then simply copy and paste the following code.
html, body {
max-width: 100%;
overflow-x: hidden;
}
Once you’ve pasted the code, any overflow will be removed, and you’ll be able to see it applied on your website’s live preview pane.
Don’t forget to click on the ‘Publish’ button at the top of the page when you’re done!
Method 2: Adding The CSS Snippet Using WPCode
You can also add the CSS via code snippet using the WPCode plugin.
WPCode is the most popular code snippet plugin, used by over 1 million websites. We recommend this method as this plugin makes it easy to add custom code to WordPress without having to edit any of your theme files.
So the first thing you need to do is install and activate the WPCode plugin on your website. For more details, you can see our step to step guide on how to install a WordPress plugin.
Once you’ve activated the plugin, it will add a new menu item labeled Code Snippets to your WordPress admin bar. Click it, and you will be taken to the ‘All Snippets’ page.
Go ahead and click on the ‘Add New’ button to add your CSS code.
Now that you’re on the ‘Add Snippet’ page, you can either search the WPCode snippet library, or you can start from scratch with your own. That’s what you’ll do here.
Simply hover over ‘Add Your Custom Code (New Snippet)’ and click on ‘Use Snippet.’
Once you’re on the ‘Create Custom Snippet’ page, start by entering a title for your code snippet. This is for you only, and it can be anything that helps you identify the code.
Next, you’ll have to select the ‘Code Type’ from the drop-down menu on the right. Note that WPCode does not offer an option for CSS, so you’ll need to click on the option ‘Universal Snippet.’
Next, all you have to do is copy and paste the following CSS code snippet into the ‘Code Preview’.
It will look like this once you’ve pasted the code:
After that, scroll down to the ‘Insertion’ section. Here, you’ll find two options, ‘Auto Insert’ and ‘Shortcode.’
You will choose the ‘Auto Insert’ option so that your code will be automatically inserted and executed on your site.
However, if you just want to disable the horizontal scroll bar on some specific pages, you can use the conditional logic option in WPCode to only show the snippet on specific page.
Alternatively, you can use the WPCode Pro version to load snippets on specific post pages using the Block Editor.
Once you’ve chosen your option, go to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’ in the top right corner.
Then, just click the ‘Save Snippet’ button.
That’s it! You just removed any horizontal overflow scroll bars on your site.
Do you want to hide your PDF files from search engines?
You might be running an online business selling ebooks and want to prevent people from finding the file using search engines. Or you might have sensitive information stored in those PDF documents that shouldn’t be publicly available.
In this article, we will show you how to hide (noindex) PDF files in WordPress.
Why Should You Hide (Noindex) Your PDF Files
PDFs are one of the most popular file formats, and there are many benefits of uploading them on your WordPress website.
PDFs are often used to build an email list. A lot of people convert long tutorials on their blog into PDFs, and then offer them as exclusive content on their website.
PDF files are also used to offer exclusive members-only premium content for paying subscribers as part of an online course or membership site.
If you’re using PDFs on your website in a similar way, then it is best that you hide your PDF files from search engines.
You do not want people to find your PDF files through search results where users would be able to access your PDFs without providing you with their email addresses or payments.
You might also have files containing sensitive data that shouldn’t be searchable by the public. Hiding those PDFs using noindex is essential for protection and data security.
With that being said, let’s show you how you can easily hide your PDF files from search engines.
Method 1. How to Hide (Noindex) Your PDF Files Using AIOSEO (Recommended)
The best way to hide your PDF files from search engines is by using the AIOSEO plugin.
All in One SEO (AIOSEO) is the best WordPress SEO plugin that allows you to easily optimize your WordPress website for search engines and social media platforms.
This plugin also allows you to easily edit your Robots.txt file, which gives bots instructions about your site. You will be adding a bit of code that will tell them to ignore your PDFs.
Once the plugin is activated, head over to All in One SEO » Tools in the WordPress dashboard.
Now that you’re on the ‘Tools’ page, head over to the ‘Robots.txt Editor’ section and click the toggle present beside ‘Enable Custom Robots.txt.’
After that, scroll down to where it says ‘User Agent’ and simply add an asterisk (*) to apply the rule to all bots that crawl your site.
Then, select the ‘Disallow’ option in the ‘Rule’ section. Doing this will block all of the user agents from accessing the PDF files. Now, all you have to do is enter a directory path. Simply add /pdf/ in the ‘Directory Path’ field.
Note: If you have saved your PDF directory folder under any other name, then you will have to write that exact PDF directory name in the ‘Directory Path’ field.
Next, just scroll down and click on the ‘Save Changes’ button.
Once that’s done, you’ll be able to view your rules in the ‘Robots.txt Preview’ section of the page.
Your robots.txt file will now tell search engines to ignore all the PDF files that are present in your PDF directory folder.
If you only want to hide individual PDF files, then you will need to simply type the name of that PDF in the ‘Directory Path’ field.
For example, as you can see in the image above, entering example-pdf.pdf will prevent that single PDF file from being indexed without affecting others.
You can also add a rule like Disallow: /*.pdf$ to hide all PDF from search engines, but this will only work when User-agent is set to Googlebot. Not all search engines respect a broad rule like that.
Method 2. How to Hide (Noindex) Your PDF Files Using X-Robots-tag
If for some reason the previous method doesn’t work, then you can use the X-Robots-tag to hide your PDF files.
In this method, you will need to manually edit your WordPress site’s .htaccess file and add X-Robots-tag to it.
First, simply connect to your website using any FTP client or by using the file manager app on your WordPress hosting control panel.
Next, locate your .htaccess file which will be in the same folder as your /wp-content/ and /wp-admin/ folders.
For this tutorial, we will be using FileZilla as an FTP client. Once connected to your site, you will find your .htaccess file in the ‘Remote Site’ section in the right-hand column.
Once you locate the .htaccess file, right-click and open the ‘View/Edit’ option.
This will open the file in a text editor. If you are using Notepad, here is how it may look after you’ve added the X-Robots-tag.
If you’re using Apache server, then simply add the following X-Robots-tag in the .htaccess file.
<Files ~ "\.pdf$">
Header set X-Robots-Tag "noindex, nofollow"
</Files>
If you’re using Ngnix server, then add the following:
Once you’ve added the X-robots-tag, simply save your file. This will now mark all .PDF files as noindex/nofollow, which means you’ve succeeded in hiding your PDF files from search engines!
Bonus: How to Protect PDF File Download in WordPress (3 Ways)
The above two methods cover how to hide PDF files from search engines, but if you want to further restrict PDF downloads to members only, require password or email address to download PDF, or even collect payments, then you will need one of following tools:
MemberPress is the best WordPress membership plugin in the market. It allows you to restrict PDF file access to registered-members only. You can even sell access to PDF files based on different subscription levels the user have.
MemberPress also lets you create and sell online courses and often website owners offer premium PDF companion guides with their courses.
Basically, this method will ensure that your PDF files are fully protected, and no one will be able to access your PDF file, unless they enter a password and login.
It comes with maximum file protection features for PDF files, so you can store it in a private cloud, generate unique access links for each member, track download activity, limit the number of times a specific file can be downloaded, and more.
You can accept payments via credit card, PayPal, and others, so you can restrict PDF access by user’s subscription level.
OptinMonster is the best lead generation plugin for WordPress. It helps you get more email subscribers and sales from your website visitors.
A lot of website owners use OptinMonster to require user to enter an email address before giving them access to their PDF files.
This process is called delivering a lead magnet or content upgrade. Once the user enters their email address in OptinMonster, they’re added as a subscriber in your email marketing service or CRM.
After that, they’ll get access to the PDF file in a personalized welcome email.
Do you want to add browser tab notifications for your website?
Adding browser tab notifications can be a great way to recapture a user’s attention, can lower the rate of cart abandonment, and increase sales and revenue.
In this article, we will show you how to add browser tab notifications in WordPress.
What is Browser Tab Notification?
A browser tab notification is when you change something on the tab for your website when the user is focusing on a different site in their browser.
By adding a browser tab notification feature on your WordPress website, you can grab the user’s attention the moment they open another tab to leave your page.
For instance, you can change the favicon of your website, animate it, write a custom message, or just flash the tab.
If you have an online store, browser tab notifications can really help you out. These notifications will bring back distracted customers, lower cart abandonment rates, and increase customer engagement.
Using this feature, you can alert your customers about cart abandonment or even offer a discount if they return their attention to your site.
Here is an example of a browser tab notification.
With that being said, we will show you how to add three different types of browser notifications to WordPress.
You can easily add browser tab notifications on your site by adding custom code in WordPress. Usually, you have to edit your theme’s functions.php file, but that can break your website with even a small error.
That’s why we recommend using WPCode, the safest and most popular code snippet plugin, used by over 1 million websites.
Once you’ve activated the plugin, simply go to Code Snippets » All Snippets in your WordPress admin panel.
Just click on the ‘Add New’ button, which will then bring you to the ‘Add Snippet’ page.
Now, hover over the ‘Add Your Custom Code (New Snippet)’ option and click on the ‘Use Snippet’ button below it.
The plugin will then take you to the ‘Create Custom Snippet’ page.
No matter which type of browser tab notification you use, you will enter the code below using this page.
Type 1. Showing New Updates as a Browser Tab Notification
If you use the code below, your users will be alerted about any new updates that are being posted on your site. A number will appear in the tab to tell them how many new items they are missing.
For example, if you have an online store and you just added some new products to the inventory, the user will see the browser tab notification as a number that indicates how many new products were added.
You can see this in the image below:
Once you’re on the ‘Create Custom Snippet’ page, you need to name your snippet. You can choose anything that helps you identify the code. This is only for you.
Next, you’ll select the ‘Code Type’ from the drop-down menu on the right. This is JavaScript code, so simply click on the ‘JavaScript Snippet’ option.
Then, all you have to do is copy and paste the following code snippet into the ‘Code Preview’ area.
let count = 0;
const title = document.title;
function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}
function newUpdate() {
const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );
Once you’ve pasted the code, scroll down to the ‘Insertion’ section. You will find two options: ‘Auto Insert’ and ‘Shortcode.’
Simply choose the ‘Auto Insert’ option, and your code will be automatically inserted and executed on your site.
You can use the ‘Shortcode’ method if you only want to show new updates on specific pages where you add the shortcode.
Once you’ve chosen your option, return to the top of the page.
Click the switch from ‘Inactive’ to ‘Active’ in the top right corner, and then simply click the ‘Save Snippet’ button.
With that finished, your custom code snippet will be added to your site and start working.
Type 2. Changing Favicons as a Browser Tab Notification
With this method, you will show a different favicon on your site’s browser tab when users navigate away to another tab.
A favicon is a small image that you see on web browsers. Most businesses will use a smaller version of their logo.
Now, to change favicons on your browser tab, we will be using the WPCode plugin.
First, go to Code Snippets » All Snippets in your WordPress admin panel and then click on the ‘Add New’ button.
Next, simply hover over the ‘Add Your Custom Code (New Snippet)’ option and click on the ‘Use Snippet’ button below it
This will take you to the ‘Create Custom Snippet’ page. You can start by entering a title for your code snippet.
Now simply choose a ‘Code type’ from the dropdown menu at the right. For this code snippet, you need to select the ‘HTML Snippet’ option.
Once you’ve done that, simply copy and paste the following code in the ‘Code Preview.’
After you’ve pasted the code, simply remove the example favicon links from the code and replace them with your own images.
Remember, the images you choose as favicons should already be uploaded to the media library of your WordPress site.
Otherwise, the code will not work, and your favicon will display as normal.
Once you’ve pasted the links to your new favicons, scroll down to the ‘Insertion’ section. Here, you’ll find two options: ‘Auto Insert’ and ‘Shortcode.’
You can choose the ‘Auto Insert’ option if you want to automatically embed the code on every page.
To change the favicon on only specific pages, select the ‘Shortcode’ option and paste it into any shortcode-enabled area, such as sidebar widgets or at the bottom of the content editor.
Then, simply go to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’ in the top right corner, and then click the ‘Save Snippet’ button.
After that, your favicon will start changing as a browser tab notification.
Type 3. Changing Site Title as a Browser Tab Notification
If you want to change the site title to recapture your visitor’s attention, then you can use this method.
By using this code snippet, your site title will change to show an eye-catching message when users switch to another tab in the browser.
We will be using the WPCode plugin to change your site title as a browser tab notification.
To get to the ‘Create Custom Snippet’ page, go to Code Snippets » All Snippets and simply click on ‘Add New’ button.
Then, simply select the ‘Add Your Custom Code’ option as shown in the examples above.
Now that you’re on the ‘Create Custom Snippet’ page, start by entering a title for your code snippet.
Next, you’ll have to select the ‘Code Type’ from the dropdown menu on the right. As this is JavaScript code, simply click on the ‘JavaScript Snippet’ option.
After that, scroll down to the ‘Location’ option and click on the dropdown menu beside it.
From the dropdown menu, simply click on the ‘Site Wide Footer’ option.
Then, all you have to do is copy and paste the following code snippet in the ‘Code Preview’.
function changeTitleOnBlur() {
var timer = null;
var title = document.title;
var altTitle = 'Return to this page!';
window.onblur = function() {
timer = window.setInterval( function() {
document.title = altTitle === document.title ? title : altTitle;
}, 1500 );
}
window.onfocus = function() {
document.title = title;
clearInterval(timer);
}
}
changeTitleOnBlur();
Once you’ve pasted the code, you can now edit it and simply write whatever message you want to display on your browser tab in the code.
To write your desired message, simply go to the var altTitle = 'Return to this page!'; line and remove the placeholder text with the message for your browser tab notification.
Next, scroll down to the ‘Insertion’ section, where you will find two insertion methods: ‘Auto Insert’ and ‘Shortcode.’
If you click on the ‘Auto Insert’ option, your browser tab notification will be active on every page. However, if you only want your eye-catching message on specific pages, you can choose the ‘Shortcode’ option.
For example, you might only want to add this code on the ‘Add to Cart’ page so that it can lower cart abandonment rates on your website.
If that is the case, you can choose the Shortcode option.
All that’s left after that is to go to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’, then click the ‘Save Snippet’ button.
That’s it! Now, your browser tab notification will alert users who leave your site.
