Home / How To / A-Z: Installing and Customizing Carrington Mobile Theme for WordPress

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 documentation/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. 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.
installing wordpress mobile edition
installing 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)
Customizing Carrignton Mobile Theme
Installing a theme

(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 🙂

Comment via Facebook

comments

About Syntocode Tomisin

Curious, Open-minded and Weird homo sapien... Still curious?-Read More about me-. Need a Website Developer? HIRE me here or Connect with me on Google+ or Add up on Facebook

Check Also

download music mp3 video with bb10

How to Download Music and Video with BB10 Browser

So u use a Blackberry 10 smartphone? u find it difficult to download music and ...

126 comments

  1. I WANT THE TYPE OF NAIJALOADED DESKTOP VIEW I HAVE BEEN TRYING TO DO IT BUT IT IS JUST SHOWING ME ONLY THE PHONE VIEW

  2. pls oga syntocode i love ur themes but when ever i upload it after about 5 days of using it my site wount open not even the /wp-admin will open pls can u help put things in order???

  3. Here is another challenge from ftp, I was trying to upload zip /rar file directly from the WordPress but it wasn’t successful then I pass through ftp and it work but to access it again on WordPress was difficult please help. am waiting for many reply

  4. so thoughtful of you to share this tutorial

  5. Bro I need an urgent help. I installed carrington formally on my site & took it off. And right now I’m trying to put it up but its not working. I’ve went as far as downloading d .zip file to install all to no avail.

  6. Hi Syntocode. Am having a big problem with my customised carrington theme which i activated on my website http://www.bussydave.com.ng. My visitors find it hard to place a comment on my website but its otherwise on the PC version. Would be grateful if you could please help check this and reply back soon to my mail.
    Thanks in anticipation boss!

  7. wondering why all content of your customized carrington theme is in bold form. i mean all text and links. how do i get post contents on plain text and not all bold? couldnt see any bold tag in the script

    • this is the first time am getting this feedback……are sure u didnt modify any of the theme files?

      All contents will appear bold when there’s an open tag in either header or single.php file.

      kindly check and ensure all bold tags are closed

  8. Nice one. Used this help on ***.net

  9. thanks for this post. i used it to resolve the issue on *** after changing all, i had problems with the title. because mine was writing the POST URL instead of the POST title. So i applied the code here then went to my Yoast SEO > Titles & Metas > General > Untick Forceful rewrite URL – thats all

  10. Please how can i add my adsense code to the top of my mobile homepage

  11. Pls Admin, when someone want to comment on a post in my site it keeps saying “Error: click back and put password”
    Pls Help

  12. pls,can i carry out dis process on java phone?ur reply is needed pls.

  13. Please my carrington mobile is not showing comment box how can I activate or add it…
    Plz don’t ignore my comment

  14. plz how can I delete the default share button on the theme

    • the theme doesn’t come with a shared button unless it has been modified. Pls download a fresh copy or let me know where the share buttons are showing so as to tell u which file to edit.

      Cheers

  15. cool…i love this though

  16. am back again please how do I automatically share my post with my bbm contact

  17. Bro, Thank you very much. it works! God will continue to bless you with rich ideas, I really appreciate your love to we bloggers, website designer and internet markerters. Thank you very much!

  18. bro thanks for your help so far… I just notice that if I open my web on a computer it’s not all that okay on pc, it will just appear as if it was opened on phone I will need your help on how it will automatically change to desktop mode when my site is being acess on a computer

  19. Bro, Good day, Thanks for the info, I have done everything you said but, the theme is not active when i check my website on mobile, But you said we dont need to activate it. Please help. What else did i need to do, your reply will be appreciated. Thanks

  20. hi admin.
    pls how do I display a featured image beside the post title at the home page.
    you might need to see http://WWW.bla*.com

  21. Good day bro.
    i have been a silent fan of yours.

    please i need your help.

    How do i make a featured pic display on the home page beside the post titles?

    Thanks for your time

  22. Thanks bro you’ve really helped

  23. Pls how can It show only post title in homepage and other pages interm list post title

  24. Thanks, this wonderfull, I’m using your costumized carrington template, i want to display the date and time that post is been Publish on top of every post after post is open, for example ‘Publish on 1 May 2015 – 12:30’ displaying at the beginning of every open post.

    • Open the script that renders the page on which u would like to display the date & time (in this case it should be single.php), now Locate the location where u want it to appear and paste this code < ?php the_time('F j, Y'); ?> at < ?php the_time('g:i a'); ?>

      Hope that helps 🙂

  25. its seems not to work

  26. please i wanna know how to change my link color i dont like that blue

  27. u av helped me a lot, more Dan u can imagine.
    But stil avin this problem of page category, like creating a page name “sport” so it wil display all sport post nd nt a kind of contact page. I mean I page dat dat wil stand on it own just like d normal default home page. Pls Bros, I need this.

  28. Syntocode you are a hero, I love your writeup with very good explanation, what I like most is your follow up to comments, I want to say a big thank you bro, please put me through on how to display feature image on post in carrington theme, what I mean is that post should show feature image on the carrinton homepage for users to see the post image they are about to open.

  29. Please help me, I need to know how to increase the number of post on my Carrington mobile homepage, u said u gave the steps b4 but I can’t find it

    • To increase the number of posts on your homepage, Login to your dashboard, click on Settings>>Reading and change “Blog pages show at most” from 10 to the number of post u like.

      Sorry for my late response, missed your comment

  30. Static front page has to do ith being able to add article or information about my site on my homepage without it displaying on the other pages. Normaly you allowed to display only post on your theme but you can choose to display a static page in settings – Reading but carrington themes procedure is just too complicated.

  31. How can i create a static page on carrington themes

  32. Pls how do I make featured images to display besid post title on homepage.

  33. pls how can i implement my adsense on my pafe inside the post, or after the post…..am having issues displayin my adsense

    i was only able to add it to my header…thanks

  34. Please I have a pro. I installed the carrington theme but it shows even for the desktop, check http://www.bbcnigeria.Com.ng and see what am saying, how can I select a different theme for desktop views and let the carrington theme work for mobile.

    And again how can I change my carrington theme baground to m prefares image.

  35. Am facing a problem with carrignton now bro,how can I decrease the number of posts @ my homepage

  36. how do i make my blog display more than 10 posts at the homepage using carrigton theme ?

  37. Syntocode please help me…Please….

    hi syntocode..im thankful to you for your help since last year…but i just realised that commenting on my carrington theme is somewhat difficult. i have tried commenting by myself and it doesnt do anything…i have told like 3 people to help commment too but they all complained of the same problem..please help me! This carrington theme is too good to have a fault..pls help

  38. please how can I remove the email and web box in Carrington.

  39. Hello Syntocode. Thanks for the awesome tutorials!
    However, I’m kinda stucked at the stage of uploading the site logo. I cant seem to locate the code:

    This is what I could find instead:

    <a rel="home" href="”>

    Please Help.

  40. hi syntocode..im thankful to you for your help since last year…but i just realised that commenting on my carrington theme is somewhat difficult. i have tried commenting by myself and it doesnt do anything…i have told like 3 people to help commment too but they all complained of the same problem..please help me! This carrington theme is too good to have a fault..pls help

  41. thanks dude. helped me with my startup processes in wordpress. Here is my website http://hadespalace.tk

  42. hello Boss… How do i remove the pages bar the appears after posts on the front page of carrington,

  43. Plz bro how can i change d css folder

  44. Please help me bro; how do I place my ads code inside carrington?

  45. I tried changing my default homepage to 20 but it seems not to work, need help http://www.naijasoft.com

  46. how do i place music and video for download. and how to i make menu like this
    music |video| updates| download’s| sports

  47. Hello Syntocode, please i currently activated the WPMS mobile plugin to run carrington theme on my blog, but if i open my blog with a smartphone.. The post list at the homepage is centralized and there are some arrows displayed beside it. How do i get rid of these arrows? And how do i make my blog display more than 10 posts at the homepage?.

    Love to hear from you soon. Thanks!

  48. Please, How do i Customise the comment form on carrington theme: I want to edit it such that it will not require email and i can alternatively reply to a particular person’s comment.

  49. How can i show Related posts under each post in my carrighton mobile, and how can i remove Url and Email in my comment box in carrighton mobile? Kindly help me on this

  50. bro. please how do I remove the recent posts & pages tab that appears after each post immediately after the search button

    • to remove that, goto footer-default.php, look for the following codes and delete them.

      <div class="tabbed">
      <div id="recent_tab">
      <hr />
      <h2 class="table-title" id="recent"><?php _e(‘Recent Posts’); ?></h2>
      <ul class="disclosure table group">
      <?php wp_get_archives(‘type=postbypost&limit=10’); ?>
      </ul>
      </div>
      <div id="pages_tab">
      <hr />
      <h2 class="table-title" id="pages"><?php _e(‘Pages’); ?></h2>
      <ul class="disclosure table group">
      <?php echo $sub_pages; wp_list_pages(‘title_li=&depth=1’); ?>
      </ul>
      </div>
      </div>

  51. i really love your work men. you really tried

  52. Can I do all this to a wordpress blog without a custom domain? Like www.****.wordpress.com

  53. Pls sir, would love to know how to increase the numbers of post on my blog.. Carrington default is 10… Thanks so much

  54. Syntocode, thanks a lot for this comprehensive documentation.
    I haven’t implemented any of your tutorial because i read for knowledge purpose. I will modify some of this things u mentioned on my site and give you feedback.

  55. tanx bro…am done with eve ritin…but plss can u help me in adding images to a post and also adding music and videos to a site

    • hello,

      to add images/videos to your post, While in the post editor click on “Add media” and you’ll see a window to upload a new image or add an existing one on your site.

      hope this helps.

  56. Help Me pls….. Copied the code for share buttons above……… But there is one thing i noticed, it only display this share buttons on opera n phone browser… But on ucweb its not visible

    I checked the site of one of the people u helped http://www.a2newmix.com he got His correctly and i can see his own share buttons via ucweb!! Help pls

  57. hehehehe… syntocode, am back again ooo… dont call me oliver twist sha.. 🙂 but how can i enable the share buttons to show counts??

  58. Oh My BOSS..it worked!! Thanks alot…i hope to do more….Thanks again!!!!

  59. Thanks Boss.. you have been of tremendous help.. i will get back to you with results.
    I have also worked on my footer too. it looks nice small sha.. Thanks!!!!!!

  60. Dear sir.. i have been implementing. And i have gone so far.. i didnt have any issues with the share buttons. i have done the categories too.
    The Home menu refuse to come up.. it keeps saying ‘we are not sure what you are looking for’
    anyway, this was the code i used for home “Home |”
    and this is my website… http://www.a2newmix.com for your reference. thank you..

  61. hmmmmm….brother, i just realized that the path way to download the theme from you is not correctly set.. pls look at it…

  62. i really like your work.. i have been looking for a site like yours. im not a code person but i was able to use my brain a little. now am stuck, the logo is set but its so big and i wouldnt want a mere logo to scare away my readers. 🙁 . Secondly, i keep seeing a see more stuff below the imagine which looks like your material and finally, i lost it with the category. Thanks. i anticipate your response.

    • Glad you like it…To reduce the size of your logo you need to specify the height and width when using img src tag. Your code should look like this <img src=“http://yourLogoUrl.com“ height=“84“ width=“340“ /> You can change the numbers to your desired dimension, That will work the magic.

      Didn’t get your 2nd question clearly, could you rephrase your question pls?

      Thanks

      • What am saying is, I didn’t know how to work with the categorie coding.

        And, when I successfully inserted the code for sharing, it keeps showing something like: -‘see more at syntocode.com’. Now I wanna knw how I can remove it.

      • What am saying is, I didn’t know how to work with the categorie coding.
        And, when I successfully inserted the code for sharing, it keeps showing something like: -‘see more at syntocode.com’. Now I wanna knw how I can remove it.

        • Oh! I see. For the category coding, your url should look like this http://yoursite.com/category/category-slug (depending on your permalink structure) e.g http://syntocode.com/category/mobile is for this site mobile category.

          As regards “see more at syntocode.com”, this happens when you copy any text from this site, all you need to do to get rid of it is to delete the see more link and text that has been appended to whatever you copy. Your code will work fine..

          Let me know if there is anything else I can help with.

          • Ok boss.. I will implement this… Two more questions please…
            1. If I wanna replace the logo with text instead, what’s the step?
            2. I only need share buttons like Facebook and twitter. How do I remove others to suit my taste?

            • Hello,
              To replace logo with text, just replace the logo codes with your desired text.

              For Share buttons: goto the share button code, highlight from < / span> to and delete! That’s it

  63. You really try bro….nice one

Leave a Reply

Your email address will not be published. Required fields are marked *