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).
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.