Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
Tags
wordpress installing carrington mobile and customizing theme z

TUTORIAL- A-z: Installing And Customizing Carrington Mobile Theme For Wordpress
#1
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 documentation/tutorial.

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. Hot 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.
[Image: carrignton-1.png?resize=300%2C134]
undefinedinstalling wordpress mobile edition

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 (http://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)
undefinedInstalling a theme

[Image: carrington-new.png?resize=300%2C145]

(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
  • 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.jdtrendz.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 undefined
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 undefined
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 undefined
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 undefined
UPDATE TO REMOVE WEBSITE AND EMAIL FIELD FROM CARRINGTON MOBILE THEME COMMENT FORM to remove website field from carrington [i][b]mobile theme [/b][/i]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.
  


Possibly Related Threads...
ThreadAuthor Replies Views Last Post
  Wordpress Gurus Help Needed Please greatben 3 35 12-08-2017, 10:15 AM
Last Post: Pedro
  HELP: Ftp Websites And Scripts For Wordpress Lettuah 7 142 11-18-2017, 05:32 PM
Last Post: Lettuah
  Pls Guy How Can I Use Two Domain On My Wordpress Site gistking 0 34 11-15-2017, 07:44 PM
Last Post: gistking
  Come In Wordpress Masters, Help Please. greatben 11 164 11-08-2017, 10:56 AM
Last Post: Smithsolo
  Help Need!! Pls How Can I Change My Homepage Background Colour On A Carrigton Mobile gistking 7 135 09-19-2017, 09:41 AM
Last Post: Pedro
  Pls How Can I Change My Homepage Title Color On Carrigton Mobile Theme Pls Ezekiel 0 53 08-31-2017, 07:59 AM
Last Post: Ezekiel
  Pls How Can I Change My Homepage Title Color On Carrigton Mobile Theme Pls Ezekiel 0 55 08-31-2017, 07:39 AM
Last Post: Ezekiel
  Pls How Can I Change My Homepage Title Color On Carrigton Mobile Theme Pls Help Neede Ezekiel 0 59 08-31-2017, 06:34 AM
Last Post: Ezekiel



Users browsing this thread:
1 Guest(s)

List of Users who browsed this thread: Bigga, Gift, gistking, greatben, haarun.haarun, Juwonjeg, Lilbob, Plus, remitheblogger, rockbaze, snrguy, usman2442, victor44843, wakapass
A-z: Installing And Customizing Carrington Mobile Theme For Wordpress00