How To Setup and Customize Carrington Mobile WordPress Theme

Share:
If your are a blogger and you run a WordPress Platform, optimizing your site for mobile devices comes easy with varieties of plugins available for this purpose and not just for yourself but also for your end users. In this article I’ll will see you through on how to install and customize Carrington mobile WordPress Theme. Carrington mobile WordPress theme is used for some reasons which include its simplicity, neatness and compatibility with most touch enabled devices. Though This Is another best choice if you are not that rich to purchase a Responsive Premium Theme.

Also Put it at the back of your mind that Google Now rank Sites with a very good mobile theme with great response high on search engine.

Carrington has been very good looking all all mobile devices even down to Computers. Carrington Mobile Was Developed and Coded By Alex King.

According to its Description on WordPress.org > “A mobile-friendly theme for your blog. Best used with (and included with) the WordPress Mobile Edition plugin. Supports basic mobile browsers as well as advanced and touch-screen browsers with a display optimized for each. Built on the Carrington framework.”

Before You can Install Carrington. You must are an Administrator of your website and also have full access to you hosting panel backend or FTP server because this privilege is needed to carry out Carrington mobile theme installation and customization.


How To Configure and Customize Carrington Mobile WordPress Theme by Alex King:

There are several ways to install, but in this article, Am gonna show you my own ways.

The first step is to install WordPress Mobile Edition, here is how to achieve that;

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

Download Carrington Mobile Theme directly from WordPress repository Here

>After you have successfully downloaded Carrington from the above link
>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.

( NOTE: After installation DO NOT ACTIVATE!! if you know you wanna set different themes for Computer View and Mobile View via a Mobile Switcher Plugin. So Just move on)

Let get down to Customizing Carrignton Mobile Theme and Installing Carrington theme
CUSTOMIZING CARRINGTON MOBILE THEME By Alex King.

INSERTING 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://mywebsiteurl.extension/logo-path)

> 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>
or
<center><img src=”/image-path”/></center>

Click on update file to save. That’s all for our sites 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. I guess this is gonna be very easy if you have html ideas.

<div style=”padding: 5px; background: #F5F6CE; border: 1px solid black;”>
<div><b><a href=”<?php bloginfo(‘url’);?>”>Home</a> |
<a href=”/categories/news/”>News</a> |
<a href=”/categories/mobile/”>Mobile</a> |
</a><a href=”/categories/Tech/”>Music</a> |
<a href=”http://facebook.com/braintechnologies”>Our Facebook Page</a> |
<a href=”http://brainlanded.com/disclaimer”>Sites Disclaimer Page</a></b></div>
</div>

To insert a Drop dwon list of menu/categories in Carrington mobile theme:

<div id=”sandemosky”></div><div class=”group” align=”center”>
<div class=”nk-main-nav-wrap”><select name=”options” onchange=”location.href=this.options [this.selectedIndex].value” id=”nk-drop-list”><option value=”/”> Choose Category Here…</option>
<option value=”/Isen”> ISEN SEMINAR </option>
<option value=”/category/computers”> Computers </option>
<option value=”/category/codingscripts”> Coding</option>
<option value=”/category/seminars”> Seminar </option>
<option value=”/category/mobile”> Mobile</option>
<option value=”/category/techs”> Techs|Tutorials</option>
<option value=”/category/websites”> Webmastering</option>
<option value=”/category/seo/”> SEO</option>
<option value=”/category/joomla/”> Joomla</option>
<option value=”/category/wordpress”> WordPress</option>
<option value=”/category/education”> Education</option>
<option value=”/category/cgists”> Campus Gists</option>
<option value=”/snews/”> School News</option>
<option value=”/category/media”> Media</option>
<option value=”/category/musics”> Musics</option>
<option value=”/category/procontents”> Promotions </option>
<option value=”/Category/news/”> News</option>
<option value=”/about”> About Us</option>
<option value=”/advertise”> Place Adverts</option>
<option value=”/sitemap”> Users-SiteMap</option>
</select></div>
</div>

You can Customize the codes to meet your site categories and links, After you are truly done, remember click on update file to save.

NOW LETS CUSTOMIZE THE FOOTER CREDITS IN CARRINGTON 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(‘ | ‘, ”); ?–>
You can Play around the footer links, text and customize to your taste, you may decide to add privacy link, design by Jammys Herlert.

Always Remember to click on “update file” to save your changes.

HOW TO REMOVE DATE FROM CARRINGTON MOBILE THEME EXCERPTS PAGE

The Carrington Theme displays date on the excerpt page, this date gives info on when last you modified that page. I will Like you to remove this because it at times slows down your page loading time.

So 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 Changes.

IF YOU USE ADSENSE ON YOUR SITE, YOU CAN REPLACE CARRINGTON SEARCH BOX WITH GOOGLE ADSENSE SEARCH BOX BY FOLLOWING THE BELOW STEPS.

>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 created adsense for search script

<div>
<form action=”http://www.google.co.in/cse” id=”cse-search-box”>
<div>
<input type=”hidden” name=”cx” value=”partner-pub-Your Publisher Id” />
<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>

Always Remember to click on “update file” to save your Changes<

INSERTING SOCIAL SHARING BUTTONS (FACEBOOK, TWITTER and Others via ShareThis) INTO CARRINGTON MOBILE THEME FOR GOOD SEO.

>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 below codes and click on update file.

<p><h3>Dont Be Selfish, Share This</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 To Take Effect..

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 Brainlanded-Home Of Multiloaded End User Contents, this will be repeated). To get this fixed, 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 changes<
NOW UPDATE

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

To remove website field from carrington mobile theme
Like I said Earlier in this tutorial. You’ll need ftp access to do this, login to your ftp account (or web server file manager) inside public_html or www.
locate wp-content>>themes>>carrignton-mobile>>forms and open comment.php
The html code that renders this particular 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 THE DEFAULT EMAIL FIELD:

The html code that renders the email field is between line 50 and 59, search and remove the following codes. But I will Advise You To leave it Just to increase your SEO.

<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” to discard unwanted conflicts.
Save your changes and Enjoy Your Mobile Friendliness.

 Don't Be selfish, Sharing is Caring. Share this post.....
Thanks for Reading