How to Permanently Delete a WordPress Site from the Internet

Recently, one of our readers asked if it was possible to permanently delete a WordPress site from the internet? Simply deleting your WordPress installation does not completely remove it from the internet. In this article, we will show you how to permanently delete a WordPress site from internet.

When and Why Permanently Delete a WordPress Site from Internet

Sometimes you may need to completely remove a WordPress site from the internet. You can simply delete WordPress files from your server, and it will become unavailable.

However, your site may still appear in search results, cached snapshots, and the Wayback Machine.

It is quite difficult to remove all traces of a website from the internet. There are thousands of websites that aggregate content from other sites, publish screenshots, offer statistics and comparisons.

With the steps highlighted in this article, you can make it difficult to find your deleted website, and its content.

Please note that this article is about deleting your self hosted WordPress.org website. See our guide on the difference between self hosted WordPress.org site vs WordPress.com blog.

If you want to delete a WordPress.com blog, then see this article on how to delete your WordPress.com blog.

Having said that, let’s take a look at how to properly and permanently delete a WordPress site from internet.

Permanently Deleting a WordPress Site from Internet

Here are the steps you can take to properly delete a WordPress site and make it difficult to find.

Step 1: Backup Your WordPress Site

First thing you need to do is to create a complete backup of your WordPress site. Even though you want to delete your site completely, you should still make a backup.

This will come in handy in case you change your mind in the future, or want to access piece of content that you had already deleted.

Step 2: Delete Your WordPress Files

Now you need to delete WordPress files stored on your server. Deleting these files will erase WordPress software as well as your themes, plugins, images and other media files.

You can do that by visiting your WordPress hosting account’s dashboard. Upon login, locate the File Manager icon.

File Manager provides a web based interface to manage files stored on your server. You need to go to the root directory and delete all files stored there.

You can also delete your WordPress files using an FTP client. If you are unfamiliar with FTP, then take a look at our beginner’s guide on using FTP.

Step 3: Block Search Engines Using Robots.txt

Now that you have deleted your website, it is time to block search engines from crawling your website.

We will use robots.txt file to tell search engines that we don’t want our pages to be crawled.

Remember, that robots.txt file is just a directive. It is respected by most search engines, but some lesser known crawlers may completely ignore it. Don’t worry we will show you how to deal with those as well.

First you will need to create a new robots.txt file using file manager in cPanel or FTP.

After creating the file you need to edit it and add the following lines:

User-agent: *
Disallow: /

These two lines disallow all user-agents (crawlers like Googlebot) from accessing all URLs under your domain name.

Step 4: Removing Content From Search Engines

Even though your content does not exist any more, search engines may keep showing it for sometime.

Search engines understand that websites can go down due to technical faults. This is why they keep showing the content for a while hoping that your website will come back.

You will need to explicitly tell search engines that your content is no longer available, and it is removed permanently.

The easiest way to do this is by using the .htaccess file. You will need to create a new file in your website’s root directory and name it .htaccess.

Next, you need to edit the .htaccess file and add this code inside it:

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/robots.txt
RewriteCond %{HTTP_HOST} ^www\.example\.com$ [NC]
RewriteRule ^(.*)$ - [L,G]

Don’t forget to replace example.com with your own domain name.

This code will redirect all requests to your website and show 410 Error. However, it will allow crawlers to access your robots.txt file.

Despite taking all the steps, this process can still take sometime. You can speed it up further by submitting cache removal request.

Removing Website Snapshots from Wayback Machine

Archive.org’s Wayback Machine is the world’s largest archive of websites. It crawls and stores cached versions of billions of web pages.

Anyone can visit Wayback Machine and look for cached snapshots of any website.

The best way to permanently remove your website from Wayback Machine is by contacting Archive.org and request them to remove snapshots of your content.

Removing your website from Wayback Machine by emailing Archive.org will ensure that your past snapshots are never included again.

Even when your domain registration is expired and transferred to a new owner, Archive.org will not enable archiving for that domain ever again.

That’s all, we hope this article helped you learn how to permanently delete a WordPress site from internet. In case you want to start a different website, check out our guide on how to start a WordPress blog for detailed instructions.

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

The post How to Permanently Delete a WordPress Site from the Internet appeared first on WPBeginner.

How to Stop Storing IP Address in WordPress Comments

After reading our article on how to allow anonymous comments, one of our readers asked us if it was possible to stop storing IP address in WordPress comments. Some site owners may want to do that to protect privacy of their users. In this article, we will show you how to stop storing IP address in WordPress comments.

Pros and Cons of Not Storing IP Address in WordPress Comments

By default, WordPress logs and stores IP addresses of users leaving comments on your website. These IP addresses are permanently stored in your database.

The reason for storing IP addresses with each comment is to help site owners combat with unwanted comments or spam. Plugins like Akismet can block comments from IP addresses known to be exploited by spammers.

Unless your users are using a VPN service, their real IP addresses can still be found in your site logs. Most WordPress hosting providers keep an access log of all visitors to your website for a limited period of time.

On the other hand by not storing IP address in WordPress comments, you can improve privacy of commenters on your website. They may feel more confident about expressing their opinions knowing that your site doesn’t store IP addresses with comments.

Method 1: Stop Storing IP Addresses in Comments with Plugin

This method is easier and recommended for new websites and beginners.

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

Once activated, the plugin will replace user IP with 127.0.0.1, which is an IP address typically used by localhost.

The plugin will not delete IP addresses stored with older comments. If you have older comments with IP addresses stored with them, then you may want to delete those IP addresses as well. We will show you how to do that later in this article.

Method 2: Manually Stop Storing IP Addresses with WordPress Comments

If you are comfortable pasting code snippets in WordPress, then you should use this method instead.

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

function wpb_remove_commentsip( $comment_author_ip ) {
return '';
}
add_filter( 'pre_comment_user_ip', 'wpb_remove_commentsip' );

This is basically the same code used by the plugin we mentioned in the first method. However, instead of storing 127.0.0.1, it leaves the IP field blank.

Remove IP Address From Old Comments

Regardless of which method you use to stop storing comments IP, old comments on your WordPress site will always have IP addresses stored with them.

If you have old comments on your site, then you may want to remove IP addresses from those comments.

We will show you how to do that by running a MySQL query on your WordPress database. It is really important to make sure that you have the most recent WordPress database backup.

Next you need to login to your WordPress hosting control panel and look for phpMyAdmin.

Make sure that you have selected your WordPress database by clicking on the database name in the column on your left hand. After that you need to click on the SQL menu.

This will bring you a text area where you need to enter this query:

UPDATE 'wp_comments' SET 'comment_author_IP' = '';

Click on the Go button below the textarea to run your query. That’s all, it will remove all IP addresses stored with comments in WordPress database.

Note: if you have a custom WordPress database prefix, then please adjust the wp_comments to your custom table prefix.

We hope this article helped you learn how to stop storing IP address in WordPress comments. You may also want to see our guide on how to add ask me anything anonymously in WordPress.

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

The post How to Stop Storing IP Address in WordPress Comments appeared first on WPBeginner.

9 Best PDF Plugins for WordPress

Do you want to add PDF files to your WordPress site? By default, WordPress cannot generate or embed PDF files in posts or pages. In this article, we have hand-picked some of the best PDF plugins for WordPress.

1. PDF Viewer

The PDF Viewer allows you to display PDF files inside your WordPress posts and pages. It uses Mozilla’s PDF.js script to render PDF documents beautifully with tools to scroll, search, jump between pages, print, and download PDF files.

For detailed instructions, see our guide on how to add a PDF viewer in WordPress.

2. WP Advanced PDF

WP Advanced PDF plugin allows your users to download your posts and pages in PDF format. You can enable the PDF download for all users or just for registered users. You can use custom fonts, logo, and even add a watermark to your PDF files.

3. PDF & Print by BestWebSoft

As the name suggests, this plugin adds a PDF download and print button to your WordPress posts, pages, and custom post types. You can add your website title, featured image, custom styles, and fonts. The plugin can also execute shortcodes when generating PDFs or creating a printer friendly version.

4. PDF Image Generator

PDF Image Generator creates a cover image for PDF Files you add in WordPress posts for download. The plugin can generate this cover image by either using the first page in the PDF or featured image. The download icon will then display the thumbnail image linked to PDF file.

For this plugin to work your WordPress hosting provider should have ImageMagick and GhostScript installed on their server.

5. PDF Thumbnails

Similar to the previous plugin, PDF thumbnail also generates a thumbnail of the first page of your PDF file during the upload. However, your PDF file and the thumbnail image remain as two separate files. You will need to manually insert the generated thumbnail and then link it to the PDF file.

6. DK PDF

This powerful plugin allows users to download your posts and pages in PDF format by clicking on a button. It comes with an easy interface to setup the placement of the PDF download button and create your own custom header and footer for PDF downloads.

The plugin also comes with shortcodes that allow you to control what content goes inside the PDF. You can also hide the content you don’t want to be included into PDF download.

7. PDF Embedder

As the name suggests, PDF Embedder plugin allows you to embed PDF files in WordPress posts and pages. The plugin uses JavaScript to embed files with a fully functional toolbar allowing users to zoom, navigate, and even download the PDF file.

8. WordPress PDF Light Viewer Plugin

WordPress PDF Lite Viewer plugin is particularly good at embedding very large PDF files. It uses Turn.js JavaScript library to display PDF files as flipbooks with thumbnail navigation. The PDF viewer comes with zoom, navigation, and fullscreen buttons. It is also fully responsive and can work on different device sizes.

9. BSK PDF Manager

BSK PDF Manager is a file manager for PDF files on a WordPress site. If you upload PDF files often, then you may want to categorize them, display them as lists, or a single download. This plugin makes it easier to manage PDF files in WordPress.

Bonus Plugins

These plugins do not offer a way generate or embed PDF files. However, if you serve PDF files on your WordPress site, then you may find them helpful.

10. SearchWP

SearchWP is a paid WordPress plugin. It allows you to add a better search experience to your WordPress site. One of the features of this plugin is the ability to search the text inside PDF files. However, it cannot search PDF files that are encrypted, stored outside media library, or have images as text. See our guide on how to improve WordPress search with SearchWP

11. OptinMonster

OptinMonster is a powerful tool that helps you grow your email list. You can convert abandoning visitors into subscribers by using OptinMonster. You can ask users to signup for your email list in exchange for free download PDF resource.

You can also use it to offer content upgrades. See this list of 30 content upgrade ideas to 10X your subscribers.

We hope this article helped you find the best PDF plugins for WordPress. You may also want to see our list of 24 must have WordPress plugins for business websites.

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

The post 9 Best PDF Plugins for WordPress appeared first on WPBeginner.

How to Change the Author of a Post in WordPress

Do you want to change the author of a post in WordPress? Sometimes you may need to display a different author, then the person who added the post in WordPress. You do not need to copy and paste the entire WordPress post with a different user account. In this article, we will show you how to easily change the author of a post in WordPress with just a few clicks.

Before You Change The Author of a Post in WordPress

If you just want to show your own name on a post written by some other user on your WordPress site, then you are ready to follow the instructions in this article.

On the other hand, if you want to show a different user as author, then first you need to make sure that this user exists on your WordPress site. See our guide on how to add new users and authors in WordPress for detailed instructions.

You can see and manage all users on your WordPress site by visiting the Users page when logged in with your WordPress administrator account.

If you just want to change the way your name is displayed, then check out our guide on how to add or change your full name in WordPress.

Having said that, let’s see how to quickly and easily change the author of a post in WordPress.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

Changing Author of a WordPress Post

First you need to edit the post or page where you want to change the author name. On the post edit screen, you need to click on the Screen Options menu at the top right corner of the screen.

This will show a flydown menu on the screen with a bunch of options. You need to check the box next to ‘Author’ option.

After that, you need to scroll down on the post edit screen just below the post editor. You will see the Author box there.

Simply click on the drop down menu and select a different author.

Don’t forget to click on the Save Draft or Update button to save your changes.

That’s all, you have successfully changed the author of a post in WordPress.

Quickly Change Author for Multiple Posts in WordPress

Changing author by editing a post is easy. However, if you have to do this for multiple posts, then it would take quite a lot of time to do that.

There is an easier way to quickly change author for multiple WordPress posts at once. To bulk update authors, click on the Posts menu from your WordPress admin bar. This will list all the posts on your WordPress site.

By default, WordPress shows 20 posts per page. If you want to display more posts, then you need to click on the Screen Options and change the number of posts you want to display.

Now you need to select the posts where you want to change the author. After selecting posts, select ‘Edit’ from ‘Bulk Actions’ dropdown menu and then click the ‘Apply Button’.

WordPress will now show you Bulk Edit metabox. You need to select the new author by clicking on the dropdown menu next to Author option.

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

That’s all, you have successfully changed the author for multiple WordPress posts without editing them individually.

We hope this article helped you learn how to change the author of a post in WordPress. You may also want to see our comparison of the best WordPress backup plugins.

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

The post How to Change the Author of a Post in WordPress appeared first on WPBeginner.

How to Delay Posts From Appearing in WordPress RSS Feed

Recently, one of our readers asked if it’s possible to delay posts from appearing in the WordPress RSS feed? Delaying posts in your RSS feed can save you from accidental publishing and beat content scrapers in SEO. In this article, we will show you how to delay post from appearing in WordPress RSS feed.

Why Delay Feed in WordPress?

Sometimes you may end up with a grammar or spelling mistake in your article. The mistake goes live and is distributed to your RSS feed subscribers. If you have email subscriptions on your WordPress blog, then those subscribers will get it as well.

By adding a delay between your RSS feed and your live site, you get a little time window to catch an error on a live site and fix it.

RSS feeds are also used by content scraping websites. They use it to monitor your content and copy your posts as soon as they appear live.

If you have a new website with little authority, then a lot of times these content scrapers may end up beating you in the search results.

By delaying an article in the feed, you can give search engines enough time to crawl and index your content first.

Having said that, let’s see how to easily delay posts from appearing in WordPress RSS feed.

Delaying Posts in WordPress RSS Feed

This method requires you to add little code into WordPress. If this is your first time adding code manually, then take a look at our beginner’s guide on pasting snippets from web into WordPress.

You need to add the following code to your theme’s functions.php file or in a site-specific plugin.

function publish_later_on_feed($where) {

	global $wpdb;

	if ( is_feed() ) {
		// timestamp in WP-format
		$now = gmdate('Y-m-d H:i:s');

		// value for wait; + device
		$wait = '10'; // integer

		// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
		$device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR

		// add SQL-sytax to default $where
		$where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
	}
	return $where;
}

add_filter('posts_where', 'publish_later_on_feed');

This code checks to see if a WordPress feed is requested. After that it sets the current time and the time you want to add as delay between post’s original date and the current time.

After that it adds the timestamp difference as the WHERE clause to the original query. The original query will now only return the posts where timestamp difference is greater than the wait time.

In this code we have used 10 minutes as $wait or delay time. Feel free to change that into any number of minutes you want. For example, 60 for 1 hour or 120 for two hours.

We hope this article helped you learn how to easily delay posts from appearing in WordPress RSS feed. You may also want to see our guide on how to show content only to RSS subscribers in WordPress.

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

The post How to Delay Posts From Appearing in WordPress RSS Feed appeared first on WPBeginner.

How to Create a Mobile-Ready Responsive WordPress Menu

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily create a mobile-ready responsive WordPress menu.

This is an in-depth tutorial. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users.

By the end of this tutorial, you will learn how to create a slide-in mobile menu, dropdown mobile menu, and a toggle mobile menu.

Ready? Let’s get started.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

Method 1: Add a Responsive Menu in WordPress Using a Plugin

This method is easier and recommended for beginners as it requires no custom coding.

In this method, we will be creating a hamburger menu that slides out on mobile screen.

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

Upon activation, the plugin will add a new menu item labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

First you need to enter the width of screen at which point the plugin will start showing responsive menu. The default value is 800px which should work for most websites.

After that, you need to select the menu you would like to use for your responsive menu. If you haven’t created a menu yet, then you can create one by visiting Appearance » Menus. See our guide on how to add navigation menu in WordPress for detailed instructions.

Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens.

Don’t forget to click on the ‘Update Options’ button to store your settings.

You can now visit your website and resize your browser screen to see the responsive menu in action.

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

Method 2: Add a Drop Down Select Menu Using a Plugin

Another way to add a responsive menu is by adding a drop down select menu. This method does not require any coding skills, so it is recommended for beginners.

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

Upon activation, you need to visit Appearance » Responsive Select to configure plugin settings.

You need to scroll down to ‘Activate theme locations’ section. By default, the plugin is activated on all theme locations. You can change that by selectively turning it on for specific theme locations.

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

You can now visit your website and resize browser screen to see responsive select menu in action.

Method 3: Creating Mobile Friendly Responsive Menu with Toggle Effect

One of the most common used method to display a menu on mobile screens is by using the toggle effect.

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

First you need to open a text editor like notepad and paste this code.

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

Now you need to save this file as navigation.js on your desktop.

Next, you need to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

Replace your-theme-directory with your current theme’s directory. If your theme directory does not have a js folder, then you need to create it.

After uploading the JavaScript file, the next step is to make sure your WordPress site loads this JavaScript. You will need to add the following code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Now we need to add the navigation menu into our WordPress theme. Usually navigation menu is added into a theme’s header.php file.

<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle">Menu</button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

We are assuming that the theme location defined by your theme is called primary. If it is not, then use the theme location defined by your WordPress theme.

The final step is to add CSS so that our menu uses the right CSS classes for toggle to work when viewed on mobile devices.

/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	
	}

You can now visit your website and resize your browser screen to see your responsive toggle menu in action.

Troubleshooting: Depending on your WordPress theme you may need to adjust the CSS. Use inspect element tool to figure out the CSS conflicts with your theme.

Method 4: Add a Slide-In Mobile Menu in WordPress

Another common technique to add a mobile menu is by using a slide-in panel menu (as shown in Method 1).

Method 4 requires you to add code to your WordPress theme files, and it is just a different way of accomplishing the same results as Method 1.

First, you need to open a plain text editor like Notepad and add the following code to a blank text file.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Don’t forget to replace example.com with your own domain name and your-theme with your actual theme directory. Save this file as slidepanel.js to your desktop.

Now you will need an image which will be used as a menu icon. A hamburger icon is most commonly used as the menu icon. You will find tons of such images from different websites. We will be using the menu icon from Google Material Icons library.

Once you find an image that you want to use, save it as menu.png.

Next, you need to open a FTP client client and upload slidepanel.js file to /wp-content/your-theme/js/ folder.

If your theme directory does not have the JS folder, then you need to create tit and then upload your file.

After that, you need to upload menu.png file to /wp-content/themes/your-theme/images/ folder.

Once the files are uploaded, we need to make sure that your theme loads the JavaScript file you just added. We will achieve this by enqueuing the JavaScript file.

Add this code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Now we need to add the actual code in your theme’s header.php file to display the navigation menu. You should look for code similar to this:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

You want to wrap existing navigation menu with the HTML code to display your slide panel menu on smaller screens.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Notice that your theme’s navigation menu is still there. We have just wrapped it around HTML that we need to trigger slidepanel menu.

Last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon.

Here is a sample CSS that you can use as an starting point:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

Here is how it looked on our demo website:

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our guide on how to add a fullscreen responsive menu in WordPress

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

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

How to Rename the Uncategorized Category in WordPress

If you have wanted to rename the Uncategorized category in WordPress, then you’re not the first one. Often WordPress beginners ask us if it’s possible to remove or rename the uncategorized category in WordPress. In this article, we will show you how to rename the uncategorized category, and how to change the default category in WordPress.

What is Default Category in WordPress?

Categories and tags are the two default taxonomies that come with every new WordPress install. By design, your WordPress posts must be filed under at least one category.

If you forget to assign a category to your post, then it is automatically filed under your default category. On a new WordPress install, this default category is titled ‘Uncategorized’.

Usually, you can just go to Posts » Categories and delete a category. However, you cannot delete a default category until you assign another category to be used as default.

There are two ways to solve this issue. You can either rename the default category from uncategorized to something more meaningful, or you can set a new default category.

Having said that, let’s see how you can rename uncategorized category or set a new default category.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

Renaming Uncategorized Category in WordPress

You cannot delete a default category, but you can rename it. You need to visit Posts » Categories page in the WordPress admin and click on the edit link below the Uncategorized category.

This will bring you to the category edit screen where you can rename your category and change its URL slug.

If your site is not live or indexed by search engines, then you can change the URL slug.

However, if your site is live, then changing the URL slug will result into 404 errors when search engines or actual users visit the old URL.

Don’t worry, we will show you how to setup redirects later in this article.

Changing Default Category in WordPress

You can also easily change the default category in WordPress. First make sure you have a category other than uncategorized available.

If you have a category that you would like to use as default, then you can skip this step. Otherwise, go to Posts » Categories and create a new category.

Now visit Settings » Writing page. The first option on the page is to set a default post category.

Click on the drop down menu next to it and select the default category you would like to use.

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

WordPress will now use the category you selected as the default category. If you forget to assign a category to a post, then it will be filed under this default category.

However, posts filed under uncategorized will not be moved to the new category. You can edit those posts and change their category.

If there are just a couple of posts, then you can do it manually. Otherwise, you may want to check out our guide on how to bulk move posts to categories and tags in WordPress.

You can also delete the ‘Uncategorized’ category. If a post was only filed under uncategorized, then it will be automatically moved to your new default category.

Redirecting Old Uncategorized URL

If your site was live when you renamed the uncategorized category slug, or deleted the uncategorized category, then users and search engines will see a 404 page for the old URL.

Here is how you can easily fix that and redirect users to your new category URL or the renamed URL.

First you need to install and activate the Simple 301 Redirects plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » 301 Redirects page and enter your old uncategorized url in the Request field and your new URL into the destination field.

For example, if your old uncategorized URL was like this

http://example.com/category/uncategorized/

Then you will enter /category/uncategorized/ in the request field.

In the destination field, you need to enter the full new URL. For example:

http://example.com/category/general/

Don’t forget to click on the save changes button to store your settings. For detailed instructions see our beginner’s guide to creating redirects in WordPress.

That’s all. Now visitors coming to your old ‘Uncategorized’ category URL, will be redirected to the new URL.

We hope this guide helped you learn how to rename uncategorized category as well as how to set a new default category in WordPress. You may also want to check out our 10 most wanted category hacks and plugins for WordPress.

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

The post How to Rename the Uncategorized Category in WordPress appeared first on WPBeginner.