Tag: classicpress

Page Redirects in WordPress or ClassicPress

Page redirects in WordPress or ClassicPress are not the most straightforward topic if you are dealing with it for the first time. Many people have heard of page redirects before but aren’t always sure when you need to use them or how to implement them. These are sometimes needed when maintaining a Wordpress or Woocommerce site.

In the following blog post, you will learn everything you need to know about page redirects (in WordPress and otherwise).

This includes what they are and why they matter when to use what type of redirect, where to apply them, and different ways of correctly implementing page redirects on your WordPress site, so to start lets take a look at what they are.

What Are Page Redirects and Why Do You Need Them?

Page redirects are basically like a send-on notice for the post office. When you move, you can get one of those and any mail that was sent to your old house will automatically be delivered to your new mailing address.

Redirects are the same thing but for web pages only that, instead of letters and parcels, it sends visitors and search spiders to another web address.

Implementing page redirects can be necessary for many reasons:

  1. A mistake in your title and URL that you want to correct
  2. Attempting to add/target a different keyword with your page
  3. The entire permalink structure of your site has changed
  4. Some external link is pointing to the wrong address and you want visitors to find the right page
  5. You want to change parts of your URL, like remove www or switch to HTTPS (or both)
  6. You have moved to an entirely new domain (or merged another site with yours) and want the traffic and SEO value of the old URL to land on the new one

Why Do They Matter?

From the above list, it’s probably already obvious why page redirects are a good idea. Of course, if your entire site moves, you don’t want to start from scratch but instead, benefit from the traffic and links you have already built. However, even if you only change one page, implementing a redirect makes sense.

That’s because having non-existent pages on your site is both bad for visitors and search engine optimization. When someone tries to visit them, they will see a 404 error page. This is not a pleasant experience and usually very annoying (as entertaining as 404 pages can be).

Because of that, search engines are also not a big fan of this kind of error and might punish you for it. Also, you want them to understand your site structure and index it correctly, don’t you? Therefore, it’s a good idea to leave a “this page no longer exists, please have a look over here ” message whenever necessary.

Different Redirect Codes and What They Mean

When talking about redirects, you need to know that there are several different types. These are categorized by the HTTP codes that they have been assigned to, similar to the aforementioned 404 error code for a missing page. However, for redirects, they are all in the 300 category:

  • 301 — This is the most common kind. It means that a page has moved permanently and the new version can from now on be found at another location. This page redirect passes on 90-99 percent of SEO value.
  • 302 — This means a page has moved temporarily. The original URL is currently not available but will come back and you can use the new domain in the meantime. It passes no link value.
  • 303 — Only used for form submissions to stop users from re-submitting when someone uses the browser back button. This is probably not relevant to you unless you are a developer.
  • 307 — The same as a 302 but for HTML 1.1. It means something has been temporarily moved.
  • 308 — The permanent version of the 307.

When to Use What?

Of course, the biggest question is, when to use which type of page redirect?

While there are several options, you usually only need two of them: 301 and 302. Out of those, probably more than 90 percent of the time, you will use a 301. That’s because for the rest (except 303), it’s not always clear how search engines handle them, so you basically stick to those two options.

As for when to use which, much of it you can already understand from what the code tells the browser or search spider, however, here’s a detailed description:

  • 301 — Use this when you are planning on deleting a page and want to point visitors to another relevant URL or when you want to change a page’s permalink (including the domain).
  • 302 — Use this, for example, when making changes to a page that visitors are not supposed to see or when you redirect them to a temporary sales page that will soon turn back to the original. That way, search engines won’t de-index the existing page.

Redirects and Page Speed

While page redirects are great tools for webmasters and marketers, the downside of them is that they can have an effect on page speed.

As you can imagine, they represent an extra step in the page loading process. While that’s not much, in a world where visitors expect page load times mere seconds, it matters.

In addition, page redirects use up crawl budget from search engines, so you can potentially keep them from discovering your whole site by having too many of them. Therefore, here are some important rules for their usage:

  • Avoid redirect chains — This means several hops from an old to a new page. This is especially important when you redirect http to https and www to non-www. These should all resolve to the same domain directly (https://domain.com), not ping pong from one to the next.
  • Don’t redirect links that are in your control — This means, if there is a faulty link inside a menu, inline, or similar, change them manually. Don’t be lazy.
  • Try to correct external links — If the fault is with an incoming link, consider reaching out to the originator and ask them to correct it on their end.

In essence, keep page redirects to a minimum. To see if you have multiple redirects in place, you can use the Redirect Mapper.

How to Find Pages to Redirect and Prepare the Right URLs

So, besides when you do a site or page move, how do you find pages to redirect?

A good place to start is the 404 errors/crawl errors in Google Search Console. You find them under Coverage.

Note that Search Console now only shows 404 errors that threaten your pages from being indexed and not all of them. Therefore, to track down non-existent pages, you can also use a crawler like Screaming Frog. Some of the WordPress plugins below also help you with that, additionally you can take a look at SEMRush, and SEO management tool which is very popular, and used by many experts and beginners alike, you can get a free trial via the link above.

Then, to prepare your page redirects:

  • Get the correct to and from URL — This means to stay consistent in the format. For example, if you are using a trailing slash, do it for both URLs. Also, always redirect to the same website version, meaning your preferred domain including www/non-www, http/https, etc.
  • Get the slug, not the URL — This means /your-page-slug instead of http://yoursite.com/your-page-slug. This way, you make your redirects immune to any changes to the top-level domain such as switching from www to non-ww or from http to https.
  • Redirect to relevant pages — Meaning similar in topic and intent. Don’t just use the homepage or something else, try to anticipate search intent and how you can further serve it.

How to Correctly Implement Page Redirects in WordPress

You have different methods of implementing page redirects in WordPress. Basically, you can either use a plugin or do it (somewhat) manually via .htaccess. Both come with pros and cons:

  • Plugin — Easy to use, nontechnical, however, potentially slower because many of them use wp_redirect, which can cause performance issues.
  • .htaccess — This is a server file and very powerful. For example, you can include directives for using gzip compression in it. Using this is faster because page redirects are set up at the server level, not somewhere above it. However, making a mistake can mess up and/or disable your entire site.

Let’s go over both options:

1. Using a Plugin

You have different plugin options for redirects in WordPress. Among them are:

  • Redirection — This is the most popular solution in the WordPress directory. It can redirect via Core, htaccess, and Nginx server redirects.
  • Simple 301 Redirects — Easy to use, few options, does just what you need and nothing more.
  • Safe Redirect Manager — With this plugin, you can choose which redirect code you want to use (remember what we talked about earlier!). It also only redirects to white-listed hosts for additional security.
  • Easy Redirect Manager — Suitable for 301 and 302 redirects. The plugin is well designed and comes with many options.

All of the plugins work in a very similar way. They provide you with an interface where you can enter a URL to redirect and where it should lead instead.

add page redirect via wordpress plugin

Some of them, like the Redirection plugin, also have additional functionality. For example, this plugin also tracks whenever a visitor lands on a page that doesn’t exist so you can set up appropriate page redirects.

2. Using .htaccess

.htaccess usually resides on your server inside your WordPress installation. You can access it by dialing up via FTP.

filezilla ftp client for wordpress

Be aware though that it is hidden by default, so you might have to switch on the option to show hidden files in your FTP client of choice.

filezilla force show hidden files

The first thing you want to do is download and save it in a safe place so you have a copy of your old file in case something goes wrong. After that, you can edit the existing file (or another local copy) with any text or code editor.

A simple redirect from one page on your site to another can be set up like this:

RewriteEngine On
Redirect 301 /old-blog-url/ /new-blog-url/

If the brackets already exist (as they should when you are using WordPress), all you need is this:

Redirect 301 /old-blog-url/ /new-blog-url/

Just be sure to include it right before the closing bracket. You can also use wildcards in redirects. For example, the code below is used to redirect all visitors from the www to the non-www version of a website.

RewriteCond %{HTTP_HOST} ^www.mydomain.com$
RewriteRule (.*) http://mydomain.com/$1 [R=301,L]

To explore more options and if you don’t want to write them out manually, there is this useful tool that creates redirect directives for you.

When you are done, save/re-upload and you should be good to go. Be sure to test thoroughly!


Page Redirects in WordPress can be very useful & page redirects have a very important function. They keep visitors and search engines from landing on non-existent pages and are, therefore, a matter of both usability and SEO.

Above, you have learned all you need to know about their usage and how to implement them. You are now officially ready to start sending visitors and search spiders wherever you want.

Note that these aren’t the only ways to implement page redirects. However, they are the most common and recommended. If you want to know less common ways, check this article on CSS Tricks.

What do you use to implement page redirects in WordPress? Any more tools or tips? Share them in the comments section below & if you enjoyed this post, why not check out this article on WordPress Building Trends For 2020!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, eCommerce, WordpressTagged with: , ,

ClassicPress Quick Review and Test

So, having discovered the new fork of Wordpress ClassicPress recently, I thought I would take it for a spin to see what the hype was about! ClassicPress is a pared down bloatless version of Wordpress which retains the old TinyMCE editor instead of the Gutenberg in Wordpress, and allows developers more freedom to build sleek fast sites using it.

Here are a couple of press releases from the ClassicPress team

Improved Security

Concerned about security? ClassicPress has a “security-first” approach. No matter how shiny or exciting a new feature is, if it’s not secure, it won’t be added to the platform.

Less Bloat

We believe that powerful does not need to mean code-heavy. We’ve trimmed unnecessary plugins and features from ClassicPress core, and continue to actively seek smart ways to reduce code bloat.


Choose the development path that works best for you. With the flexibility and stability that ClassicPress provides, you have the freedom to create a solution that meets your unique needs.

So I decided to take a look and see how we can use ClassicPress with an original HTML theme/PSDs etc, rather than a prebuilt theme and I customised one of my earlier Wordpress bare starter packs to work with ClassicPress, to take a look, and then go a bit further and use an original HTML/PSD (if necessary) theme with it.

Just a Few Languages

First of all, at the time of writing only Installatron have a hosting install option, so it all has to be done manually, by first creating a Database and uploading the ClassicPress files to the server, renaming wp-config-sample.php to wp-config.php and entering the database details in there. When browse to the URL we will get a screen like the one above. If you speak fluent USA, or indeed one of the other more obscure languages you’ll be fine!

The setup screen will appear and allow us to fill in the details for the install. Typically these will be from the database you created, in most cases the database name will be the same as the database user, with the password and email added in.

A few minutes later we are ready to go, and logging in will show us a bare bones admin, with TinyMCE editor and no plugins whatsoever. I switched to my Bare ClassicPress starter which is rather sparse, but that’s for a reason, so we can put in any styles, javascripts, fonts and anything else we need to build up the site.

So to start with we have just got the standard default page and nothing else. Some adjustment needed.

Adding a few pages, a Menu and setting a Home static page currently gives us just an itsy bitsy menu that doesn’t exactly smack you in the face as a work of unadulterated design genius! I mean, you can hardly see it! So we need to liven that up a bit, and in this case, to keep it short, well just use good old Bootstrap! Here’s what we do.

1. If we head over to GetbootStrap and grab the CSS and JS files, (V 4) and then we get Popper from, well Popper.JS!

With the Bare ClassicPress starter we can just put the Bootstrap css and Bootstrap and Popper js files in the respective folders which are already there (css folder is called “styles”), then import the bootstrap css file into the themes default css file (style.css) along with Google font Work Sans.

@import url(http://fonts.googleapis.com/css?family=Work Sans);
@import url(‘styles/bootstrap.css’);

(Just replace the original css boots-bones file)

2. Then we add a couple of lines to the functions.php file to register the js files, like so:

wp_enqueue_script( 'naked', get_template_directory_uri() . '/js/popper.js', array(), BARE_VERSION, true );
wp_enqueue_script( 'naked', get_template_directory_uri() . '/js/bootstrap.min.js', array(), BARE_VERSION, true );

(The add action is already there)

3. That’s the js files done, now we also need a Navwalker for the menu, so I just grabbed one from Github at https://github.com/wp-bootstrap/wp-bootstrap-navwalker and placed it in the theme folder root, then we write a few more lines to register that in functions.php, like below.

/show bootstrap walker on Theme
// Theme navbarResponsive function
function wp_theme_setup(){
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'Bare ClassicPress' ),
'secondary' => __('Secondary Menu', 'SUBITEMS'),
) );
//action hook to load navbar after theme loads

4. Now we just want to change the code in the header to suit the new style we are going to use, so I grabbed the nav from another Bootstrap theme I made with VueJS Gridsome and changed the “g-link” tags to “a” tags, so we have a new nav layout in the header, in to which we can put the Navwalker code. Essentially, we just remove the ul’s an li’s from the Bootstrap nav html code, and replace with the Navwalker php code, which is:

(wrapped in php tags)

wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
) );

Which should work whichever type of Bootstrap nav is used, just put that in place of the ul’s and li’s (or a tags). I also put in a dummy logo instead of the text in navbar-brand with php echo, after creating an images folder in the bare-classicpress theme, and uploading it:

Also, I used Fakerpress to generate some more dummy posts/pages in addition to the ones I had already made, https://en-gb.wordpress.org/plugins/fakerpress/

So now we are ready to take a look at the new nav layout, and see if it is any better than the original!

Look’s a little better to me!

So that’s a quick look at ClassicPress with the Bare ClassicPress starter, although there are others which can be used. There is still a lot more that needs to be done here though, which probably involves digging in to the theme template files to customize them a bit for various layouts, but if you want a bare theme with no bloat or plugins and no Gutenberg then ClassicPress seems like a good place to start.

The Bare ClassicPress starter can be found on Github at:


And ClassicPress from https://www.classicpress.net/

You can grab the Bootstrap html code from the /components/ folder in this Vue Gridsome starter


But change the g-link tags to a tags! If you enjoyed this post, why not check out this one on Wordpress Dynamic Content!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, WordpressTagged with: ,