Videos. They’re everywhere. Whether it be on a website, app, social media, or YouTube. They grab our attention, make us watch, and we get hooked. So yes — featuring a video on your WordPress site can be indeed powerful in numerous ways.

A good example is that videos have the highest shares and engagement right up there beside photos. In fact, 54% of consumers want to see more video content.

On top of that, 8 out of 10 people have purchased a piece of software or app after watching a video, and 88% of video marketing professionals report that they’re satisfied with the ROI of their video marketing efforts on social media.

But if you have a fantastic idea for a video, or you’ve got one already, how do you go about adding it to your site? In this definitive guide, we go through everything you need to know about video, from technical details on aspect ratios and codecs, though to self-hosted versus hosted videos, encoding videos for multiple devices, and getting started uploading videos to your WordPress site.

Let’s get started.

1. Common Video Terms Defined
2. Uploading and Adding Video File Types to WordPress
3. What Settings Should You Use?
4. Self Hosted vs Hosted Videos
5. Uploading Videos to WordPress
6. Uploading Videos to the Media Library
7. Advice From Our In-House Video Expert Joshua Dailey
8. Encoding Your Videos for Multiple Devices
9. Displaying Responsive Videos in WordPress
10. Summary

Common Video Terms Defined

Before we dive right into how videos work with WordPress, it might be helpful to first go through the common definitions when it comes to videos. In particular, understanding the terms used when uploading and displaying videos on your site can help eliminate confusion.

And if you think you already know video terms inside out, the definitions below may be a helpful reminder.

Aspect Ratio – This term is used most commonly for photos, TVs, and video.

It refers to the proportional size of the image or screen in width, then length in the form of a ratio.

For example, a common aspect ratio is 16:9, where 16 units is for the width of the video or image and nine units is the length.

Resolution – It’s another word for the quality of the video image and can be measured in pixels per inch (PPI) or more commonly, dots per inch (DPI). These units are used to explain how many dots of color (for printed images) or how many pixels of color (for digital content) per square inch are displayed within an image or video. A higher DPI or PPI means a higher resolution and better quality. The standard for high quality (HQ) video is 300 PPI.

When it comes to displaying video, resolution is usually written in the form of width x height where width refers to the number of horizontal pixels displayed and height is the number of vertical pixels displayed on the screen.

When written in short form, it looks like height p, or to use a common example, 1080p.

Standard Definition (SD) – A common video resolution is 640×480 or 480p and is considered standard definition. A video in standard definition appears the size of an older, mostly square TV.

High Definition (HD) – Most TVs and computer monitors made today are in 1920×1080 or also known as 1080p. The picture is clear and crisp because the monitors and screen are made for videos that have a high resolution.

There are also other resolutions that are considered high definition such as 1920×720. This also includes the aspect ratios of 2.39:1 and 1.85:1 which are considered super widescreen and are commonly used for films that you can check out at your favorite movie theater.

Interlaced – An older way for video signals to display video on a screen. Signals send horizontal lines of the video to the screen which together form the moving images. Interlaced videos display every other horizontal line and switch between odd and even numbered lines.

If you still have a big box TV you bought in the 90s, videos on it will be displayed as interlaced. It was the old standard for videos.

Progressive Scan – This is the new standard for videos. Video signals display each horizontal line for a richer and more high quality picture, unlike the interlaced alternate which displays every other line.

If you bought a flat screen TV or monitor since they have been first made, then you’ll own a screen that displays videos with a progressive scan.

Frame Rate – This is the speed at which a sensor captures video in a second. A single frame looks like a photograph. When you string each frame together, you get a moving picture or in other words, a video.

Frames Per Second (FPS) – This term is used to describe the number of frames used per second of a video. Common FPS include 24, 25, 29.97, 30 and 50. When you have a video that’s 30 FPS or more, it’s considered HD.

Bitrate – This indicates the amount of data that’s transferred per second when a video is being uploaded, usually measured in megabits per second (mbps) or kilobits per second (kbps).

If you find a video host that uploads videos with a bitrate of less than 1000 kbps, it’s best to search for another host since the upload process will be too slow for most people.

Compression – While this term can apply to more than just videos, in this case, it means decreasing the amount of data a video file holds.

It’s a great idea to compress your videos because they will upload to your site or your video hosting quicker. If you choose to let users download your video, this will also be a lot faster.

Each video hosting service may have different compression guidelines and suggestions so it may be worth looking into if you choose to host your videos outside of your WordPress site.

Lossy – When you are compressing a video file, a lossy compression means the quality of the video decreases when compared to the original file. Despite the lesser quality, a lossy compression usually results in a smaller file size.

Lossless – This would be the opposite of lossy when you are compressing a video file. While lossless compression means the original file and compressed file have the same video quality, this usually results in a larger file size when compared to lossy compressed files.

Codec – This is most commonly a method of compressing and decompressing videos. It’s also known as a container.

A software that compresses videos is also often referred to as a codec if it can both compress and decompress videos. If it can only compress videos is commonly referred to as an encoder and a software that only decompresses is usually called a decoder.

Common codecs include H.264/MPEG-4, VP6 and WMV.

Encoding – This describes the process of taking an original (source) video file and converting it from one extension to another for viewing on different devices and browsers.

For example, converting a video file called myvideo.mov to myvideo.mp4 allows the video to be uploaded and played on a WordPress site.

Since different browsers and mobile devices accept different kinds of video file formats, encoding your videos can help ensure your videos are viewable to all your visitors no matter how they choose to view your video.

Uploading and Adding Video File Types to WordPress

Speaking of encoding, there are certain video file extensions that WordPress lets you upload by default.

• .MP4, .M4V (MPEG-4)
• .MOV (QuickTime)
• .WMV (Windows Media Video)
• .AVI
• .MPG
• .OGV (Ogg)
• .3GP (3GPP)
• .3G2 (3GPP2)

There are many files types which aren’t accepted by default for security reasons. If you don’t need a file type that’s not accepted by WordPress, it’s best just to not use it.

If you would still like to let you and your users upload more file types that aren’t allowed by default, you can do so by adding some code to the bottom of your theme’s functions.php file under wp-content > themes > your-theme.

Just remember that any changes you make to your theme’s functions.php file get erased after you install an update to your theme.

To prevent this from happening, you can create a child theme. If you need pointers on how to do this, check out our post How to Create a WordPress Child Theme.

Here’s the code you would need to add to include additional file types:

To add the file extension of your choice, change the word extension on line four to the actual file extension you would like to add, then replace mime/type with the correct mime type which you can find on the MIME Type List from FreeFormatter.com.

To add a second file extension, change doc and application/msword to your desired extension and type on line six. You can also delete this line if you only wish to add one file type.

If you would like to remove a file type from the list of accepted file types, while adding others, add this code instead:

You would add it to the same place, to the bottom of the functions.php file found under wp-content > themes > your-theme.

Just be sure to edit line eight to reflect the extension you want to remove. In this example, you would change exe to the file type you want eliminated.

You and your users can now upload the file types you added.

If you would prefer to avoid adding code to your theme, you can still add the file extensions you want with the WP Add Mime Types plugin or Media Library Assistant plugins.

What Settings Should You Use?

Before you start uploading your videos, you might be wondering what kind of settings you should choose to ensure they display well. At the end of the day, this may look different for everyone, especially if you decide to upload to a video hosting service since each one usually has its own recommended settings.

On the other hand, if you’re self-hosting your videos, a general rule of thumb can be helpful in deciding what your settings should look like for your particular project.

These recommended from Video4Change should get you off to a good start:

Format: MP4

Video

• Codec: H264 (High profile)
• Frame Rate: 24, 25 or 30 (Constant)
• Frame Size / Resolution: 1280 x 720 (720p)
• Fields: Progressive
• Bitrate: 5000 – 10000 kbps

Audio

• Codec: AAC-LC
• Bitrate: 320 kbit/s
• Sample Rate: 44.100 OR 48,000 kHz (retain original sample rate)

Just keep in mind that a higher bitrate will result in a larger file size so if your goal is to keep things neat and tight, choose a bitrate closer to 5000 kilobits per second.

Now you’re almost ready to upload your videos.

Self Hosted vs Hosted Videos

Before diving into the ins and outs of adding videos to your site, it’s important to first understand where your videos should be stored. To that end, there are two options: self-hosted and hosted.

Self-hosted your videos means that they’re stored on your server with your WordPress site.

Hosted option means your videos are stored elsewhere and linked or embedded to your site.

There are many reasons why you would choose one over the other and here are some pointers to help you determine which option is right for you:

• Do you plan on displaying many videos that are high-quality or high definition? If so, your server’s storage limit can fill up fast and it may be appropriate to host your videos elsewhere.
• The kind of hosting you have set up is important:
  • Shared hosting – If you’re able to load even one high-quality video with a large file size, consider yourself lucky. Definitely consider hosting your videos somewhere else.
  • VPS hosting – You may have enough room to store quite a few videos as long as you don’t plan on continuously adding more as time goes on.
  • Dedicated hosting – You should be good to go and have quite a lot of room for many videos, although, depending on your set up and if you would like to add many videos over time, you may need to upgrade later on.
• To host videos well, you should make sure your site and server are optimized for speed – Be sure that your server has an ample amount of RAM and a fairly generous processor speed. The amount you need depends on how many videos you plan on self-hosting. As a general rule of thumb, a video that’s 1GB in size should comfortably fit into a hosting plan that has two and a half gigabytes of RAM, a minimum of a dual-core processor and 1500 MB of storage space.
• Make sure you have enough bandwidth allotted to your hosting package – How many visitors are you expecting? If you think your site will blow up with popularity, you should consider how much bandwidth your site is allowed to use up. The more visitors you’re expecting, the more bandwidth you’re going to need. To give you an idea of how much bandwidth you might need, a one-gigabyte video played or downloaded 1000 times needs one terabyte of bandwidth (that’s 1000 GB). If you’re planning to display many high-quality videos with tons of visits to your site, you should consider hosting your site somewhere other than your own server.

If your server doesn’t have a lot of storage space, speed and bandwidth, definitely consider hosting your videos outside of your server. If you have lots of room on your server as well as tons of speed and allotted bandwidth, but want to host heaps of videos with thousands of visitors, also consider hosting your videos somewhere other than your server.

On the other hand, if you have a server with tons of storage space, a few fast processors and lots of bandwidth giving you breathing room, you should be able to host at least quite few high resolution videos with no problems.

If you’re still not sure if you have enough resources to host your own videos, but want to, it’s a great idea to ask your hosting provider’s customer service team. They can best help you sort out the best option for your specific needs.

Uploading Videos to WordPress

With the introduction of Gutenberg, it’s never been easier to upload a video and audio into WordPress. Now all it takes is just a few clicks and you’re ready to go.

If you have decided to self host your videos, here’s how to add them to your WordPress site.

Adding Videos to Your Post or Page

In the Block Editor, there is already a video block that you can simply upload your video into, and then place wherever you would like in your post or page.

Here, you have an option to get your video by uploading, the Media Library, or by insterting a URL.

Since you’re uploading, you would click on the Upload option.

You’ll choose a file, upload your media, and that’s all.

If you prefer to use the Classic editor, in a post or page, click the Add Media button, then click the Upload Media tab at the top if you are not already on that tab when the inline pop-up opens.

Then, click the Select Files button that appears in the middle of the page.

Choose the video file you would like to upload and follow your computer’s prompt.

Once the file uploads, enter a title, caption and description as desired on the right-hand side and be sure that the Embed Media Player option is selected from the Embed or Link drop down box under the Attachment Display Settings. It should be selected by default.

Finally, click the Insert into post button and your video will be added to your post or page, complete with a thumbnail.

Adding a Video Playlist to a Post or Page

If you have uploaded two or more videos, you can create a playlist.

To do this, click the Add Media button again, select Create Video Playlist from the menu on the left hand side of the pop-up, then click on the icons for the videos you want to add.

If you make a mistake, just click the the check mark on the top, right-hand corner of the icon for the video you want to remove.

You can also click the Clear link at the bottom of the window to unselect all your choices.

Once you are done making your selections, click each video to add the title, caption and description you want on the right for each of your videos, then click the Create a new video playlist button at the bottom of the Attachment Details section.

At this point, you can edit the titles of the videos you selected, add more videos by clicking the Add to Video Playlist menu item on the left and reverse the order of your selected videos by clicking the Reverse order button beside the Playlist Settings on the right.

Under the settings, there are two checkboxes:

• Show Video List – This option displays your videos with a thumbnail.
• Show Images – Checking the box for this setting displays a text list of your videos.

When you’re done making your selections, click the Insert video playlist button on the bottom-right.

Last, but not least of all, be sure to click the Publish or Update button on your post or page to save your changes.

Uploading Videos to the Media Library

If you would like to upload videos, but don’t want to insert them into a post right away, then you can do so by going to Media > Add New in your admin dashboard and clicking the Select Files button. Follow your computer’s prompts to select and upload a video.

Once the upload has been completed, click on the file’s icon which appears on the page after the loading bar appears to complete. On the Attachment Details inline pop-up that appears, click on the  Edit More Details link at the bottom.

Once the Edit Media page loads, you can easily customize your videos settings by editing the title, adding a caption and description.

On this page, you should also see an preview image displayed in the player preview. If you would like to change the image that appears and set your own to display, click the Set featured image link on the bottom, right-hand side of the page.

The media uploader pop-up window should appear where you can select an image from your media library.

On this page, you should also see an preview image displayed in the player preview. If you would like to change the image that appears and set your own to display, click the Set featured image link on the bottom, right-hand side of the page.

The media uploader pop-up window should appear where you can select an image from your media library.

You can also upload a new one by clicking Upload files > Select Files, then following your computer’s prompt.

Add the title, caption, alt text and description you want, then click the Set featured image button at the button, right-hand corner.

Finally, click the Update button and your new featured image and other changes should save. Your video is now ready to be added to a post or page at your convenience.

Just remember that in order for your videos to have the option to be embedded into your posts and pages and actually be playable with the default WordPress player, your video files will need to be encoded with the MPEG-4 codec or in other words, have the .mp4 extension.

If you would like to choose a different video player, other than the default one WordPress comes with, check out our post Free WordPress Video Plugins For Advanced Embedding.

Advice From Our In-House Video Expert Joshua Dailey

I asked our videographer Joshua Dailey his advice when working with video, and in particular what advice he would give to businesses working with video.

Joshua directs, writes and scripts the product videos here at WPMU DEV and has help from other talented videographers on our team.

“We are working to give users a better understanding of WPMU DEV products and WordPress so they can make quicker, informed decisions about what products will best fit their needs.” – Joshua Dailey

“With our tutorials, we are trying to help people get started as quickly as possible.” – Joshua Dailey

Here’s Joshua’s top 10 list for UI and UX best practices, in no particular order:

1. Find the Right Host

It’s important to find one that can accommodate all of your needs before you upload over 100 videos. Whether that’s self-hosting, free hosting or premium hosting, make sure your host not only meets your current needs, but can and is willing to grow to meet your future needs.

Moving WPMU DEV from Vimeo to Wistia was a lot of work. It was worth it, but it would have saved a lot of time and money had we found them first. You can learn more about the transitioning process in our article Why We Moved From Vimeo Pro to Wistia – And Why You Should Too.

2. Videos Need to be Encoded

Make sure you videos are encoded correctly. First, for the best results, but second, for playback on all types of devices. This is something you may not initially think about if you’re self-hosting your videos.

If you have only ever used YouTube, Vimeo or Wistia, they reencode your media so your videos work on all types of devices – in all types of browsers. When self-hosting you may need to store multiple versions of the same video in different formats or you may not be able to view your video depending on the browser or device they are using.

3. A World-Wide Audience Should Have Equal Access

If your site targets users from around the world, remember that internet speeds can make it near impossible for some of your users to access heavy video content. This is improving all the time, but we are far from having equal access, globally.

This doesn’t mean you shouldn’t use video since it’s a powerful form of communication, but it does mean you should be aware of who your audience is when sharing. It’s also important to make sure you’re using an appropriate player and compression method.

4. Presentation Matters

It’s easy for your users to skip clicking on a video based on the thumbnail alone. Remember, video thumbnails matter.

5. Test Your Videos for Performance

Try your crazy ideas but know when they are working and when they’re not. We spend a lot of time creating videos, sharing them internally and adjusting content before pushing them live. This is an important step in ensuring each member in your audience has equal and full access to your videos.

6. Know Your Audience

Once a video is published, we spend time watching how users interact with our content and make even more adjustments if needed. For example, we did some long, in-depth video tutorials about our plugins, but found short setup guides to be more accessible to more viewers.

Thanks to tracking viewer engagement with analytics, we were able to determine what our audience prefers, especially since it’s not the same across all businesses.

7. Keep a Close Eye On Quality

Audio done well often goes unnoticed and audio done poorly tricks viewers into believing the whole video is trash. Be careful when using video as a sales tool because the quality of your videos reflects on the quality of your product or service.

8. Plan Your Video Marketing Thoroughly

Customers and end users equate the quality of your marketing to the quality of your product even if it’s not an accurate reflection. Having a solid marketing strategy helps keep your end user happy with your business.

9. Videos Should be Accessible to Everyone

According to preliminary research from the National Health Interview Survey an estimated 50 million adult Americans have been reported as having trouble seeing, even with the aid of glasses and contacts or are legally blind.

The National Library of Medicine also reports that around 1 in 20 Americans have a severe hearing impairment or are legally deaf. With these numbers in mind, it’s important to make sure your videos are accessible to individuals who can identify as having these impairments.

Uploading closed captioning documents to your videos helps those who are hearing impaired to view your videos with ease. Similarly, including a transcript of your videos assists those who are visually impaired to access your videos.

Making sure your video player includes keyboard navigation and support for screen readers are also important. All videos should play only when the play button is clicked or otherwise accessed with a keyboard to be considered accessible.

If your videos play automatically on page load, they aren’t accessible and you should adjust your settings.

Not to mention the plain idea that videos that play automatically can often be startling, especially when your users aren’t aware of where the sound is suddenly coming from or if the volume is set to be high. It’s also a drain on most end user’s internet bill since they need to pay for streaming videos.

It may not be a huge concern for desktop users at home or in the office, but mobile users often have a much smaller and limited data plan with their carrier and each played video ends up costing them. This is why you should consider leaving out your video backgrounds, if only for mobile themes, as well as eliminate videos which play automatically.

10. Responsive Design and Style

Part of keeping your videos accessible to all your users is making sure that they’re responsive on screens of different sizes from browsers to mobile devices. This can be easily achieved with a responsive player, a video host or some CSS.

With these tips in mind, let’s look at how you can embed videos that are encoded across multiple devices and how to make your videos responsive for self-hosted videos.

Encoding Your Videos for Multiple Devices

As Josh has mentioned, it’s easy to forget that self-hosted videos require you to encode them yourself since it’s not done automatically, such as with the many video hosting options out there. Browsers and mobile devices often have different requirements when it comes to the video compression methods that are able to be displayed.

Once you upload your videos to your WordPress site, you can use the video shortcode to display them on a post or page. You can also add parameters so certain video files play depending on the device your visitors use to view the page.

Here’s what the shortcode looks like with a single video attached:

To use this shortcode, you would just need to change myvideo.mp4 to the source video in your media library. You can even type in a URL to an external source if you still want to use the WordPress video player without self-hosting your videos.

To add alternate video file options to play on different devices, this is the shortcode with the parameters included that you would use:

You don’t need to spend a lot of time to define the different devices you want to support. Just enter in your video file source just like the previous example, while also including the correct file type.

Once your visitor starts loading the page, WordPress detects what file type the visitor’s device supports and automatically loads that video file on the page based on that shortcode. Pretty cool, don’t you think?

For example, if you wanted to add a flash (.flv) video to the list, you would enter a space after the last parameter, then add flv="myvideo.flv" and save the page or post. Don’t forget to change myvideo.flv to your actual video file listed in your media library or URL to the external source.

The file types you can use with the video shortcode are: .MP4, .M4v, .WEBM, .OGV, .WMV, .FLV

There are also other options you could include other than the source file.

Adding any of the options below before or after src in the above examples adds different functionalities to the WordPress player.

• poster – Adds a specific feature image to the video player. By default, this is set to none.
• loop – Adds the functionality of automatically replaying the video on a loop. To do this, set it to “on” instead of its default setting which is “off.”
• autoplay – If set to “on,” your video can autoplay when the page loads. By default, this setting is set to “off” which is also our recommendation to remain fully accessible to the hearing and visually impaired.
• preload – Sets the data that’s loaded automatically. The default is “metadata” which loads only the video’s metadata, but you could choose “auto” to load everything or “none” to not load the video at all.
• height – If you want to display a different height of the video other than the default size of the uploaded video.
• width – You can also change the width in the same way if you want a different size than the original source video in your media library.

If you’re a developer and want to experiment with the code for this shortcode, you can find it in the media.php file under the wp-includes folder.

Once you have added your custom video shortcode and saved your changes, you’re all ready to go. That’s all you need to do to ensure your videos play across devices and browsers. Really, that’s it!

Displaying Responsive Videos in WordPress

With Google’s new algorithm, your search ranking can tank quickly if your site isn’t fully responsive. Google also doesn’t consider sites that need you to scroll horizontally to be responsive.

Videos can be a huge offender for this if you’re not careful so it’s important to test out your site to make sure it works well in both desktop browsers as well as mobile ones.

Luckily, if you use the default WordPress player, your videos should be fully responsive. If you use one of the top video hosting services to display your videos, you’re likely good to go as well.

This can sometimes be a problem if you are using an untested player or an iframe to display your videos. If you choose to use a different player, make sure to thoroughly test it out for responsiveness.

If you decide to display your videos with an iframe, it’s important to add some extra code to ensure its responsiveness. It’s important to remember that many video hosts such as YouTube and Vimeo give you the option to embed your videos with an iframe.

Upload a copy to your media library, then head over to your WordPress files. On each page file you use for your particular theme – or at least the type of page where you want to display videos. For example, you can add this script to your /wp-content/themes/your-theme/page.php file to be able to display responsive videos embedded with iframes on your WordPress pages.

Edit the file and call the script toward the top of the page, after all the initial page notes.

You can call the script like this:

Save your file and that’s all you need to do. This isn’t necessarily the best solution since your videos aren’t guaranteed to look great.

It can also be a problem if your visitor’s browser fails to load the script. This is why using a player or embed option you know is fully responsive is often the safest option.

Summary

As demonstrated, videos can be a powerful, easy to enhance your viewers experience to your WordPress site.

To learn interesting ways to integrate video into your site check out some of our other posts: Using Appointments + to Setup and Streamline Client Consultations, How to Add a Video Background to Your WordPress Site in 4 Easy Steps and Best WordPress Video Chat Plugins – Based on Your Needs.

With just a little bit of coding you could have the foundation of your new menu set up quickly, and ready for you to style to match your theme.

If you would rather not mess around with code, there are many plugins that can do the heavy lifting for you, and also provide styling options.

No matter which option you choose, the guide below will help you make it happen.

How to Add Menus to Your WordPress Theme:

1. Construct a Child Theme
2. Creating New Menus
3. Adding Menu Locations to your Theme
4. Styling your Navigation Menu

Basic Housekeeping

To create a new menu you need to edit your theme files. Before making changes to any of your core files, it’s best to backup your entire site in case something goes wrong along the way. You’ll be able to restore your site quickly and it will be as though nothing ever happened.

You can manually backup your site via FTP or using a plugin, such as our very own Snapshot. Just be sure to save a copy of both your database and files in a location separate from your site to minimize the risk of losing your backup.

Constructing a Child Theme

To create new menus with code, you need to make changes that would be lost when you update your theme. Creating a child theme takes care of this issue.

You can find the details you need to create a child theme by checking out a couple of our other posts How to Create a WordPress Child Theme and How to Automagically Create Child Themes in WordPress.

You can also choose to create a whole new theme of your own or try it out on a local or test site.

You can check out these posts for more details on how to create a local install of WordPress:

• How to Develop WordPress Locally with MAMP
• How to Install XAMPP and WordPress Locally on PC/Windows
• How to Set Up WordPress Locally in 5 Minutes with DesktopServer
• The Quick and Easy Guide to Migrating a Local WordPress Installation to a Live Site
• How to Move WordPress for Local Development with XAMPP

Once you have set up one of these options, you’re free to start creating your extra navigation menus. Though, if you decide to use a plugin or theme framework, you don’t need to create a child theme.

Creating New Menus

To add a selectable menu location option in your admin dashboard under Appearance > Menus you need to do what’s called “register a menu.” All it takes is adding a snippet of code to your functions.php file located in wp-content > themes > your-theme.

In cPanel, click on the File Manager icon in the Files section on the homepage. If you haven’t previously set your File Manager to load to your site’s document root, navigate there now.

There’s a functions.php file in your /wp-includes/ folder, but that’s not the one you need to edit. Make sure you find the functions.php file that’s found in the theme you’re using. Otherwise, you would end up with errors when trying to add the code found later on.

Locate your functions.php file and click on it once followed by clicking the Edit button at the top of the page.

If a pop-up opens, simply click the Edit button at the bottom, right-hand side. You may not see one if you have previously disabled it.

Scroll to the bottom of the file. If you’d like to add only one menu, add the following code on a new line:

function register_my_menu() {
register_nav_menu('new-menu',__( 'New Menu' ));
}
add_action( 'init', 'register_my_menu' );

In this example, New Menu is the name that will appear in your admin dashboard’s menu page to make it understandable for human eyes. The new-menu name is what WordPress will understand to execute your code properly.

You can call your menu whatever you like, but make sure only the human-readable name contains spaces and capital letters.

If you would like to add multiple menus to your site, add this code on a new line instead:

function register_my_menus() {
  register_nav_menus(
    array(
      'new-menu' => __( 'New Menu' ),
      'another-menu' => __( 'Another Menu' ),
      'an-extra-menu' => __( 'An Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

You can add as many new menus as you’d like with this method. The same rules will apply when naming them.

Save the changes you made to the file. Now all that’s left is adding the new menu to your site.

Adding Menu Locations to Your Theme

This is where you need to decide where you’d like to place your menu. If you’d like your menu to appear at the top of your page, you’ll need to edit the header.php file. You can also put it in your footer which means you would edit the footer.php file.

You can even display a menu on a page by editing its template file or to a sidebar, editing its sidebar.php file.

You can place your new menu where ever you’d like. Here’s the minimum amount of code you need to add to any of these locations:

<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

Just replace new-menu with WordPress-readable name you chose. You probably want to style your menu with CSS so it goes beyond basic functionality and also looks great. To do this, you’ll need to create a class and add it to your theme with the following code.

<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>

Just like before, replace new-menu with the name you chose. In this example, I named the class I created new_menu_class. You can change this, but just be sure to update this code to reflect the adjustment.

Hit the Save button and head over to Appearance > Menus in your dashboard. You’ll notice your new menus will be listed under Theme Locations in the Menu Settings section.

You’ll now be able to see your new menu locations listed. When you add a menu, you can select one or all of the locations.

To have links displayed in your newly made menu locations, click create a new menu at the top of the page.

If you don’t already have a menu, you can enter a name for your menu in the field on the page, then click Create Menu. If you already have a menu previously created, you can click the create a new menu link toward the top of the page.

Once you have created a new menu, you can also manage the locations where they are displayed under the “Manage Locations” tab.

Styling, Plugins and Responsive Menus

Your new menu is now ready to be styled using CSS. The coding required is specific to the theme you’re using so I won’t go into it in this post, but we do have another post you can check out for that called How to Create an Awesome Responsive Menu for Your WordPress Theme. It also shows you how to create responsive menus that are mobile-ready.

If you would like an easier option, there are many plugins that will create responsive menus based on your theme’s styles. One of the best ones I’ve found is Responsive Menu.

Some notable mentions you may also find helpful are ShiftNav, WP Responsive Menu and Max Mega Menu.

Resources for Going Further

You now have the solid foundation you need to create additional menus for your theme and resources to help you go further. Whether you code it yourself, use a plugin or a theme framework, you now have a new menu on your WordPress site.

If you run into troubles, go ahead and ask our support heroes. They can give you expert advice and support to help solve just about any problem. You can open a ticket in our support forum and we’ll be right along to help you.

For more information on how to style your new theme, there are many resources you can check out and you can find them all in our post A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources.

You can also check out some of our other posts 10 Simple Tips for Learning CSS for WordPress, 25 Expert Tips for Cleaner CSS Coding for WordPress, 25 Pro Tips for Improving Your CSS Workflow and 5 Free CSS Plugins for Live Editing Your WordPress Site for more details on coding some CSS for your theme.

Deleting WordPress and re-installing it is such a hassle. Why not hit the reset button instead and return it to how it was when you first installed it?

In this post, I’ll show you how to reset your WordPress site in a few simple steps.

The second half of the tutorial will cover how easy it is to reset your WordPress site with a single-click on our Hosting, even if it’s a Multisite. This solution is particularly helpful for everyone, since the free reset plugins don’t work with WordPress Multisite installations perfectly.

Ready…Steady…Let’s go.

Still having trouble resetting your WordPress site after reading this post? Let our experts help! Big or small, our awesome support team can help you with any WordPress issue — and for FREE! Whether it’s Monday lunchtime or peak party hours on the weekend, our team is available 24/7.

Prefer a video instead? We have you covered.

How WordPress Works

Before we discuss the solution, let’s understand how WordPress works. You can, of course, skip this section and head to the solution right away, but I suggest you stay a bit.

WordPress is a series of files on your server working in tandem with a database (MySQL or MariaDB) to store and retrieve information.

By default, WordPress ties every installation to a single database on your web host. This database stores all the information of your WordPress site: settings, blog posts, pages, comments, usernames, passwords, links to files, where to find them, etc.

It stores all this information as values under distinct tables in the database.

Think of a database as a huge box with multiple books inside it, aka tables. And each book stores particular information, like comments or settings. And each entry in the book is a value, like your username, email, etc.

If you could reset all the tables in the database to their initial values, aka erase all the pages of all your books, you’d be resetting your WordPress installation.

But this won’t delete the files you’ve uploaded or downloaded to your WordPress site, such as media, themes, plugins, etc. However, most WordPress reset plugins provide an option to delete these files, either selectively or all of them.

Now that you’ve understood the theory, let’s move ahead with the practicals!

How to Reset a WordPress Site (Standalone Installations)

1. Install WP Reset Plugin
2. Go to WP Reset Dashboard
3. Hit the Reset Button
4. Cleaning Your Old WordPress Files
5. Delete Transients
6. Clean Uploads Folder
7. Reset Theme Options
8. Delete Themes
9. Delete Plugins
10. Empty or Delete Custom Tables
11. Delete .htaccess File

Step 1: Install and Activate the WP Reset Plugin

The first step is to go to your WordPress Dashboard > Plugins > Add New, search for WP Reset plugin by WebFactory Ltd., and then click Install Now and Activate it.

If you’re wondering why I chose this plugin over others, it’s the highest-rated WordPress reset plugin with the most installs. It’s well-supported by its developer with regular updates, and it’s totally free!

Step 2: Go to WP Reset Dashboard

Next, go to Tools > WP Reset to open the WP Reset dashboard.

You’ll see a warning here saying that resetting will delete all your site’s posts, pages, custom post types, comments, media entries, users, and all the default WP database tables.

However, your media files, plugins, themes, any other uploads, your site’s settings, the logged-in user’s account, they will all remain as is.

You should keep in mind that the media files will not show in your media library even after the reset, though they’ll still be present on your server. We’ll cover how to delete them quickly later.

Step 3: Hit the Reset Button

Scroll down to the last section in the WP Reset dashboard called Reset.

Now, before you type in “reset” and hit the Reset WordPress button, in the section above Reset, you’ll find the Post-reset actions section.

Here, you can instruct WP Reset to Reactivate the current theme (off by default), Reactivate the WP Reset plugin (on by default), and Reactivate all currently active plugins (off by default).

I’ll go with the default options, but if you plan to install the same theme and plugins later, and just want to reset all the other content, checking these options here will save you time later.

Warning: You need to take note that this is 100% destructive. It will wipe out your current WordPress site completely, and there’s nothing you can do to get it back. THERE is NO UNDO! Unless, you’ve taken a backup of your site. If you haven’t, I recommend it highly. You can use UpdraftPlus or Snapshot Pro to do the same.

Cleaning Your Old WordPress Files

The Reset WordPress button is great to restore your site’s database to its initial condition. This ensures that your WordPress installation is back to its shiny new self. But it doesn’t clear out all your site’s old files.

To help you with performing a clean wipe, WP Reset comes with additional Tools in a separate tab.

Warning (Again): WP Reset is not a backup plugin. There is no CTRL+Z. Proceed with extreme caution if you have taken no backups.

Delete Transients

Transients are WordPress options with an expiration time. They help with speeding up your site and/or reducing stress on your server’s resources. It perfectly suits transients to act as a cache for the right data. This option deletes all transient-related database entries, including expired, non-expired, and orphaned transient entries.

Clean Uploads Folder

This will delete all the files in your /wp-content/uploads folder, including any sub-folders and files inside them. It’ll also delete all your media files.

Reset Theme Options

If you’re looking for how to reset WordPress themes, this is it. This option will reset settings for not just your active theme, but all your installed themes. However, for this option to work, the theme should use the official WordPress theme modification API. If the theme developer is using some custom methods to save the theme options, this won’t work.

Delete Themes

Clicking this will delete all your themes, including the active one.

Delete Plugins

This option with delete all plugins except for WP Reset, which will remain active after it deletes all the other plugins.

Empty or Delete Custom Tables

If you have any custom tables in your database with wp_ prefix, this option will either empty or delete them. Emptying (truncating) removes all content from the tables, but keeps their structure intact. Deleting (dropping) removes the tables completely from the database.

Delete .htaccess File

This action deletes the .htaccess file in your WordPress installation’s root folder (not recommended unless you know what you’re doing). If you just want to edit the .htaccess file from your dashboard, you can use the free WP Htaccess Editor plugin from the same authors. Plus, it automatically creates backups of your .htaccess file as you edit it.

Advanced WordPress Reset with WP-CLI

You can execute all the tools available in the WP Reset plugin interface with WP-CLI. Run wp help reset to get a list of the commands available.

Additional help for every command is available via the default WP-CLI help interface. Do note that you need to confirm all your actions for the sake of security.

If you want to skip confirmation for the commands, use the --yes option. remember though, as with GUI, there’s no going back here too!

How to Reset WordPress Multisite

There’s no free plugin, including both the highly rated WP Reset and Advanced WordPress Reset, which reset WordPress Multisite installations perfectly.

In a Multisite setup, WP Reset plugin disables itself in the Network Admin dashboard. This is to prevent unnecessary harm to the entire Multisite network, since it’s not tested to work with it.

WPMU DEV Hosting to the Rescue

When you use WPMU DEV Hosting to convert your standard WordPress installation to a Multisite network (WP-MU), he automatically takes a backup of your complete site.

A very smart and time-saving feature!

You can identify this backup by its Type value “Pre-Convert to Multisite.”

Thanks to this backup, you can reset your WordPress Multisite to how it was before. I recommend you to take a New Backup before you restore the old backup, just in case you change your mind and want to go back.

To reset the WordPress Multisite, click on the three dots icon on the far right end of the backup listing, and then select Restore from the drop-down menu.

And………tadaaaa!!! WP Reset has revived your WordPress Multisite as a single entity. As long as you have a backup, you have unlimited lives to play out this game!

Subsite Resets in a WordPress Multisite

What if you don’t want to reset the entire WordPress Multisite network, but just reset one subsite on it? You have two options here:

1. Complete Reset: Delete the subsite and re-create it with the same name. Not only will your subsite be as good as new, you’ll also delete all its media, themes, plugins, and any other uploads. A total reset of your subsite.

2. Database Reset: Use a plugin such as WP Reset to restore the subsite to its initial state. You must follow the same instructions as you would with a standalone WordPress installation. With this method, you won’t lose the subsite’s files. However, just like resetting non-WP-MU sites, the media won’t be visible in your subsite’s media library after the reset.

Fret not! You’ll still have the option to delete them all, under WP Reset > Tools tab. Note that the WP Reset team suggests, “We don’t recommend to resetting the main site.” It’s up to you though. As long as you have a reliable backup and the will to take a risk, it’s worth it!

Warning (Yet Again): Take backups before you try to reset anything. I can’t stress this enough.

Live. Die. Reset.

Debugging WordPress is hard, time-consuming, and often frustrating. It can take hours to find, test, and fix even the smallest bugs. Resetting your WordPress installation with just a single click makes your life easier, so that you can test and debug various themes and plugins quickly and efficiently.

WPMU DEV’s Fully Managed WordPress Hosting is made by developers for developers. No bloat or fluff added. Just the tools you need to get your job done without pulling your hair out.

Also, it’s the closest you’ll come to feeling as badass as Tom Cruise, unless you’re actually Tom Cruise. In that case, we can definitely fulfill your need for speed, should you accept this mission.

… Or a WordPress user.

… Or an eCommerce business owner.

Will the controversy ever end?

Deciding between subdomains and subdirectories for your Multipress site is a loaded question. We know. We’ve been working through this same issue since we started in 2005.

So let’s settle this debate right here, right now, and once and for all. At least as far as using WordPress Multisite is concerned.

In this post, I’m going to show you that the WordPress multisite subdomain vs subdirectory debate can only end badly for poor old subdomains. In fact, subdomains are gonna get more battered and sucker-punched in this fight than a platter of deep-fried calamari.

• Who Thinks A WordPress Multisite Subdomain Network Is A Good Idea?
• The Difference Between a Subdirectory and a Subdomain
• Ask The Creator: Subdomain vs Subdirectory For WordPress Multisite?
• Ask The Ruler
• Ask The Experts
  • The Pros Of Using WordPress Multisite
  • When Not To Use WordPress Multisite
  • When To Use Subdomains
  • The Cons Of Using Subdomains
  • Why You Should Use Subdirectories
  • Drawback Of Using Subdirectories
• The Truth Of Why Using Subdomains With Multisite Is A Bad Idea
  • WP Multisite Subdomains Require More Management Time
  • WP Multisite Subdomains Increase Security Risks
• The Verdict: Subdomains Are A Very Bad, No Good Idea

Who Thinks A WordPress Multisite Subdomain Network Is A Good Idea?

If you haven’t caught up on this fight yet, on one side of the ring we have WordPress Multisite, a beast of a feature that lets you set up an entire network of WordPress sites or blogs using just one installation.

On the opposite side of the ring, there’s WordPress Multisite Subdomains vs Subdirectories, a two-headed monster locked into a perennial battle with itself for supreme domain-ation. Yeah, I know, crazy right?

Now, here’s the thing…

Web developers and weekend WordPress warriors (and worriers) keep searching online for the definitive answer to questions like:

• Which is better for setting up WordPress websites, subdomains or subdirectories?
• Which is better for installing WP Multisite, subdomains or subdirectories?
• Which is better for website SEO, subdomains or subdirectories?
• Which is better for [insert anything here], subdomains or subdirectories?

Are you getting the picture now?

The Difference Between a Subdirectory and a Subdomain

If you’re brand new and just walked into the arena looking to smell blood, subdirectories look like this: exampledomain.com/subdirectory, and subdomains look like this: subdomain.exampledomain.com.

In a Multisite installation, you have the choice of setting up sites like this:

Subdomain: site1.exampledomain.com, site2.exampledomain.com, site3.exampledomain.com, etc.

Or like this:

Subdirectory: exampledomain.com/site1, exampledomain.com/site2, exampledomain.com/site3, etc.

To find out which is the better option for WordPress Multisite, we can turn to the following sources:

1. The Creator
2. The Ruler
3. The Experts
4. The Truth

Wait, what?

Ask The Creator: Subdomain vs Subdirectory For WordPress Multisite?

Tim Berners Lee invented the World Wide Web and when he was done he said it was good and would be open to everyone.

He sure didn’t see WordPress Multisite coming, did he?

So, he’s no good to referee this fight … next!

Ask The Ruler

Here’s what Google’s Webmaster Trends Analyst John Mueller said in reply to the evergreen question of which is more beneficial for SEO: subdomains or subfolders …

“Google Search is fine with using either subdomains or subdirectories.”

Okay… that’s succinctly put. But really, who cares what Google thinks of your website?

All this does is raise more questions (like “will subdomains increase my AdSense earnings?”) from users who will never ‘crack’ Google’s secret algorithm.

So, let’s ding the bell. Round Three!

Ask The Experts

The great thing about asking experts is that while they may not give us definitive answers, they certainly create neato lists.

Let’s go for a quick couple of rounds with the experts and do a recap of the Pros and Cons of using WordPress Multisite as the undercard, followed by the main event of the Pros and Cons of using subdomains vs subfolders in a WordPress Multisite network.

The Pros Of Using WordPress Multisite

• You can run a network of sites or blogs with one WordPress installation. This makes it easier to manage and administer multiple sites.
• You can install themes and plugins once and share these across the network. This makes updating themes and plugins easier and saves time (imagine having to update the same theme and plugins on multiple WordPress installations)
• You can build a business selling hosted websites for all kinds of uses and charge fees and subscriptions while administering everything from a central location.

When Not To Use WordPress Multisite

• Managing multiple client sites on a WordPress Multisite installation can be a hassle, especially if they decide later they want to host their site with their own hosting provider, install their own themes or plugins, etc. Unless you’re building a network of sites that will share similar functionality, don’t choose WordPress Multisite to manage very different types of websites.
• Sites on a Multisite installation cannot have their own separate database or IP addresses. So, don’t use WP Multisite if your sites need separate databases or IP addresses.
• Some hosting companies don’t provide the necessary server requirements for WordPress Multisite or don’t support Multisite on all plans.  If this is the case where you’re currently hosting and you’re not willing to switch hosting providers, don’t use WP Multisite. Check out our behind-the-scenes account of what it takes to host WordPress Multisite on a serious scale.

For a more in-depth look at the pros and cons of using WordPress Multisite instead of running multiple WordPress installations, read our Ultimate Guide To WordPress Multisite.

When To Use Subdomains

• Websites on subdomains can have their own design, different plugins, etc.
• Subdomains keep things on the same domain separate. This can help with branding if you have different products or sell to different regions or want to keep different areas of your business separate (e.g. support.example.com or members.example.com).
• It doesn’t cost more to add additional subdomains, so you save money on domain names.

The Cons Of Using Subdomains

• Subdomains are an entirely different website.
• According to John Mueller, Google may take a little longer to figure out that you’re using subdomains instead of subfolders, so building links to pages in subdomains takes longer and requires more effort.
• If you don’t have enough content on sites set up on subdomains, you could probably squeeze more juice from your content by keeping it grouped using subdirectories.
• Some services or tools that charge per website might charge you for each subdomain separately (whereas subdirectories would just be counted as one).
• Subdomains have limitations and challenges around SSL support. You will most likely be required to purchase a more expensive Wildcard SSL certificate.
• Subdomains can affect hosting performance and increase security risks (explained further below).

Why You Should Use Subdirectories

• Subdirectories create a unified feel for all sites hosted under the domain. Everything looks like it is part of the same domain.
• You don’t have to worry about creating new domains or allowing wildcard domains via your hosting provider.
• It feels more intuitive for users searching your site. Which do you think users will remember more easily? yoursite.com/support vs support.yoursite.com.
• It can be easier for site development and marketing, especially if you are not an experienced web developer or internet marketer.

Drawback Of Using Subdirectories

• None.

Okay, so maybe a teeny, tiny weensy concern regarding using subdirectories would be if –and this is a very long iiiifffff — if a site created on a subfolder matched the slug of a post or page on your main domain.

For example, let’s say you create a site at mysecretfamilyrecipes.com and add a page called “Children Make Nutritious Snacks” with the URL mysecretfamilyrecipes.com/children-make-nutritious-snacks. You then create a Multisite network and allow users to set up their own sites on subdirectories.

Someone comes along and creates a site called “Children Make Nutritious Snacks.” This would then have a URL of mysecretfamilyrecipes.com/children-make-nutritious-snacks.

Yes, that’s a problem.

The Truth Of Why Using Subdomains With Multisite Is A Bad Idea

While SEO experts continue to endlessly debate the benefits of using subdomains vs subdirectories, let me just cut to the chase and get to the painful truth.

Yes, the truth hurts, but you need to hear it, so here it is:

Why would you create a rod for your own back by using subdomains?

According to conventional wisdom, we should use subdomains to keep things separate from the root domain and subfolders to keep related things together.

According to the wisdom of Google’s John Mueller, however …

Google may take a little longer to figure out that you’re using subdomains instead of subfolders, but in the long-term, it makes no difference which one you pick.

If it makes no difference which one you pick, why pick the more difficult option that takes Google longer to figure out?

And if you buy into the “subdomains improve branding” argument, do cool consumers and chilled users really care whether they go to princess.disney.com or disney.com/princess to buy their Frozen merchandise? No … so let it go. Let. It. Go. (Even Disney switched from subdomains to subdirectories.)

You can join discussion groups (or comment, like in the comments down below), and debate the subtleties of WordPress multisite subdomain vs subdirectory SEO benefits ad nauseam. But eventually, everything will boil down to time and money where “management” is time and “security” is money.

WP Multisite Subdomains Require More Management Time

Every subdomain you add to your Multisite network is an entirely different website.

Websites installed on subdomains require more server resources to manage and should be seen as separate businesses.

Managing subdomains on a multisite installation also requires other time-consuming tasks (for example, you’ll need to add each subdomain as a separate website property in Google Search Console).

Let me show you an example of the kind of crazy management involved in running a Multisite network I’m talking about.

Look at Harvard University’s website …

Universities are a perfect example of sites that can benefit from WordPress multisite. If we take a look at how they have structured their web presence, however, it will make your head spin.

Harvard’s website uses subfolders to send visitors to many of the key sections listed on their home page and keep things grouped together under their main domain. For example:

• Faculty – harvard.edu/faculty
• Staff – harvard.edu/staff
• Students – harvard.edu/students
• Parents – harvard.edu/parents
• Visitors – harvard.edu/on-campus/visit-harvard
• Media – harvard.edu/media-relations

If you explore the University’s sitemap, however, we find that many departments host websites using subdomains:

• Alumni – alumni.harvard.edu
• Community – community.harvard.edu
• College – college.harvard.edu
• Dental – hsdm.harvard.edu
• Faculty of Arts & Sciences – fas.harvard.edu
• Law – law.harvard.edu
• Library – library.harvard.edu
• Medical – hms.harvard.edu

Some of Harvard’s museums not only run sites under their own subdomains but some even appear to have subdomains under subdomains. For example:

• Semitic Museum – semiticmuseum.fas.harvard.edu
• Fisher Museum At Harvard Forest – harvardforest.fas.harvard.edu

Additionally, some parts of Harvard’s web presence, like its WordPress Multisite Blogs network (blogs.harvard.edu) have sites installed in subdirectories of a subdomain:

• Harvard Blockchain Lab – blogs.harvard.edu/blockchain
• Clinical And Pro Bono Programs – blogs.harvard.edu/clinicalprobono
• Travel Experience – http://blogs.harvard.edu/travelexperience

While the above setup is fine for large organizations and institutions like Harvard and many other universities, can you see how many separate site installations have to be managed? It takes a huge amount of resources to manage this.

If you have anything less than infinite resources available, and either option of using subdomains or subdirectories will get you the same result, wouldn’t you choose the more cost-effective option that is also easier to manage? It would surely hurt your business less, wouldn’t it?

Speaking of ways to avoid getting flogged, let’s take a look at the other main reason why choosing subdomains in a multisite network are a very bad idea.

WP Multisite Subdomains Increase Security Risks

We host millions of sites across our Edublogs, CampusPress, and Enterprise WordPress Multisite Hosting platforms.

Ronnie Burt, who heads up our hosting and education services, says that edublogs.org is an example of a subdomain install and that the team often “regrets doing it this way.”

Here are some of the reasons Ronnie cites for regretting using subdomains on Edublogs and other networks that we host:

• Subdomains have limitations and challenges around SSL support. One of these challenges is that in order to serve your domain over HTTPS, either a ‘Wildcard’ SSL certificate for your domain or a certificate that covers all domains and subdomains that you plan to use must be uploaded with additional expense. Plus, when domain mapping is introduced, this gets really complicated fast.
• Subdomains usually see higher legitimate bot and crawler traffic, which can increase load and decrease performance (or require bigger hosting plans). *
• Subdomains, in our experience, can make it harder and more expensive to prevent and mitigate DDOS attacks.
• Other issues include incompatibility with most cloud WAFs or CDNs (Cloudflare, Sucuri, StackPath, etc.)

* This is because bots and crawlers see each subdomain as a separate WordPress install and may crawl each subdomain simultaneously. So, if they are probing for a bunch of exploits or a credential stuffing attack, they will attempt it again and again for every single subdomain, often in parallel. It’s hard enough for a single WordPress site to handle this kind of a load from bots, but multiply that by 10, 100, or 1000 sites and you will have major problems.

The same is true for web crawlers like Googlebot. These adjust their crawl speed per domain to what your site can handle. But with subdomains, they see each site as different, and so can overwhelm your server resources.

Our CEO, James Farmer also expresses his regret for choosing to use a subdomain for the WPMU DEV site, but those reasons have mostly to do with how unsexy our subdomain URL looks. On this point, it should be noted that you can change WordPress Multisite to subdirectories or subdomains without errors. It’s preferable that you don’t, though, and it’s best if you pick one and then stay with it.

Also, if “sexy” is what you are looking for in your domains, domain mapping can take care of your problems.

The Verdict: Subdomains Are A Very Bad, No Good Idea

Learn from our mistakes. If you plan to set up a WordPress Multisite network and are struggling to choose between using subdomains or subdirectories for your sites, look beyond the SEO arguments, which Google claims is just a moot point anyway.

Pick the option that will cause you less pain and save you time and money managing it all.

And if you still can’t decide, go with the option that looks more sexy.

Having a multilingual site has its perks. It lets you connect with an international audience and bring in new customers. A multi-language site also gives you a competitive edge. If there’s a potential multilingual market for your business, and your competitors aren’t taking advantage of that, you definitely need to go for it!

“Those who know nothing of foreign languages know nothing of their own.” — Johann Wolfgang von Goethe

Create a network of your site in different languages.

Creating a multilingual WordPress site isn’t hard with so many plugins out there.

But not so fast, my plugin-addicted friends! For this feat, I’ve moved away from multilingual plugins towards the Multisite of things.

A WordPress Multisite is like a network of many individual WordPress sites, all distinct yet connected together by a single WordPress core. This means that you don’t have to fuss about endless WordPress configurations to add or tweak a new language.

The power of building a plugin-less multilingual site lies in WordPress Multisite.

In this post, you’ll learn how to create your own multilingual WordPress site without plugins…from scratch!

And I promise it’ll be as easy as pie. Continue reading, or jump ahead using these links:

• Creating A WordPress Multisite With Subdomains
• Using Subdomains for Multilingual Sites
• Setting Up A New Language Site
• Installing Your Theme And Adding Content
• Translating Your Content
• Configuring Custom Menus

Creating A WordPress Multisite With Subdomains

WordPress Multisite lets you create multiple sites using the same installation. I’ll be implementing a French version (sacrilege!) of my website here, so I’ll be coding along with you.

Need help with setting up WordPress multisite subdomains? Go through our in-depth Multisite guide to get all caught up.

Using Subdomains for Multilingual Sites

After setting up your Multisite, the next step is to set up a subdomain. A subdomain is part of your parent domain, while the subdirectory is a folder within it.

For instance, fr.ioanadragnef.com is a subdomain, while ioanadragnef.com/fr is a subdirectory. If you need a quick refresher, we’ve covered the differences between Multisite subdomains vs. subdirectories in another post.

I’ll set up my website so that my French users can see their language code as a subdomain (i.e. fr.ioanadragnef.com). And since I have set my WordPress site up for over a month, I have to use the subdomain option. However, this restriction is only for the initial Multisite setup. You can easily switch between the network types afterward.

You can set up a subdomain from either your hosting provider or from within WordPress. If you do it from within WordPress, you must change some DNS records to allow creation of wildcard subdomains.

Setting Up A New Language Site

I will create a French version of my site by going to My Sites > Network Admin > Sites, and selecting Add New.

Enter the fields at the prompt and choose a subdomain for your new site. If you’re making a multilingual WordPress site, it makes sense to have the subdomain be the language code (e.g. fr for French), but you can make it whatever you want.

Be careful not to change the Site Language option here if you don’t speak the language. This will only change the language of your admin dashboard.

Once you’ve added the site, you’ll see it in the My Sites drop-down menu. You can manage it the same way you do the other by adding plugins, themes, and content.

Installing Your Theme And Adding Content

Once you’ve configured your subdomain, you’ll want to install the theme of your main website to your other-language site.

Remember, both the sites have to look as identical to each other as possible, which means using the same theme, brand colors, plugins, menus, etc. This way it won’t be confusing to your visitors when they switch the language.

The next step is to translate and add my content.

My website is fairly succinct, so luckily there’s not much to translate. However, if you’ve got a lot of pages, there are shortcuts—you can use the Multisite Post Duplicator or NS Cloner plugins.

• Multisite Content Copier/Updater
• NS Cloner

Now, I know I mentioned earlier that this will be a no-plugin multilingual WordPress site, but we’ve completed that already. The plugins recommended above are for helping you with laying down your translated pages and posts.

Translating Your Content

Now you have a Multisite, a subdomain, you’ve configured your content and website structure. It’s time to get translatin’!

Even with significant advances in machine translation tech, there’s still no match for human translators. If you want details and nuance in your translations (and you should), I recommend getting professional help. Upwork and Fiverr are some platforms where you can hire skilled translators in various international languages at a great price.

But if you still want to go for automated translations, there are a few WordPress translation plugins that you can use to get it done easily.

Configuring Custom Menus

Once your website is ready and translated, all you have to do is add a link to it in your original-language website (i.e. your main network site). This way, your readers can switch back and forth between the various languages available!

To do this, we’ll be creating a custom menu. Since I’m only using a single language, I’ll link to the French version of my site in my menu.

To create a custom link within your website’s primary menu, go to Appearance > Menus, and then edit your main menu.

Under Custom Links, enter the URL of the subdomain and the navigation label. Now add the custom link to the menu via the Add to Menu button.

Custom Menu For Multiple Languages

If you want to create a menu that contains multiple languages, create a new menu, and add multiple custom links with the various language subdomains.

For example, if I want a Languages menu that has both French and Spanish, first I’ll create a new Languages menu.

I’ll then add my French and Spanish subdomains under different custom links, and use the name of the language as the navigation label.

Congratulations! You’ve now built a multilingual WordPress Multisite with no plugins.

Conclusion

A multilingual site enables you to reach more readers than ever before. It makes you look more professional and open you up to new opportunities. And since you’ve created your multilingual site via Multisite, you have more control over your sites than if you’d just used a plugin.

Using Multisite to do it has many advantages for you, the main of which is giving you ultimate control over your site. It allows you to create, tweak, and present your translated content however you want.

The trick here to avoid multilingual plugins is to use a Multisite along with a custom menu to direct your readers to the right subsites.

It’s never too late to add a new language to your site. After all, in the game of tongues, you either Spanish or Vanish!

As your business and list of websites grows, though, you may find that regularly accessing multiple concurrent web development projects becomes unwieldy and inefficient. Also, take for instance, the special cases where a client wants you to develop a network of WordPress sites for them.

Wouldn’t it be great if you could just merge the management of all your websites into a single dashboard rather log into each separate installation every time?

The good news is that there are solutions to make the management of multiple WordPress sites more convenient. However, in order to determine whether WordPress Multisite or WordPress management tools are the right solution for you, you must first understand the difference between the two options.

WordPress Multisite vs. WordPress Management Tools: Which Do You Need?

When you create and/or manage more than one WordPress site at a time, there are typically three options you have to choose from:

• WordPress Multisite: This is functionality WordPress built into the CMS back with the release of 3.0. Basically, it allows users to manage multiple websites from within a single WordPress installation.
• WordPress Management Tools: WordPress management tools give users the ability to manage WordPress sites from within a single tool and dashboard. Typically, this tool exists outside of WordPress.
• Separate Installations: This option is for users that want to build and manage each of their WordPress sites (if there is more than one) separately from one another. Each maintains its own unique login and dashboard within WordPress. This option is only ideal for WordPress developers that work on websites one at a time and don’t offer continued maintenance services.

There are a number of reasons to consider using the first two options above. While it may seem like WordPress’s built-in Multisite functionality is the answer to all your needs since it conveniently keeps everything within WordPress, this multi-site management solution has its limitations.

So, let’s talk about the pros and cons of WordPress Multisite as well as WordPress management tools. Then we can look at some use cases in which each would be the ideal solution for your needs.

WordPress Multisite: The Pros and Cons

WordPress Multisite: WordPress’s solution to multi-site management… or is it? Here is what you need to know.

Pros

• WordPress Multisite is free to use.
• It allows you to keep an entire network of related websites together under a single WordPress installation. This means only having to log in once to manage all your sites.
• It also means the quicker development of new websites if they each follow a similar formula and use the same plugins or themes.
• Because this exists within WordPress, there is barely any learning curve to using Multisite. You’ll simply have to take what you know about the interface and apply it to the new tabs available.
• It’s much easier to manage everything in one place, including the connected WordPress sites, their subdomain names, user access, settings, and so on.
• Rather than install WordPress plugins and themes for each website under your care, you only have to do it once (if they share those integrations, that is). As you can imagine, this makes your server much lighter as you don’t have to run multiple instances of the same plugins or themes.
• You can manage all your core, theme, and plugin updates from Multisite as well. And it only requires a single update; there’s no need to apply the update to each individual site.
• There are WordPress plugins made specifically to be compatible with and streamline the Multisite network. Snapshot Pro is one of them and, guess what? You only have to do one backup since all your sites are stored in the same database.

Cons

• While it’s free to use, you probably end up having to pay more in the end since your WordPress installation will require more server space and resources to power all those sites.
• You can’t use Multisite to manage unrelated sites, even if the websites all belong to the same client. This is because they exist within your main website hub and will be allocated a subdomain name that connects them to the overarching network (see naming conventions under “Activating Multisite”).
• You shouldn’t use Multisite for highly sensitive or private websites, even if they’re related. Think of this as you would shared hosting.
• It also isn’t ideal if you expect one or even a few of the sites to receive huge traffic spikes. Again, this is like shared hosting in that a spike in traffic for one site could hurt the rest of your network.
• If individual site administrators want to use their own handpicked themes and plugins, they can’t do so without your permission. It’ll be hard to say “yes” to adding something to the network if only one site needs it and consequently will slow down the rest of the network.
• If you decide that you want to move one of the sites out of the network, the migration won’t be as straightforward as a standard domain-to-domain migration.
• Not all hosting types or plans are compatible with Multisite. It’s not that you can’t activate Multisite on them. However, if you’re placing vast quantities of data on the server, something like a basic shared hosting plan isn’t ideal.
• You have to be selective about which plugins or themes you add to your Multisite network since not all of them will work with it.

Use Cases

Multisite works best for related websites that are owned or managed by the same individual.

Look at most TV network websites. The main website focuses on promoting all their shows. But then you can drill down into the individual sites for each TV show where the focus is only on that one.

Take ABC, for example:

Then go ahead and visit the show page for Grey’s Anatomy:

You can see that the Grey’s Anatomy page still has the ABC header up top. However, the rest of the page is its own microcosm dedicated to the TV show.

Edublogs is another example of a WordPress Multisite in action:

Here is an example of a website built on the Edublogs Multisite network: What Else:

There’s a small bar up top that points you back to Edublogs and, of course, the domain name reflects that it’s a subdomain of Edublogs. Other than that, though, this is a completely self-sufficient website.

If you’re interested in getting started with Multisite, use Rachel McCollin’s Ultimate Guide to Multisite.

WordPress Management Tools: The Pros and Cons

WordPress Multisite isn’t the only option if you have multiple websites you want to consolidate under a single management hub. WordPress management tools work similarly to Multisite, but without the domain and control restrictions.

Pros

• WordPress management tools give you a single dashboard to manage all websites from, along with users and settings.
• The websites managed here don’t need to be related to one another and don’t need to reside on the same web hosting server.
• It’s a fantastic option if you want to consolidate the management of WordPress core, plugin, and theme updates. Unlike Multisite, you can run these updates individually for each site.
• In addition to updates, you can handle other tasks for your WordPress plugins and themes, like activations and deactivations.
• You won’t encounter issues with finding compatible WordPress plugins or themes. Since websites managed in these tools have separate WordPress installations, they’re not on the same network or server so they can do everything free-standing WordPress sites do.

In addition, depending on which WordPress management tool you use, you’ll enjoy the following benefits:

• Dashboard analytics for spam, performance, security, and SEO for all websites.
• Security monitoring, uptime monitoring, and speed checks are available.
• You can schedule and manage backups for each site.
• You can grant access to individual contributors (team members or clients) so they can only see their own website on the dashboard.
• You can also create new content (mostly just blog posts) from the dashboard.

Cons

• It costs money to use a WordPress management tool.
• If you want to configure custom settings for plugins and themes used on a website, you will have to log into the WordPress installation.
• Some of these tools come with a steep learning curve. It may be fine for an advanced developer, but maybe not someone new to WordPress or web development.

Use Cases
Now, in terms of how you can use a WordPress management tool, this is ideal for the WordPress developer or agency trying to get a handle on concurrent web projects.

It’s also a good alternative if you’re working for a client that has a network of websites they need managed, but with the following restrictions:

• Each site has strict security requirements.
• Each requires a custom domain name or unique IP address.
• The sites all have a different set of features that need to be fulfilled by various plugins or themes, so there’s very little overlap that would make Multisite worth it.

If you’re interested in exploring WordPress management tools further, consider these popular options:

CMS Commander

InfiniteWP

Jetpack

MainWP

ManageWP

The Hub

Wrapping Up

As you can see, both multi-site management options will end up being huge energy and time savers in your WordPress development workflow. It’s simply a matter of identifying when each solution would be right for the kinds of websites you develop. Of course, if you do end up needing WordPress Multisite and want guidance and best practices on how to use it, enroll in the WPMU DEV WordPress Multisite Masterclass.

For over a decade, we’ve managed some of the largest and highest traffic WordPress Multisite networks in the world, including Edublogs, Global2, and Sites at Penn State.

All in, we’re talking over 10 million sites across more than a thousand Multisite installs. Nothing to shake a stick at!

Over the past few years, our focus has been on continuing to be the leader in hosting large-scale Multisite networks, while also improving our handling of high-traffic and high-level websites. For example, in the last year, we’ve brought online sites like TheLantern.com student newspaper of Ohio State University, the district and school websites for Round Rock ISD, and main sites for Providence College. All with a focus on performance, accessibility, and ease of use.

One knock on our service that we’ve heard over the years is that we are too rigid. In order to keep our customers’ sites running smoothly, we have been limited in the plugins and themes that we allow, and for those with custom projects, we haven’t always been the most developer-friendly platform. We agree, and we heard you!

Introducing Dedicated Clusters

Part of our ongoing improvements included moving all customers over to a new environment within Amazon Web Services. I gave details on this move, and our infrastructure setup, in a post here on this blog last year.

But we still kept much of what we do basically the same. Using docker containers, customers are logically separated from each other, but they still share AWS web (EC2) and database (Aurora) resources. We keep WordPress core and all plugins and themes on a shared and common code base, meaning updates for all customers happen all at the same time. And we keep a pretty tight ship when it comes to introducing new plugins or themes to the environment.

For those customers that require a little more freedom and a little more direct access, we now offer a private and dedicated AWS cluster, tailored specifically to the type of sites being hosted. Our goal here is to provide even better performance and significantly increased flexibility while maintaining our high standards of security and reliability. Learn more about our new dedicated clusters and the benefits that come with them here.

Free Six Month Pilot!

We’ve got big plans for the coming months and beyond. We’ve started rolling out a new CDN service for all customers which is proving to decrease page load speed considerably. We also benefit from all of the new releases and projects from the WPMU DEV roadmap. The improved CoursePress LMS and brand new Forminator plugins are particularly exciting for us.

And for the month of February, we are offering a completely free, no obligation, six month pilot to schools and universities interested in our services. If this sounds like you, learn more here and get in touch!

Or maybe you take the bus to a co-work space where other commuters cough and touch the same railing you’re holding onto.

Or perhaps you work from the “safety” of your home where your kids are likely to share some nasty germ they picked up at school with you.

No matter where you go or who you’re surrounded by, sometimes it feels like nowhere is safe.

But that’s what happens when you work and live in close proximity to others. If one person is infected, it’s only a matter of time before it spreads.

And that’s exactly how cross-site contaminations happen.

Security is obviously a major concern for everyone who comes into contact with a website, be that the owner of the site, the person shopping on it, or the developer who built it.

That’s because there seems to be danger at every turn.

But let’s say you decide to make the economical and efficient decision to put multiple websites on a single network (whether that’s from using WordPress Multisite or simply running them from the same hosting account).

An insecurity within just one of those websites could put the entire network in danger.

Abiding by WordPress security best practices is a good place to start, but it might not be enough. If you’re running a network of WordPress sites all from one place, then this post is for you.

I’m going to briefly cover who these cross-site contamination concerns pertain to and then give you a special checklist of tips to use when running a network of websites.

Who Should Be Concerned About Cross-Site Contaminations in WordPress?

Let’s face it: hackers are needing to get more creative about how they crack into websites these days.

WordPress may be an easy target because of its popularity, but it’s not an easy platform to break into if the people who build and manage websites abide by security best practices.

Of course, that logic starts to waver a bit when the number of websites on your network increases.

Here are some of ways in which you might consolidate your web properties, unintentionally putting them at risk for cross-site contamination:

WordPress Multisite

You’ve created a Multisite network within WordPress.

While it’s a great feature for web developers who want to easily manage a network of sites all from one WordPress installation, this also means that one bad apple could easily poison the whole batch.

In essence, with all these shared resources, files, plugins, logins, and so on stored in the same place, this increases the risk that one website harmed could lead to all sites on the network being compromised.

Multi-Domain Hosting Account

The same goes for websites that share a hosting account (not necessarily those on shared hosting; just those that share one account).

All it takes is one website that’s not properly secured (through a bad plugin or a weak password) and hackers can wreak havoc through the entire network of sites.

There are a number of parties who could potentially be affected by this:

• Agencies that want to manage all their clients’ sites on one hosting account.
• Developers who want to do the same.
• Developers who use their hosting account for testing and staging websites.
• Businesses that have a number of web properties under their main brand umbrella and want to keep them all together.

Re-selling Web Hosting

Web developers who sell hosting either as a full-time or side gig may find this to be a lucrative way to make extra money with WordPress.

That said, if you don’t accurately configure your hosting platform, you could put all your clients’ sites at risk in the process.

I can’t stress this enough: all it takes is one website to get infected to take down your entire network.

Imagine how devastating that would be to your business.

You assured clients that you’d take care of their website and you honestly believed that everything would be okay.

But you left a seemingly harmless staging site unattended or you trusted that your hosting clients would properly secure their individual sites… and something went wrong. So, now what?

Well, you need to not wait until the “now”.

You need to take action now to properly secure your network of WordPress sites from cross-site contaminations.

Checklist: 8 Things You Need to Do to Fend Off Cross-Site Contaminations

Obviously, this checklist is not meant to replace the WordPress security checklist you already work off of. Those tips hold true whether you’re running one WordPress site or an entire network.

The following checklist, however, should be added to that list if you intend on managing a network of websites.

1. Scan Every Site

The whole point in bringing together various websites into a single shared hosting account or WordPress Multisite is so you can more conveniently and effectively manage them all at once.

Nevertheless, those websites are still unique web properties that need to be treated as such.

So, rather than assume that the security procedures used by your hosting provider are enough, use a security scanning plugin for every single one of your WordPress sites.

Defender, of course, does a great job of regularly scanning your site, enforcing stringent security practices, and documenting all activity, so I’d suggest starting there.

2. Add Separate Firewalls

You know that when you sign up with a trusted hosting source they usually tout the secure firewall placed on their servers to keep intruders out.

However, if you’re running your WordPress sites from the same hosting account, that means your network is secured by only one firewall and that there is no separate barrier standing between each of your sites.

Since this is why cross-contaminations happen, it’s important to add a firewall to every website. Cloudflare have you covered in this department.

Their web application firewall comes with built-in rulesets, including rules that mitigate WordPress specific threats and vulnerabilities.

Once the WAF is enabled, you can rest easy knowing your site is protected from the latest threats.

3. Use a Trustworthy Multisite Plugin

If your network vulnerability stems from using WordPress Multisite, then the best thing you can do is get a reliable Multisite management plugin like WP Ultimo.

This way, you know you’ll have more control over what your clients do with their websites while you get to use a plugin you know is safe and secure, too.

4. Block Multisite Spam

Of course, don’t forget about comment spam.

It’s one of the reasons why many blogs decide to turn comments off completely.

When you’re running a large network of sites—especially when you have little to no control over blog content or the comments popping up on it—you’ll want the Akismet plugin to keep your sites safe from spam and other harmful injections.

5. Clean Out Old Domains

The larger your network of sites grows, the easier it becomes to lose track of them.

That’s why you should schedule time—ideally, at least once a month or quarter—to review your hosting or Multisite account.

• Any old or unused domains should be tossed out.
• The same goes for testing and staging sites. Once the WordPress site goes live, you have no need for those.
• If you encounter any sites that haven’t been updated in a year’s time, inquire with the site owner to see if it still needs to be hosted.

By keeping your server clear of old domains, you’ll cut down on the possibility that hackers stumble upon them and take advantage of the perfect breeding ground of unmonitored activity, un-updated core and plugins, and so on.

6. Keep Plugins and Themes Updated

If you’re bringing websites together into the same WordPress installation or hosting account, you’re hopefully using the same set of reliable plugins and themes for them as well.

While WordPress Multisite simplifies the process of keeping “shared” plugins and themes updated across all sites, it’s still important to regularly review each third-party integration.

You never know when a developer has decided to stop supporting them, a plugin has been flagged by WordPress, or a new security flaw is introduced into one of them.

However, sometimes it can be a hassle to keep up with all of the WP updates, as well as the countless plugins and themes.

That’s when a plugin or a piece of software that automatically updates for you would come in real handy…

For example, WPMU DEV members have the luxury of having Automate on their side, which automatically runs updates and backups for them.

7. Properly Configure Server

It doesn’t matter if we’re talking about WordPress Multisite or a shared hosting account. To keep sites safe, you need to be smart about configuring your network.

Here are some simple tips to help you do this:

Create separate accounts for website platforms: If you build websites using platforms other than WordPress, then you should have separate accounts for WordPress sites, Drupal sites, Joomla sites, etc.

Avoid mixing and matching host functions: This refers to type of hosting. So, if you’re in the business of selling web hosting, you may also be providing clients with email hosting. Never mix and match hosting functions. These need to remain separate.

Keep test websites and live websites separate: While you may be inclined to put your websites in development and testing phases on the same account as those that are live, don’t do it.

It’s much safer if you keep them separate, especially if you’re not good about remembering to delete the old dev or staging sites once you’re done.

Better yet, just use separate testing and staging environment tools for that part of your process so you can avoid this problem altogether.

8. Use a Trusted Host

Ultimately, the security of your websites comes down to how well you secure each and every one of them.

However, if you’re not starting with a trusted host that provides you with secure and properly configured servers, then you may still run into trouble in the long run.

This most commonly happens by not following best practices to secure each site and keeping users contained to their respective sites.

Of course, if you’re still worried about cross-site contaminations in your network, you can always host each website separately using something more secure and isolated like VPS or dedicated server hosting.

While that defeats the purpose of creating a multi-site network, it does avoid the potential for cross-website contamination.

Wrapping Up

All it takes is one bad apple to ruin it for the rest—and sometimes it’s hard to see that rotten apple when you have too many others to keep an eye on.

That’s why every website in your network needs to be protected.

If you don’t care enough about that website to protect it, then it does not belong in WordPress Multisite or sharing space on a hosting account with your other websites.

It’s as simple as that. Abide by the tips above and you’ll be able to harden your network’s security enough to where you won’t have to worry about cross-site contaminations anymore.

If the network is for your own use, you may have created a site and then realised you don’t need it after all, you might have moved it to a standalone WordPress installation, or you could have accidentally created a duplicate of a site you’ve already created. I’ve done all of these – not too clever!

If the network is open for users to create their own sites, then you’ll have had to take down some spammy blogs over time, or maybe remove a site that someone set up under a free trial but didn’t continue with.

And if you’re using your network to host client sites, then you may have had a site that’s migrated to its own WordPress installation or that you’ve removed when the client has gone out of business or moved on to another web developer or host.

By default, if someone visits a site that you’ve deactivated, they’ll see a pretty dull default screen telling than that the site has been suspended.

But what if you want to customize this screen, or add some custom content such as a link encouraging people to visit your main site or create their own blog?

In this post, I’m going to show you exactly how to do just that. I’ll show you how to create a file in your wp-content directory that overrides the default file for that screen, and how to style it.

But before I do that, let’s look at the different options you have for suspending a site, and what users will see when you do each of these.

Suspending Sites in Your Network – the Options

I have to admit that I find the terminology around deleting and suspending sites in a network very confusing. It’s not entirely clear what each one means and sometimes when you do one, the system will tell you that you’ve done another.

So let’s have a recap on the options for removing sites from your network.

Here’s a detail of the Multisite Sites screen, which you access by going to My Sites > Network Admin > Sites:

There are four options for removing the site:

• Deactivate reverses the activation step users go through when they signup for a site. It doesn’t permanently delete the site which can be reactivated at any time. Neither the front end nor the site admin screens are accessible.
• Archive marks a site as being archived so it’s not accessible by users. The admin screens can be accessed but not the front end. Again, you can easily archive a site at any time and it hasn’t been removed.
• Spam doesn’t delete the site, but marks it as spam. It’ll be unavailable (front end and admin) until you decide to unmark it as spam or delete it.
• Delete deletes the site. Use this option with extreme caution!

The Default Screen for Suspended Sites

WordPress has a default screen that it displays when a site is removed.

Here’s what you see in each scenario.

Deactivated Sites

If a site is deactivated and someone other than the (logged in) network admin visits it, they’ll see a default screen:

Archived Sites and Sites Marked as Spam

If you mark a site as spam or archive it, you’ll get a different screen:

These screens are very basic. They don’t really give the visitor much information or explain what’s meant by ‘no longer available’ or ‘archived or suspended’.

So let’s create our own.

Note that if the site has been deleted you won’t see one of these screens – instead you’ll be taken to a 404 page in the main site.

Creating a Page for Deactivated Sites

Creating a new page for displaying when someone visits a deactivated site is quite straightforward. You simply create a new file called blog-deleted.php and put it in your network’s wp-content folder. This file will then be used to display a custom page instead of the default page.

Note that this is in the network’s wp-content.php folder and so the same file will be used for any sites in your network that are deactivated. This means that you need to create something generic, rather than something specific to one site in your network.

Note: the title of this file is very confusing. It doesn’t apply to deleted sites, just to deactivated ones!

The page you create will need to stand alone – it won’t be using the site’s theme or calling any plugins or additional files. So you’ll need to either include any styling in that file or call an external stylesheet, which you would put in a styles folder in your wp-content folder.

You’ll also need to include the <head> section and the opening and closing <body> tags as these won’t be coming in via your theme’s header or footer files.

For the sake of simplicity I’m going to create a very simple file with all the styling included in it.

You can start with a completely blank file if you’d like or you can copy some of the content from your theme files. For one, I’ve copied in the contents of my theme’s header.php file and edited those down significantly, then manually added the rest of the markup.

Here’s the contents of my <head> section:

That gives me the required content plus some metadata and styling.

Now for the <body>:

There isn’t much to the body – just an element for the content, with a paragraph inside it and some text, which is translatable. This includes a link to the main site, which you might want to include if your network allows user sign-ups. Alternatively you might link to a different site on your network if this site has been replaced, or to a page on your main site explaining your policy for deleting sites, or wherever you wanted.

Let’s take a look at the screen we get now if a site is deactivated:

It isn’t very pretty right now – you might want to add some different styling, colours and maybe a headline. But it shows you that it’s possible to replace the default page for deleted sites and add anything you want to it.

Creating a Page for Archived Sites

If you want to also create a custom page for sites which have been archived or marked as spam (and why wouldn’t you?), you’ll need to create another file, also in your wp-content folder. This is called blog-suspended.php.

I’ve created another file which is identical to my blog-deleted.php file but with slightly different text. Here’s the code:

Here’s the page you get when you visit an archived site:

So again, our visitor has some more information and a link to the main site. You can replace this with whatever you want.

More Advanced Options

You can take this technique further.

The first thing you can do to improve your code is to separate out the styles and add them to a stylesheet in your wp-content folder. You’d then call that stylesheet from each of the two files for suspended and deactivated sites, meaning you only need to code the styling once. If you want different styling for each of the two pages, you can add an extra class to the body tag for each file and target that.

To call your new stylesheet, add this line of code to the <head> section of your file:

Alternatively you could import the stylesheet from the theme which has been activated for the suspended site. Be wary of doing this – if the site is spammy, there may be a problem with the code, or you may have removed the theme altogether after deactivating the site. But if you want to do this, you can include the theme stylesheet with this line in the <head>:

You could take this even further by using the include function to call specific files from the theme such as the header or footer. But again, be wary, as the theme may be deleted or corrupted. If you do this, it gives you the option of giving each blog a suspended page that looks unique.

Another option is to use the stylesheet from your main site, meaning you can brand all of your suspended/deactivated screens with your own branding. To call the stylesheet from the main theme, you’d need to add this code in the <head>:

You’d then use the appropriate elements for the markup in your page so that it works with your main blog’s theme – or you could call files from that theme using the include tag.

Finally, you could use conditional tags to check on the blog ID, the status of the blog, or anything else you’d like to check for, and then serve up content accordingly.

But if you don’t want to go this far, a simple page like the one we’ve created above will provide visitors with more information than the default, and lets you direct people elsewhere in your network.

It’s Easy to Replace the Default Pages for Deactivated Sites

If you follow the steps above, you can quickly and easy replace the default pages for archived, suspended or deleted sites in your network.

This way you can give visitors more information than that provided by the default screens, and give them a link to your main site so they don’t just leave your network entirely.

This will help visitors who arrive at the wrong site in your group and also encourage people browsing any one of the sites in your network to visit others. If your network offers people the ability to create their own site, then being able to browse other sites in the network will help them see what they could get if they signed up.

Our Blogs Directory plugin lets you easily do this on your main site, by adding a “Sites” page to your main site. That page automatically lists all of the sites in your network.

But what if you want to add this to every single site in your network? It is possible, but you’ll have to write some code. In this post, I’ll show you how.

What You’ll Need to Follow This Post

To follow along with this post you’ll need:

• A development or test installation of WordPress with Multisite activated,
• A suitable theme to use as a parent for all of the sites in the network (I’ve uploaded the one I’m using to GitHub),
• Some sites added to your network, and
• A code editor, like Sublime or Atom.

Getting Started

We’re going to be working with our parent theme plus a child theme of that parent. I’ll be using just the one child theme here – if your network has sites in the same organization or for different users, you’ll need to use different child themes.

The method I’m outlining here assumes you’re going to be using the same parent theme for all of the sites in your network, which is most suitable when using a network to host client sites or all the sites for one organization.

Note: You could adapt this for use in a plugin that you then activate on all sites in the network. However, you would have to either add the code to activate the function to each site’s theme, or you’d have to ensure the theme used for each site has the same hook that you can attach the plugin function to.

The steps we’ll follow are:

• Create a child theme for use in a site on the network.
• Edit the parent theme’s functions file.
• Add some styling to the parent theme for our list of sites.

Let’s start with that child theme.

Creating a Child Theme

If you’re already running a child theme on the sites in your network, you don’t have to follow this step. I’m going to create one child theme but I’m assuming that you’re using a different child theme for each site in your network. As long as they all have the same parent theme, the technique will still work.

Create a new theme folder in your wp-content/themes directory and add an empty style.css file to it. Open that file and add commented out text at the beginning:

That will tell WordPress that this is a child of the parent theme that we’ll be adding the code to.

Now, activate that theme on at least one of the sites in your network and visit one of those sites.

Here’s my starting site:

Creating the Function to List Sites

Now we’ll create the function that will list out the sites with links. Open the functions.php file in your parent theme (or create one if it doesn’t already have one) and add this:

This uses the get_sites() function to fetch information about all of the sites in the network and stores that as a variable called $subsites. It then checks if anything has been fetched by that function and if so, opens an unordered list and a foreach loop. The whole thing is hooked to the wpmu_before_header hook, which is an action hook in my parent theme.

Note: If your parent theme doesn’t have any hooks, you’ll have to code the wpmu_list_sites() function into your theme’s header, or add a hook.

Now inside that loop, add this:

This fetches the blog ID for the subsite (which is necessary because the get_sites() function retrieves the information as an object, not an array). It then assigns variables to each of the site’s name and its URL, using get_blog_details(), and finally echoes out the name with a link to the URL, in a list item.

Here’s the full function:

Now let’s take a look at the site:

There it is! But it doesn’t look too good. Let’s add some styling.

Styling the List

Open the parent theme’s stylesheet and add this styling for our list:

This floats the list items next to each other, adds a background and text colour, and removes the bullets.

Here it is on the site now:

Looks good! But there’s a problem. On wider screens, the list is way over to the left and not aligned with the rest of the site content:

We can easily fix that. First in your function, add a container element. The function will now look like this:

Second, add some styling for this container element to the stylesheet:

Edit the styling for the ul element:

And finally, tweak the margins for links so that they align with the left of the content:

Now your list will look much nicer:

So there you have it! If you wanted to to, you could add this elsewhere in the site, such as in the footer or sidebar. If so, you’d probably amend the styling.

Promoting Your Network and its Sites

If the sites in your Multisite network are linked, for example if they all relate to parts of one larger group or organization, it’s a good idea to give visitors the ability to easily switch between them.

Using this technique in your parent theme will save you having to manually add links to the other sites each time you add a new site to the network. If you wanted to tweak it for your subsites, you could easily edit the stylesheet for each site to amend the colors and layout, or you could remove the function from the action hook and attach it to a different hook to display it elsewhere.