Advice life hack

How to Add Mobile Redirect Code to Your WordPress Site Without a Plugin

So you finally bit the bullet and built out a mobile version of your website. Congrats!

Now the question becomes how to install the mobile redirect code / script into your hosted WordPress?  For those of you who use WordPress for sites other than blogs, adding this code might be a head scratcher. The instructions from your mobile platform say “just paste this code between your <head></head> tags.” Right? But in a Content Management System (CMS) like WordPress where are the <head></head> tags?

I got stumped on this for a while this morning. Google, I have to say, wasn’t much help. I, like many of you, naturally assumed this feature would be handled with a plugin. When I Googled the issue, I did indeed find plugins for just this purpose. But some were $12 and others were $45. Which is not a problem, I don’t mind purchasing a plugin, here and there. But. Something was nagging me. Why would I need to buy a plugin? If anything, a plugin for handling such a simple task should be free.

Then I had a lightbulb moment. You don’t need a plugin in order to add mobile redirect code to your WordPress site!

All you have to do is find out which file WordPress places the <head></head> tags. Obviously, if you’re not using a CMS, these tags are contained in your index.php or index.html file. However, in CMS land, it’s a little different.

Do you already have your redirect code? Lately I’ve been testing bMobilize to build out my mobile sites. So far I’ve been really happy with the results. I’ve tried Wapple and Mofuse, but bMobilize has my undivided attention right now. But let’s save the mobile platform review for another time. For now lets say you have your redirect code in hand…and you’re ready to place it into WordPress.

Here’s how: (you need to have a little HTML code under your belt. Basically, can you cut and paste? Yes? Good. You’re qualified).

Fig 1.1 Click to enlarge

Log into your WordPress dashboard. Under Appearance, click on Editor. Then, along the right-hand side you’ll see a list of files. Click on Header (header.php). The code for this file will appear in the middle of your screen. (see fig 1.1). Scroll down inside the code until you see the open <head> tag.

Paste your redirect code just below that first <head>tag. Save. Go to your phone, pull up your website and you should be redirected to the mobile version of the site.

Of course, if your site is functioning as a blog and not a site, then you don’t really need redirect code…here is an article I wrote about making your blog mobile friendly. 

  • Pascal

    What is my “appearance” window doesn’t have “Editor”?  I just see Theme, Widgets, Menus, Theme Options, Header, Background, Custom Design, and Mobile…

    • scotteallen

      Pascal, I don’t believe you’ll be able to access the code Editor option on sites hosted at WordPress.com. I host my own WordPress installs. You might be able to engage that feature if you upgrade your WordPress account to “Pro.” but you’d need to research that more. 

      Thanks for the great question!

  • K Rex

    Thank You so much for this article! 

  • Beanzysmobiledesigns

    THankyou this would have helped but the site I was working on had the wrong permissions and I do not have the cpanel details. All the same great info

  • Franziska

    Thank you! Your explanation was very helpful! I used to have a WP plugin in order to convert to mobile, but this is way better! Thanks.

  • Eric

    Nice tutorial, but the issue with the way you describe is that every page the visitor lands on they will be redirected to the same page. So, if they land on the services page or the about us page, they are still redirected to the same page… not the one they clicked on. This is a “no-no” in Google’s eyes.

    Instead you should have the appropriate redirect for each page. Here is the plugin I use to accomplish this – http://ultimate-wordpress-mobile-redirect.com

Bad Behavior has blocked 745 access attempts in the last 7 days.