Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Customizing Thesis eBook Satish Talim Revised Edition – 4th Oct. 2008 First Edition – 1st Sept. 2008 @ 2008 by Satish Talim –
  2. 2. 1 Table of Contents About the Author .................................................................................. 2 Acknowledgements.............................................................................. 3 Initial Settings ....................................................................................... 4 Customization ........................................................................................ 8 Changing Core Files........................................................................... 14 Sprucing up Blog Posts .................................................................... 18 Change some WordPress features............................................... 20 Securing the blog ............................................................................... 21 Removing Validation Errors............................................................ 23 @ 2008 by Satish Talim –
  3. 3. 2 About the Author Satish Talim ( is a senior software consultant based in Pune, India with over 30+ years of I.T. experience. His experience lies in developing and executing business for high technology and manufacturing industry customers. Personally his strengths lie in Business Development and Business Networking apart from new product and solution ideas. Good experience of organization development. Excellent cross disciplinary background in engineering, computer science and management. He - • Has helped start subsidiaries for many US based software companies like Infonox ( - based in San Jose, CA), Maybole Technologies Pvt. Ltd. ( - Servient Inc. based in Houston, Texas) in Pune, India. • Has been associated with Java / J2EE since 1995 and involved with Ruby and Ruby on Rails since 2005. • also started and manages two very active Java and Ruby User Groups in Pune, India - PuneJava ( java/) and PuneRuby ( • Is a Ruby Mentor ( ors) on, helping people with Ruby programming. He lives in Pune, India, with his wife, son and his Labrador Benzy. In his limited spare time he enjoys traveling and playing online chess. @ 2008 by Satish Talim –
  4. 4. 3 Acknowledgements First, I’d like to thank Chris Pearson for the wonderful Thesis WordPress theme: It is worth the US$87, I paid for the personal license. Also, I’d like to thank the wonderful people on the DIYThemes Forum here – namely - Rick Beckman and kristarella. Their timely help is most appreciated. . @ 2008 by Satish Talim –
  5. 5. 4 Initial Settings This eBook documents the changes / modifications I have done to WordPress 2.6.2 settings and the Thesis theme 1.2 for my blog at A. Reference: Download the Thesis zip file (I have a Windows XP box) to the PC. Using ftp, upload the thesis folder on the PC to the blog/wp-content/themes folder on the server. In the Firefox (my preference) browser, type the url and login in. From the admin panel, change the theme to Thesis, by clicking on Change Theme. Next, in the admin section, click on Design (visit both the Thesis Options panel and the new Design Options panel. This sets up the default variables that are necessary for the theme to render properly.) B. Thesis Options panel Reference: I changed the settings as shown in the images below: @ 2008 by Satish Talim –
  6. 6. 5 @ 2008 by Satish Talim –
  7. 7. 6 Briefly, as can be seen in the two images above, in the Thesis Options / Under Publishing ensure that first 4 options are selected. Also ensure that Use Custom Stylesheet is selected. Also, for Navigation Menu select pages - Archives, Advertise, About, Privacy Policy (I had already created these pages before).To start with, for the Multimedia Box select Do not show box (later on we will modify this to have 125x125 ads or maybe my own photo, as can be seen in the image). For Title tag <title>, select all four options. For Tagging, select Use Tags and do not link tags to archive pages. Under Stats Software and Scripts add your Google Analytics code under Google Analytics tracking code. Under Syndication/Feed, select Show feed link in header. Click on the Big Ass Save Button. Note: The easiest way to include a bit of JavaScript in your footer is: put it in the Google Analytics box in the Thesis Options. You can include in that box anything you want to load in the footer. I therefore put my HitTail code here. Also, if you have already previously installed the Google Analytics (GA) code this way, then when you go to the Design / Thesis Options / Google Analytics text box, you will see your GA code there. Just add to this same code, your @ 2008 by Satish Talim –
  8. 8. 7 HitTail or any bit of JavaScript code you want to add. The Mint option can be used if you want to add say meta tags to header. C. Design Options panel Reference: Under Fonts and Font Sizes, select Body font as Verdana. Next, Click on the Big Ass Save Button. D. Plugins Reference: The plugins I have installed and activated are: 1. Do not use a HTML Sitemap, but use an XML one (generates a XML-Sitemap compliant sitemap of your WordPress blog) from this plugin - sitemaps-generator/ File is Also read – to_google.php 2. Comment Relish 3. Akismet 4. Add Sig 5. TLA Inlinks 6. WP-SlimStat 7. WP-DB-Backup 8. Hit_Tail Code 9. Wordpress Automatic upgrade 10. Simple Tags 11. Subscribe to Comments 12. SEO All In One 13. FD Footnotes 14, Related Posts 15. ShareThis @ 2008 by Satish Talim –
  9. 9. 8 Customization We shall talk about the various customizations done for my blog, using the files /themes/thesis/custom/custom.css and /themes/thesis/custom/custom_functions.php. Reference: rdpress_theme.php NOTE 1: In CSS, classes are referenced with the . operator, and ids are referenced with the # operator. Therefore, if you had the following HTML: <div id="content"> <div class="content_inner"> You would reference the content div with this CSS in your custom.css file: .custom #content { ... } And you would reference the content_inner div like so: .custom .content_inner { ... } Finally, the body tag is the only HTML element that contains the custom class: <body class="custom"> Because of this, the body tag is the only element that must be referenced with a different syntax (body.custom) in your custom.css file. All other elements should be referenced using the syntax described above. NOTE 2: The styles you define with the .custom prefix will override those defined in the theme’s original stylesheet. 1. Create a new Update block Edit /themes/thesis/custom/custom.css and add - @ 2008 by Satish Talim –
  10. 10. 9 .custom .update { border: 3px solid #f2ec49; background: #fffdcb; padding: 1.0em 15px; margin: 0 0 1.46667em 0; clear: both; } and usage is - <p class="update"> 2. To add a line above and below the sidebar category text Edit /themes/thesis/custom/custom.css and add - .custom .sidebar h3 { font-size: 0.846em; font-weight: bold; line-height: 1.455em; margin-bottom: 1em; padding: 0.636em 0.455em 0.545em 0.455em; text-transform: uppercase; font-variant: normal; letter-spacing: 2px; color: #111; border-top: 1px solid #ddd; border-bottom: 1px dotted #ddd; } 3. To change the blockquote as pullquote Also read – Edit /themes/thesis/custom/custom.css and add - .custom blockquote.left { width: 200px; margin: 5px 15px 5px 0; font-size: 1.4em; text-align: center; border: 3px double #aaa; border-width: 3px 0 !important; padding: 0 !important; float: left; } .custom blockquote.right { width: 200px; margin: 5px 0 5px 15px; font-size: 1.4em; text-align: center; border: 3px double #aaa; border-width: 3px 0 !important; padding: 0 !important; float: right; } 4. Style all widgets collectively, giving them a solid border (Not in use) Edit /themes/thesis/custom/custom.css and add - .custom .widget { border: 1px solid #dddddd; } 5. Style one widget giving it a solid border and background color Edit /themes/thesis/custom/custom.css and add - .custom .widget_Popular { border: 1px solid #dddddd; background-color: #E3F0F2; } 6. Changing abbr and acronym Edit /themes/thesis/custom/custom.css and add - @ 2008 by Satish Talim –
  11. 11. 10 .custom abbr, acronym { line-height: 1em; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px dotted rgb(61,92,122); cursor: help; } 7. Changing background color of first post (Not in use on my blog) Edit /themes/thesis/custom/custom.css and add - .custom .top { background: #FFFFF8; border: none !important; } 8. For the Footnotes plugin Edit /themes/thesis/custom/custom.css and add - .custom .footnotes { font-size: 85%; line-height: 1.5em; padding: 10px 0 10px 0; } .custom .footnotes .footnotedivider { width: 120px; border- bottom: 1px solid #ccc; } .custom .footnotes li { margin: 0 0 5px 0; color: #777777 } .custom sup.footnote a { text-decoration: none; font-size: 80%; } .custom sup.footnote { line-height: 0em; } .custom .footnotereverse a { padding: 0 0 0 5px; text- decoration: none; } For an alternate solution, read – superscript.html#post4640 9. Change Drop Cap color Edit /themes/thesis/custom/custom.css and add - .custom .format_text .drop_cap { color: #cc0000; float: left; } 10. Changing Header and Tagline color Edit /themes/thesis/custom/custom.css and add - .custom #header #logo a { text-decoration: none; color: #CC3333 !important; } .custom #header #logo a:hover { color: #2361a1 !important; } .custom #header #tagline { font-weight: normal; font-size: 1.4em; line-height: 1.429em; color: #CC3333; } 11. To adjust the spacing for paragraphs on all pages (not in use) @ 2008 by Satish Talim –
  12. 12. 11 Edit /themes/thesis/custom/custom.css and add - .custom .format_text p { margin-bottom: .9em; } 12. Adding a Twitter block Edit /themes /thesis/custom/custom_functions.php for Custom functions. Add the following code - function custom_twitter_links() { ?> <ul class="bookmark_links"> <li><a href="" title="Follow me on Twitter to communicate and stay connected">Follow me on Twitter to communicate and stay connected.</a></li> </ul> <?php } add_action('thesis_hook_after_post', 'custom_twitter_links'); If we have done everything correctly, when we visit a post’s permalink page, we'll see that the post content is now followed by a clever little Twitter link. Now simply add the following declaration to the custom.css file, and we'll get instant, em-based goodness: .custom ul.bookmark_links { list-style: none; margin: 3.14286em 0 1.57143em 0; padding: 0.57143em 0.78571em; background: #e7f8fb; border: 0.07143em solid #9ad5df; } 13. To add 3 custom, static Ad Blocks of 125x125 Edit /themes/thesis/custom/custom.css and add this code - /* For the 125x125 Ad boxes - adblock and cenx */ .custom div.adblock img { padding: 4px; background-color: #FFFFFF; } .custom .cenx {text-align: center;} Next, in Design / Thesis Options / Multimedia Box - choose default setting as Custom Code and add the following into the Custom multimedia box code - @ 2008 by Satish Talim –
  13. 13. 12 <div style="text-align:center;margin:0 auto 0 auto;padding- top:0.25em;border-bottom:1px dotted #bebebe; border-top:1px dotted #bebebe; "><img src="" alt="Sponsors" /></div><br /> <div class="adblock cenx"> <a href=';a_bid =47c5a620'><img src=' &amp;a_bid=47c5a620' style="border: 0px none ;" alt="Thesis WordPress Theme" title="Thesis WordPress Theme" /></a> <a title="Free Online Ruby Programming Course" href=""><img src="" style="border: 0px none ;" alt="RubyLearning" title="Free Online Ruby Programming Course" /></a> <img src="" style="border: 0px none ;" alt="Advertise your Banner - Contact" title="Advertise your Banner - Contact" /> </div> Click on the Big Ass Save Button. 14. To add a Favicon Add the following to your /themes/thesis/custom/custom_functions.php file – /* To add RubyLearnings favicon */ function thesis_favicon() { echo "n<link rel="icon" type="image/ico" href="" />n"; } add_action('wp_head', 'thesis_favicon', 99); The priority of 99 above, ensures that this tage comes just before the </head> tag. 15. Adding an image below the header of the blog @ 2008 by Satish Talim –
  14. 14. 13 I changed my sponsor’s (PeepCode) image (header.jpg) to a maximum of 960 pixels wide. The image can be as tall as we want it to be -- just don't go overboard. I am using 139 pixels. Now, upload header.jpg (Peepcode banner) to folder and edit /themes/thesis/custom/custom_functions.php file to include - function sponsor_header() { echo "<a title="Support our sponsors, Support our site!" href=""><img src="" width="960" height="139" style="border: 0px none ;" alt="PeepCode" /></a>"; } add_action('thesis_hook_after_title', 'sponsor_header'); 16. To modify the footer of the blog Add the following to your /themes/thesis/custom/custom_functions.php file – /* To add my own footer */ function rl_footer() { echo "<p><small>Copyright &copy; 2006-2008 RubyLearning Blog | Built with <a href="" title="Thesis Theme from DIYThemes">Thesis Theme</a> | Valid: <a href="">XHTML</a> | <a href="" title="sitemap">Sitemap</a></small></p>"; } remove_action('thesis_hook_footer', 'thesis_attribution'); add_action('thesis_hook_footer', 'rl_footer'); 17. To get a Popular Posts block in right sidebar Reference: Add the following to your /themes/thesis/custom/custom_functions.php file – /* To add Recent Posts widget in sidebar 1 */ function rl_recent_posts() { if (!dynamic_sidebar(1)) { thesis_widget_recent_posts('Popular', 'Popular Posts', 8); } } add_action('thesis_hook_before_sidebar_1', 'rl_recent_posts'); @ 2008 by Satish Talim –
  15. 15. 14 Changing Core Files 1. Date Badges and Comments Bubbles – Not in use Reference: Edit custom.css file and add the following: .custom { width: 42px; height: 10px; padding: 18px 0 14px 0; text-align: center; } .custom .month1 { background: url(images/01.gif) no-repeat 0 0; } .custom .month2 { background: url(images/02.gif) no-repeat 0 0; } .custom .month3 { background: url(images/03.gif) no-repeat 0 0; } .custom .month4 { background: url(images/04.gif) no-repeat 0 0; } .custom .month5 { background: url(images/05.gif) no-repeat 0 0; } .custom .month6 { background: url(images/06.gif) no-repeat 0 0; } .custom .month7 { background: url(images/07.gif) no-repeat 0 0; } .custom .month8 { background: url(images/08.gif) no-repeat 0 0; } .custom .month9 { background: url(images/09.gif) no-repeat 0 0; } .custom .month10 { background: url(images/10.gif) no-repeat 0 0; } .custom .month11 { background: url(images/11.gif) no-repeat 0 0; } .custom .month12 { background: url(images/12.gif) no-repeat 0 0; } .custom span { display: none; } .custom .shield { position: relative; float: left; padding-right: 2em; } .custom .commentscloud { position: absolute; text-align: center; top: -4px; left: 22px; width: 30px; height: 24px; padding: 3px 0; background: url(images/bubble.png) no-repeat 0 0; } .custom .entry-content { clear: both; margin-top: 2em; } Download the images from – the file is calendar-icons.tar.gz and bubble2.png. Rename bubble2.png to bubble.png and upload the images to the thesis/custom/images folder. Edit index.php, search.php, single.php, and archive.php and search for <?php thesis_byline_and_date(); ?> Add the following code before that – @ 2008 by Satish Talim –
  16. 16. 15 <div class="shield"> <p class="date month<?php the_time('n'); ?>"> <span><?php the_time('F'); ?></span> <?php the_time('j'); ?> <span><?php the_time('S'); ?></span> </p> <div class="commentscloud"> <?php comments_number('0', '1', '%'); ?> </div> </div> Under admin / Design / Thesis Options / Publishing, deactivate the fourth option namely Show published-on date in post byline. 2. Description and keywords Meta tag for SEO – Not in Use These tags are important for SEO and can be achieved by editing each and every post and / or page of the blog. For example, edit an existing post and then scroll down to Custom Fields. In the Key field type metadescription and in the Value field type what you want to say for your description. I have typed - Ruby Rails Tutorial for Ruby and Ruby on Rails. Save this. Next, edit header.php file and after the <title> tag add the following code: <?php if (get_post_meta($post->ID, 'metadescription', true) != ''): ?> <meta name="description" content="<?=get_post_meta($post->ID, 'metadescription', true);?>" /> <?php endif; ?> It is advisable to add a custom description to every post and page, unique to the content of whatever that page or post is about. If you don't add it, don't worry; the code checks for the field's existence. If it isn't there on a certain post, nothing is output. We shall do the same for Key field type metakeywords and add the following to index.php <?php if (get_post_meta($post->ID, 'metakeywords', true) != ''): ?> <meta name="keywords" content="<?=get_post_meta($post- >ID, 'metakeywords', true);?>" /> <?php endif; ?> 3. Adding an image to a popular post – Not in use @ 2008 by Satish Talim –
  17. 17. 16 Edit index.php, search.php, single.php, and archive.php and search for <?php thesis_byline_and_date(); ?> Add the following code after that – <?php if (in_category(get_cat_id('popular'))) { ?><img class="popular-image" src="" alt="Popular Post" title="This post is Popular" /><?php } ?> 4. Moving down ‘Search’ in sidebar Edited file sidebar_2.php as follows: <?php if (!dynamic_sidebar(2)) { // This one is a little nicer looking than the WordPress Tag Cloud Widget. // If you want to use it, I suggest moving it outside of this if-statement. // This way, youll be able to use widgets in sidebar 2 AND have a nicer tag cloud. thesis_widget_tag_cloud(); // You should use the WordPress Search Widget for this! thesis_widget_search_deprecated(); } ?> 5. Modifying Related Posts plugin file for arrow images Edit related-posts.php file of this plugin and do the following line: Replace line 93 i.e. 'beforeposts' => '', 'afterposts' => '', // text before and after the list with this – 'beforeposts' => '<ul class="navlist">', 'afterposts' => '</ul>', // text before and after the list Edit custom.css and add the following lines: .custom .navlist { margin-left: 0; padding-left: 0; list- style: none; } .custom .navlist li { padding-left: 10px; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 0 .5em; } @ 2008 by Satish Talim –
  18. 18. 17 6. Custom Page Descriptions, Without Plugins – Not in Use Reference: plugins/ Edit /themes /thesis/custom/custom_functions.php for Custom functions. Add the following code - // Meta descriptions for posts w/ the Description custom field function descriptification() { // This is only relevant on pages or posts if (is_single() || is_page()) { // Well need the post ID, so make $post available global $post; // Check to see if a post has a custom field with key of "description" if (get_post_meta($post->ID, 'description', true)) { // We have a description, so output in the form of an HTML META tag echo '<meta name="description" content="' . attribute_escape(get_post_meta($post->ID, 'description', true)) . "" />n"; } } } // Set descriptification() to run when wp_head() is called, generally in a theme's header.php file add_action('wp_head', 'descriptification'); When editing a post or page, scroll down a way until you get to the Custom Fields section. Add a new one with key “description” and value as whatever best describes this particular page or post. Keep your description concise (roughly 150 characters (not words!), including spaces.) — remember, it’ll show up in search results, and you don’t want it getting trimmed because it’s too long — but be sure you’re emphasizing the subject matter. @ 2008 by Satish Talim –
  19. 19. 18 Sprucing up Blog Posts Reference: 1. Sub-headlines <h3>My Headline Text</h3> 2. Drop Cap <span class="drop_cap">T</span>his is my paragraph. The "T" is my drop cap. 3. Notes and Alerts <p class="note">Your note text goes here!</p> <p class="alert">Your alert text goes here!</p> 4. Align images / ads Reference: When you use the alignright and alignleft classes, you should try to keep your images 229px wide or less. By default, Thesis’ content column is 480px wide, so you’ll be able to accommodate ad units / images up to that width. Example: <p><img class="alignright" src="" alt="giraffe" title="Choosing right results in a right-aligned image with text wrap" width="229" height="220" /></p> <p>Text here</p> 5. Reply to comments Reference: gs.php WordPress contains comment ID numbers, which allow you to link directly to any comment you like. When you respond to people’s questions, you should use this ID to link the commenter’s name to their original question. For example: <a class="comment_link" href="comment permalink">Commenter</a> - Your comment... 6. Abbreviation <abbr title="USA Dollar">USD</abbr> @ 2008 by Satish Talim –
  20. 20. 19 7. Acronym <acronym title="[ American Standard Code for Information Interchange ]">ASCII</acronym> @ 2008 by Satish Talim –
  21. 21. 20 Change some WordPress features Reference: to-many/2008/08/13 1. Turn off post revision One of the new features in WordPress 2.6 is the post revision. This is a great feature that does a version control for all your posts. At any point of time, you can see what was changed in the post, by whom and when and revert back to the previous post if necessary. For a multi-authors blog, this is a splendid feature, but for single user, this could possibly lead to many duplicate of the same post that junk up your database. By default, the post revisioning feature is turned ON by default and there is no option to turn it off in the Admin menu. To disable it, you have to download your wp-config.php file from the server (using any FTP program), add the following line: define(’WP_POST_REVISIONS’, false); after the line define (’WPLANG’, ”); @ 2008 by Satish Talim –
  22. 22. 21 Securing the blog Reference: blog/2008/08/12 1. Hide the plugins and themes folder on server If you go to, you normally would see a list of plugins that I am using for my blog. You can easily hide this page by uploading an empty index.php to the plugin directory. Using a ftp program, upload the following index.php to the /wp- content/plugins folder: <?php header("Location:"); exit(); ?> The same needs to be done for content/themes/ 2. Use a strong password Make sure you use a strong password that is difficult for others to guess. Use a combination of digits, special characters and upper/lower case to form your password. 3. Change your login name The default username is admin. You can make it more difficult for the hacker to crack your login credential by changing the login name. In your WordPress dashboard, go to Users and set up a new user account. Give this new user administrator role. Log out and log in again with the new user account. Go to Users again. This time, check the box beside admin and press Delete. When it asks for deletion confirmation, select the “Attribute all posts and links to:” and select your new username from the dropdown bar. This will transfer all the posts to your new user account. Press Confirm Deletion. 4. Upgrade to the latest version of WordPress and plugins @ 2008 by Satish Talim –
  23. 23. 22 The obvious - the latest version of WordPress always contains bugs fixes for any security vulnerabilities, therefore it is important to keep yourself updated at all times. 5. Backup your WordPress database No matter how secure your site is, you still want to prepare for the worst. Install the WP-DB-Backup plugin and schedule it to backup your database daily. @ 2008 by Satish Talim –
  24. 24. 23 Removing Validation Errors The Thesis 1.2 does not validate as per this url – Some of the core Thesis files needs to be edited to fix this problem. The following two forum threads give a step-by-step description on how to achieve the same: valid-2.html#post4317 valid-4.html#post4638 valid-4.html#post5196 Hopefully, this would be fixed in the next release of Thesis. @ 2008 by Satish Talim –