How to Disable Mobile Theme in WordPress

With smartphone usage on the rise, you might wonder why anyone would want to disable mobile support in WordPress (specifically, in the Twenty Eleven theme).  Answer: It’s poorly implemented, or at minimum sub-optimal in its default settings.

wordpress-mobile

Default WordPress mobile theme view

While the readability of each post is improved by laying out the main post area as full width, by placing the sidebars at the bottom, your readers may miss any content you are hoping to share.  For this website, the search button, social networking buttons, and Twitter feed information are shown at the bottom of the site layout (see picture on left).  It’s not the end of the world, but not ideal either.

To make things worse, if you start making changes to your CSS file to customize the theme and aren’t careful, the mobile theme will get mangled.  In my case, I assume that because I specified some of my width parameters in pixels instead of percentages, the mobile theme doesn’t know how to display them. But, since the traffic to this blog is mainly from desktop/laptop computers (which I know because I’m using Google Analytics!), I’ll optimize the blog design to non-mobile devices at the risk of mangling the mobile theme.

Luckily, what makes the mobile theme sub-optimal when using the Twenty Eleven theme is what makes it so easy to disable the mobile theme!

Disable the “viewport”

In order to turn off the mobile theme, all we need to do is comment out a single line of code within our header.php file.  The line we are looking for is a meta tag that refers to the “viewport”, which is a mobile META tag to specify dimensions for a mobile browser to use, and well as control/modify some functionality such as browser scaling (zoom).  Here’s what the commented out code should look like:

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

<!-- <meta name="viewport" content="width=device-width" /> -->

css-modifications-ruin-wordpress-mobile-theme

Any CSS mods and the mobile theme breaks down

Inside of this META tag, the “content” parameter specifies that the mobile browser should set the width of the content equal to whatever the device width is currently set.  So in the case of iPhones where the width varies depending on the phone orientation, the browser will re-size the content appropriately.

But, what if I want to just improve the mobile browser experience?

Obviously, just because the default mobile functionality in this theme doesn’t work very well, that doesn’t mean your desktop theme is ideal either.  If you want to design a mobile theme, you can use this same “Viewport” line of code to play around with the settings, hopefully finding ones that not only make your site look great, but are also compatible with the range of smartphones on the market.

For an explanation of all of the parameters that can be changed as part of the Viewport META tag, see this article from ‘Learn the Mobile Web’.

  • WordPress to Jekyll: A 30x Speedup
  • Bulk Downloading Adobe Analytics Data
  • Adobe Analytics Clickstream Data Feed: Calculations and Outlier Analysis
  • Adobe: Give Credit. You DID NOT Write RSiteCatalyst.
  • RSiteCatalyst Version 1.4.8 Release Notes
  • Adobe Analytics Clickstream Data Feed: Loading To Relational Database
  • Calling RSiteCatalyst From Python
  • RSiteCatalyst Version 1.4.7 (and 1.4.6.) Release Notes
  • RSiteCatalyst Version 1.4.5 Release Notes
  • Getting Started: Adobe Analytics Clickstream Data Feed
  • RSiteCatalyst Version 1.4.4 Release Notes
  • RSiteCatalyst Version 1.4.3 Release Notes
  • RSiteCatalyst Version 1.4.2 Release Notes
  • Destroy Your Data Using Excel With This One Weird Trick!
  • RSiteCatalyst Version 1.4.1 Release Notes
  • Visualizing Website Pathing With Sankey Charts
  • Visualizing Website Structure With Network Graphs
  • RSiteCatalyst Version 1.4 Release Notes
  • Maybe I Don't Really Know R After All
  • Building JSON in R: Three Methods
  • Real-time Reporting with the Adobe Analytics API
  • RSiteCatalyst Version 1.3 Release Notes
  • Adobe Analytics Implementation Documentation in 60 Seconds
  • RSiteCatalyst Version 1.2 Release Notes
  • Clustering Search Keywords Using K-Means Clustering
  • RSiteCatalyst Version 1.1 Release Notes
  • Anomaly Detection Using The Adobe Analytics API
  • (not provided): Using R and the Google Analytics API
  • My Top 20 Least Useful Omniture Reports
  • For Maximum User Understanding, Customize the SiteCatalyst Menu
  • Effect Of Modified Bounce Rate In Google Analytics
  • Adobe Discover 3: First Impressions
  • Using Omniture SiteCatalyst Target Report To Calculate YOY growth
  • Google Analytics Individual Qualification (IQ) - Passed!
  • Google Analytics SEO reports: Not Ready For Primetime?
  • An Afternoon With Edward Tufte
  • Google Analytics Custom Variables: A Page-Level Example
  • Xchange 2011: Think Tank and Harbor Cruise
  • Google Analytics for WordPress: Two Methods
  • WordPress Stats or Google Analytics? Yes!
  • JuliaCon 2015: Everyday Analytics and Visualization (video)
  • Vega.jl, Rebooted
  • Sessionizing Log Data Using data.table [Follow-up #2]
  • Sessionizing Log Data Using dplyr [Follow-up]
  • Sessionizing Log Data Using SQL
  • Review: Data Science at the Command Line
  • Introducing Twitter.jl
  • Code Refactoring Using Metaprogramming
  • Evaluating BreakoutDetection
  • Creating A Stacked Bar Chart in Seaborn
  • Visualizing Analytics Languages With VennEuler.jl
  • String Interpolation for Fun and Profit
  • Using Julia As A "Glue" Language
  • Five Hard-Won Lessons Using Hive
  • Using SQL Workbench with Apache Hive
  • Getting Started With Hadoop, Final: Analysis Using Hive & Pig
  • Quickly Create Dummy Variables in a Data Frame
  • Using Amazon EC2 with IPython Notebook
  • Adding Line Numbers in IPython/Jupyter Notebooks
  • Fun With Just-In-Time Compiling: Julia, Python, R and pqR
  • Getting Started Using Hadoop, Part 4: Creating Tables With Hive
  • Tabular Data I/O in Julia
  • Hadoop Streaming with Amazon Elastic MapReduce, Python and mrjob
  • A Beginner's Look at Julia
  • Getting Started Using Hadoop, Part 3: Loading Data
  • Innovation Will Never Be At The Push Of A Button
  • Getting Started Using Hadoop, Part 2: Building a Cluster
  • Getting Started Using Hadoop, Part 1: Intro
  • Instructions for Installing & Using R on Amazon EC2
  • Video: SQL Queries in R using sqldf
  • Video: Overlay Histogram in R (Normal, Density, Another Series)
  • Video: R, RStudio, Rcmdr & rattle
  • Getting Started Using R, Part 2: Rcmdr
  • Getting Started Using R, Part 1: RStudio
  • Learning R Has Really Made Me Appreciate SAS