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.
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" /> -->
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’.
If you’ve been anywhere on the internet in the past few months, you’ve seen the +1 button from Google right next to Facebook, Twitter, StumbleUpon and other social media sharing buttons. It’s pretty clear that Google intends the “plus one” to be THE most important form of approval on the ‘net, integrating all those “plusses” into search results as well as showing them within the Google+ Plus network.
Here’s how to integrate the Google Plus button on the WordPress Twenty Eleven theme.
footer.php file, right before the the closing </body> tag:
To add the Google Plus button to each post displayed on the first page, we need to modify the
content.php file. Like all of the other modifications we’ve made to create a child theme like creating a custom header and custom footer, copy the
content.php file into your child theme folder. To display the Google Plus button underneath the title, we need to place the following code, after the
<div class="entry-content"> and before the
<?php the_content> tag:
1 2 3 4 <div class="entry-content"> <!-- Place this tag where you want the +1 button to render --> <g:plusone href="<?php the_permalink(); ?>"></g:plusone> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>
In the Google button code, the piece of code that references
the_permalink is a WordPress function that passes the link of blog post to the Google Plus button. Without this addition to the button, Google will use the URL of the page you are on…in my case, the 3 buttons on the front page would all reference www.randyzwitch.com, which means a visitor wouldn’t be able to recommend an individual post.
To add the Google Plus button on an individual article or blog post using the “Standard” format in Twenty Eleven, we can do the same basic process as above, except we’ll modify the
content-single.php file (again, copy this file into your child theme folder!). We’ll add the code after the <h1> tag and before the “If” statement that starts building the content:
1 2 3 4 5 <h1 class="entry-title"><?php the_title(); ?></h1> <!-- Place this tag where you want the +1 button to render --> <g:plusone href="<?php the_permalink(); ?>"></g:plusone> <?php if ( 'post' == get_post_type() ) : ?>
Technically, you don’t need to specify the
the_permalink reference, since there will only be a single button on an individual blog post, and the Google Plus button will use the URL of the page. But, it doesn’t hurt, so for documentation sake I’ve left it in.
Once you’ve added the button code on the individual page, you’re done! Visitors to your blog can now recommend your content on Google search and on the Google+ network.
For this tutorial, I only provided the code for modifying the “Standard” page format for a single blog post. If you are using multiple formats across your blog, you’ll need to modify each template you are using. They all begin with
content-<format>.php, and the button code goes after the <h1> tag and before any other code.
It’s also possible to modify how large the Google Plus button is and what is displayed. I’m using the default bubble annotation, but if you’d like to have a larger or smaller button, or just different options, you can use the code builder from Google to see the button options.