CustomThesis

Customizing Thesis eBook

Satish Talim
http://satishtalim.com/
Revised Edition – 4th Oct. 2008
First Edition – 1st Sept. 2008

@ 2008 by Satish Talim – http://satishtalim.com/

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


2

About the Author
Satish Talim (http://satishtalim.com/) 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 (http://www.infonox.com/default.shtml - based in San
Jose, CA), Maybole Technologies Pvt. Ltd. (http://servient.com/ -
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 (http://tech.groups.yahoo.com/group/pune-
java/) and PuneRuby
(http://tech.groups.yahoo.com/group/puneruby/)

• Is a Ruby Mentor
(http://rubymentor.rubyforge.org/wiki/wiki.pl?AvailablePureRubyMent
ors) on rubyforge.org, 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.


3

Acknowledgements
First, I’d like to thank Chris Pearson for the wonderful Thesis WordPress
theme:
http://diythemes.com/thesis/?a_aid=21f1396d&a_bid=47c5a620

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 –
http://diythemes.com/forums/thesis-theme/
namely - Rick Beckman and kristarella. Their timely help is most appreciated.
.


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
http://rubylearning.com/blog/

A. Reference:
http://diythemes.com/thesis/rtfm/first-installation/

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
http://rubylearning.com/blog/wp-admin 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:
http://diythemes.com/thesis/rtfm/title-tag/
http://diythemes.com/thesis/rtfm/your-navigation-menu/

I changed the settings as shown in the images below:


5


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


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:
http://diythemes.com/thesis/rtfm/fonts-and-sizes/

Under Fonts and Font Sizes, select Body font as Verdana. Next, Click on the
Big Ass Save Button.

D. Plugins
Reference:
http://diythemes.com/thesis/rtfm/thesis-wordpress-plugins/

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 -
http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-
sitemaps-generator/
File is google-sitemap-generator.3.1.0.1.zip
Also read –
http://www.pearsonified.com/2006/12/when_was_the_last_time_you_talked_
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


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:
http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss
http://www.pearsonified.com/2007/02/how_to_protect_css_mods_for_any_wo
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 -


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

.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 –
http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php

.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)
.custom .widget { border: 1px solid #dddddd; }

5. Style one widget giving it a solid border and background color
.custom .widget_Popular { border: 1px solid #dddddd;
background-color: #E3F0F2; }

6. Changing abbr and acronym


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)
.custom .top { background: #FFFFF8; border: none
!important; }

8. For the Footnotes plugin
http://flagrantdisregard.com/footnotes-plugin/

.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 –
http://diythemes.com/forums/thesis-customization-tips/839-
superscript.html#post4640

9. Change Drop Cap color
.custom .format_text .drop_cap { color: #cc0000; float:
left; }

10. Changing Header and Tagline color
.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)


11

.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="http://twitter.com/IndianGuru"
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 -


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="http://rubylearning.com/images/sponsors.png"
alt="Sponsors" /></div><br />

<div class="adblock cenx">

<a
href='http://diythemes.com/thesis/?a_aid=21f1396d&a_bid
=47c5a620'><img
src='http://diythemes.com/aff/scripts/sb.php?a_aid=21f1396d
&a_bid=47c5a620' style="border: 0px none ;" alt="Thesis
WordPress Theme" title="Thesis WordPress Theme" /></a>

<a title="Free Online Ruby Programming Course"
href="http://rubylearning.org/"><img
src="http://rubylearning.com/images/rlbanner.jpg"
style="border: 0px none ;" alt="RubyLearning" title="Free
Online Ruby Programming Course" /></a>

<img src="http://rubylearning.com/images/advertise.png"
style="border: 0px none ;" alt="Advertise your Banner -
Contact mail@satishtalim.com" title="Advertise your Banner
- Contact mail@satishtalim.com" />

</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="http://rubylearning.com/images/favicon.ico" />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


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 rubylearning.com/images
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="http://peepcode.com/"><img
src="http://rubylearning.com/images/header.jpg"
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
/* To add my own footer */
function rl_footer() {
echo "<p><small>Copyright © 2006-2008 RubyLearning
Blog | Built with <a href="http://diythemes.com/thesis/"
title="Thesis Theme from DIYThemes">Thesis Theme</a> |
Valid: <a
href="http://validator.w3.org/check/referer">XHTML</a> |
<a href="http://rubylearning.com/blog/sitemap.xml"
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:
http://diythemes.com/thesis/release-notes-version-10/

/* 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');


14

Changing Core Files
1. Date Badges and Comments Bubbles – Not in use
Reference:
http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/

Edit custom.css file and add the following:
.custom p.date { width: 42px; height: 10px; padding: 18px 0 14px
0; text-align: center; }
.custom .month1 { background: url(images/01.gif) no-repeat 0 0; }
.custom p.date 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 –
http://sotak.co.uk/calendar-icons-blog
http://yoast.com/wp-content/themes/yoast/images/bubble2.png

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 –


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


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="http://rubylearning.com/images/popular.gif"
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; }


17

6. Custom Page Descriptions, Without Plugins – Not in Use
Reference:
http://rickbeckman.org/wordpress-seo-tip-custom-page-descriptions-without-
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.


18

Sprucing up Blog Posts
Reference:
http://diythemes.com/thesis/rtfm/styling-tips/

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:
http://diythemes.com/thesis/rtfm/image-styles/

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="http://diythemes.com/images/giraffe.jpg"
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:
http://www.pearsonified.com/2007/11/professional_stylish_comments_for_blo
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>


19

7. Acronym
<acronym title="[ American Standard Code for Information Interchange
]">ASCII</acronym>


20

Change some WordPress features
Reference:
http://maketecheasier.com/4-hidden-wordpress-features-that-are-unknown-
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’, ”);


21

Securing the blog
Reference:
http://maketecheasier.com/11-ways-to-secure-your-wordpress-
blog/2008/08/12

1. Hide the plugins and themes folder on server
If you go to http://rubylearning.com/blog/wp-content/plugins, 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: http://rubylearning.com/blog/");
exit();
?>

The same needs to be done for http://rubylearning.com/blog/wp-
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


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.


23

Removing Validation Errors
The Thesis 1.2 does not validate as per this url –
http://validator.w3.org/

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:
http://diythemes.com/forums/thesis-feature-requests/691-thesis-not-xhtml-
valid-2.html#post4317



Hopefully, this would be fixed in the next release of Thesis.


CustomThesis

More Related Content

What's hot

Similar to CustomThesis

More from tutorialsruby

Recently uploaded

CustomThesis