A-Z: Installing and Customizing Carrington Mobile Theme for WordPress

As a teenager, someone once told me, “Very soon the World will be in our pockets”. Alas! we’re now living in a mobile world, a mobile village. In this era, 65% (if not more) of traffic to your website will come via a mobile gadget, with this in mind you need to make sure your site is mobile optimized. If your are running a WordPress powered site/blog, optimizing your site for mobile devices comes easy with varieties of plugins available for this purpose. In this writeup I’l shed more light on installing and customizing Carrington mobile theme. Carrington mobile theme is used for some reasons which include its simplicity, neatness and compatibility with most touch enabled devices. I used Carrington for a project sometimes ago, the major challenge I encountered with Carrignton motivated me to write this tutorial.

MUST READ: Download Customized Carrington Mobile Theme For WordPress Mobile Site

Before I proceed, I assume you are an Administrator of your website, this privilege is needed to carry out Carrington mobile theme installation and customization.

How to Install Carrignton mobile theme: There are several ways to install, but i would love to do it my way. The first step is to install WordPress Mobile Edition, here is ow to do that;

• Open your wordpress admin dashboard, click on Plugin–Add new
• Search for WordPress Mobile Edition and install, Click on activate.

Note: WordPress Mobile Edition is a plugin responsible for switching to Carrington theme when a mobile device is detected.

Although, Carrington Mobile theme is embedded in this plugin but I’l advise you ignore that.

Here is how to install your own Carrington Mobile Theme: Download Carrington Mobile Theme here (https://syntocode.com/wp-content/uploads/carrington-mobile-1.1.zip) OR from WordPress repository here (http://wordpress.org/themes/download/carrington-mobile.1.1.zip) (i’ll advise you download from the first link to avoid “WP Mobile is incorrectly installed. Please check the README.” error message, the only thing i modified in that file is the folder name. If you download from the second link and encounter error after installation, kindly refer to this post Fix “WP Mobile is Incorrectly Installed Please Check the Readme” Error in WordPress)

• After you’ve downloaded Carrington from any of the links above, Open your WP Dashboard Goto Appearance>>Theme

• Click on Install theme, Click on upload, Click on browse to select the theme you downloaded

• Click on Install now. (After installation DO NOT ACTIVATE!! Just move on)

(MUST READ: Fix “WP Mobile is Incorrectly Installed Please Check the Readme” Error in WordPress )

CUSTOMIZING CARRINGTON MOBILE THEME INSERT SOCIAL SHARING BUTTONS (FACEBOOK, TWITTER ETC) INTO CARRINGTON MOBILE THEME.

• In your WP Dashboard Goto Appearance>>Editor
• Under “select theme to edit”, Choose Carrignton and click on Select
• Under “Templates” Click on “Contentdefault.php”
• Scroll to the last line and paste the following codes and click on update file;

<p><h3>There is love in sharing</h3></p><script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "62930156-f31a-4af5-afa9-632c8b8d7038", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> <span class='st_sharethis_large' displayText='ShareThis'></span> <span class='st_facebook_large' displayText='Facebook'></span> <span class='st_twitter_large' displayText='Tweet'></span> <span class='st_linkedin_large' displayText='LinkedIn'></span> <span class='st_fblike_large' displayText='Facebook Like'></span> <span class='st_digg_large' displayText='Digg'></span> <span class='st_googleplus_large' displayText='Google '></span> <span class='st_reddit_large' displayText='Reddit'></span> <span class='st_pinterest_large' displayText='Pinterest'></span> <span class='st_email_large' displayText='Email'></span>

• Click on Update..

INSERT YOUR SITE LOGO AND CUSTOMISED MENU INTO CARINGTON MOBILE THEME

• Upload your Logo (you can do this via Media in your WP dashboard) Copy the image location/link of your logo (e.g http://www.syntocode.com/wp-content/uploads/2013/11/logo.png)

• Open your WP Dashboard Goto Appearance>>Editor

• Under “select theme to edit”, Choose Carignton and click on Select

• Under “Templates” Click on “header-default.php”

• Locate the following lines of code

<h1 id="site-name"></h1> <h1 id="site-name"></h1>

• Now replace the above code with

<center><img src="paste-your-full-logo-location-here-starting-with-http" /></center> <center><img src="http://www.syntocode.com/ wp-content/uploads/2013/11/logo.png" /></center>

• Click on update file to save. That’s all for logo.

To insert a list of top menu in Carrington mobile theme, copy the following codes and paste below your logo codes, you can change the url and the menu text to whatever you desire (a bit of html knowledge). <div style="padding: 5px; background: #F5F6CE; border: 1px solid black;"> <div><b><a href="<?php bloginfo('url');?>">Home</a> | <a href="http://infolodge.net/blog/blog/categories/news/">News</a> | <a href="http://infolodge.net/blog/blog/categories/videosandtv/">Videos & Tv</a> | </a><a href="http://infolodge.net/blog/blog/categories/musicandvideos/">Music</a> | <a href="http://facebook.com/infolodge.net">Facebook</a> | <a href="http://infolodge.net/blog/contact">Contact Us / Advertise</a></b></div> </div>

• Customize the codes to your taste, After you are done, remember click on update file to save.

CUSTOMIZE FOOTER CREDITS IN CARINGTON MOBILE THEME

In order to customize the default footer text i.e “proudly powered by wordpress and carrington” “login or register” or add your own custom text/hyperlinks.

• Open your WP Dashboard Goto Appearance>>Editor

• Under “select theme to edit”, Choose Carington and click on Select
• Under “Templates” Click on “footer-default.php”
• Search for this code

Proudly powered by <a href=" http://wordpress.org"><strong>WordPress</strong></a> and <a href=" http://carringtontheme.com"><strong>Carrington</strong></a>. <!--?php wp_loginout(); wp_register(' | ', ''); ?--> Play around the footer links, text and customize to your taste, you may decide to add privacy link, design by etc.

• Remember to click on “update file” to save your configurations 🙂

HOW TO REMOVE DATE FROM CARRINGTON MOBILE THEME EXCERPTS PAGE

Carrington displays date on the excerpt page, this date gives info on when last you modified that page. To remove this

• Open your WP Dashboard Goto Appearance>>Editor
• Under “select theme to edit”, Choose Carington and click on Select
• Under “Templates” Click on “excerpt-default.php”
• Look for this line of code and delete

<span><?php the_time('M j, Y'); ?></span>

• Remember to click on “update file” to save your configurations 🙂

REPLACING CARRINGTON SEARCH BOX WITH GOOGLE CUSTOM/ADSENSE SEARCH BOX

• Open your WP Dashboard Goto Appearance>>Editor
• Under “select theme to edit”, Choose Carington and click on Select
• Under “Templates” Click on “search.php”
• Look for this line of code

<form id="search" action="&lt;?php bloginfo('home'); ?&gt;&lt;p&gt;" method="get"></form> <div id="abId0.8462062206262913"><input id="s" type="text" inputmode="predictOn" name="s" value="" /> <input type="submit" name="submit_button" value="Search" /></div>

• Replace the code with this Google custom code, you should insert your adsense details

<div> <form action="http://www.google.co.in/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-00000000000000" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="30" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="http://www.google.co.in/coop/cse/brand?form=cse-search-box&lang=en"></script> </div>

• Remember to click on “update file” to save your configurations 🙂

CORRECTING CARRINGTON MOBILE THEME WITH WORDPRESS SEO PLUGIN BY YOAST CONFLICT THAT CAUSES TITLE REPETITION

When Carrington is used along side WordPress SEO Plugin by yoast you might experience repetition of titles, take for example (this blog’s title is Syntocode’s Diary, this will be repeated). To resolve this, you just need to change a few lines of code.

• Open your WP Dashboard Goto Appearance>>Editor

• Under “select theme to edit”, Choose Carington and click on Select

• Under “Templates” Click on “header-default.php”

• Search for this line of code

<title><?php wp_title('«', true, 'right'); bloginfo('name'); ?></title>

• Replace the above code with

<title><?php wp_title(”); ?></title>

• Remember to click on “update file” to save your configurations 🙂

UPDATE: TO REMOVE WEBSITE AND EMAIL FIELD FROM CARRINGTON MOBILE THEME COMMENT FORM

To remove website field from carrington mobile theme You’ll need ftp access to do this, login to your ftp account (or web server file manager) inside public_html locate wp-content>>themes>>carrignton-mobile>>forms and open comment.php The html code that renders this field is between line 60 and 63, search and remove the following codes and save your changes. <p> <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" /> <label title="<?php _e('Your website address', 'carrington-mobile'); ?>" for="url"><small><?php _e('Web', 'carrington-mobile'); ?></small></label> </p> to remove email field from carrington mobile theme The html code that renders the email field is between line 50 and 59, search and remove the following codes <p> <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" /> <label for="email"><small><?php _e('Email', 'carrington-mobile'); if ($req) { _e(' (required, but never shared)', 'carrington-mobile'); } else { _e(' (never shared)', 'carrington-mobile'); } ?></small></label> </p> After Saving, login to your wordpress dashboard Goto Settings>>Discussion, under comment option uncheck the “Comment author must fill out name and e-mail” Save your changes.

READ THIS: How to Display Featured Image On Carrington Mobile Theme Homepage

READ THIS: Download Customized Carrington Mobile Theme For WordPress Mobile Site by Syntocode

I hope this has been helpful. I welcome questions and suggestions. Sharing is caring, kindly hit the share button 🙂