Technical
Since October 2009 I have used the Wordpress Lifestyle theme by StudioPress. The purpose of this page is to document the changes I have made to the theme and to Wordpress. These changes have worked for my configuration but I cannot guarantee it will for yours.
Add Drop Caps
Prevent Iframe Deletion
Add Comments to Pages
Change Header Image
Change Blog Title and Tagline Color
Change Post Background Image
Hide Navbar Categories
Change Footer and Exclude Pages
Add Widgeted Footer
Change NEWS FEED Name in Header
Change Comment Form
Add Facebook icon to top right nav bar
Replace Date With Own Text
Add Drop Caps
I read how to add drop caps on a blog, I don’t remember where.
1. To your theme’s header.php file, above the <title> tag, add:
<?php $customStyles = get_post_meta($post->ID, "customStyles", true);
if (!empty($customStyles)) { ?>
<link rel="stylesheet" href="<?php echo $customStyles; ?>" type="text/css" media="screen" />
2. Create customstyles.css in your theme directory and add:
.dropCap
{
float: left;
font-size: 5em;
line-height: 0.9em;
padding: 0 5px 0 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
3. Put this in your post:
<span class="dropCap">T</span>
4. Create a customStyles field and add:
http://www.wonderblog.com/wp-content/themes/lifestyle_40/customstyle.css
Prevent Iframe Deletion
If a section of iframe code is placed in the Wordpress HTML editor, when the code is viewed in the Visual editor, it will be deleted. To prevent this, place in your theme’s functions.php file:
add_filter('tiny_mce_before_init', create_function( '$a',
'$a["extended_valid_elements"] = "iframe[id|class|title|style|align|frameborder|height|longdesc|
marginheight|marginwidth|name|scrolling|src|width]"; return $a;') );
After
longdesc|
I entered a carriage return to fit the line on my page. You should remove this carriage return.
Add Comments to Pages
Add the code in bold to page.php:
<p><?php _e('Sorry, no posts matched your criteria.', 'studiopress');?></p><?php endif; ?>
</div>
<div class="comments">
<?php comments_template('',true); ?>
</div>
</div>
<?php include(TEMPLATEPATH."/sidebar.php");?>
For a for full width page add the same code to page_fullwidth.php.
Change Header Image
In www.wonderblog.com/wp-content/themes/lifestyle_40/images rename header.png to header_master.png. Size your own image to 960×100 and name it header.png.
Change Blog Title and Tagline Color
In style.css change the color from #FFFFFF (white) to #000000 (black). Also change the hover to black.
#header h1 a, #header h1 a:visited, #header h4 a, #header h4 a:visited {
color: #000000;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0px;
padding: 0px;
text-decoration: none;
}#header h1 a:hover {
color: #000000;
text-decoration: none;
}#header h3 {
color: #7A3254;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0px;
padding: 0px;
}#header p {
color: #000000;
padding: 0px 0px 5px 20px;
margin: 0px;
line-height: 20px;
}
Change Post Background Image
To make a background like this install the Custom Post Background plugin for Wordpress. Change the whole page background of a post using an uploaded image. Enter the path to the image in the field called “Image From Url. Make sure you have the “Display as a page background on post page” selected.
Using Custom Post Background plugin to change the whole page background of a post
Hide Navbar Categories
I want to use a category called “Latest” to display posts with the Featured Content Gallery but I do not want it to display in the Navbar. In header.php add the bolded code:
<?php wp_list_categories(‘exclude=564&orderby=name&title_li=&depth=4′); ?>
Where I am using the category id 564 replace with your category id. This is found by editing your category and looking at the URL in your browser. Mine looks like this:
http://www.rickety.us/wp-admin/categories.php?action=edit&cat_ID=564
Change Footer and Exclude Pages
I want to change my footer so that I can display a privacy link and remove and/or add other links and text. The code of interest is in my footer.php file:
<p><?php _e("Copyright", 'studiopress'); ?> © <?php echo date('Y'); ?> · <?php _e("All Rights Reserved", 'studiopress'); ?> · <a href="http://www.studiopress.com/themes/lifestyle">Lifestyle theme</a> <?php _e("by", 'studiopress'); ?> <a href="http://www.studiopress.com">StudioPress</a> · <?php _e("Powered by", 'studiopress'); ?> <a href="http://www.wordpress.org/">WordPress</a> · <?php wp_loginout(); ?><p>
First I delete what I don’t want, namely the links for the Lifestyle theme, StudioPress, and WordPress. Also the “All Rights Reserved” and “Copyright” text. That leaves me with:
<p> © <?php echo date('Y'); ?> · <?php wp_loginout(); ?><p>
Now I add my privacy policy link and middle dot (marked in bold):
<p> © <?php echo date('Y'); ?> · <a href="http://www.rickety.us/privacy-policy">Privacy</a> · <?php wp_loginout(); ?><p>
I used the Easy Privacy Policy plugin to create the privacy policy. Generate your policy page and save the html code. Delete the plugin and empty the trash (yes the plugin deletes your policy page). Paste your html in a new page. Stop your policy page, and other pages, from displaying on the Navbar by using the Exclude Pages from Navigation plugin.
I added XHTML and CSS validator links with this code:
<a href="http://validator.w3.org/check/referer">XHTML</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> ·
The Contact Me link simply connects to my feedback page where a comment can be left and an email address is available:
<a href="http://www.rickety.us/site-info/feedback">Contact Me</a> ·
Add Widgeted Footer
I used this StudioPress blog post How to Add a Widgeted Footer Area to Your StudioPress Theme to construct my footer. To change the color to green I added the bolded code to the new code that I just added to styles.css.
#footer-widgeted {
background: #99FF99;
width: 960px;
margin: 0px auto 0px;
padding: 0px;
}
Change NEWS FEED Name in Header
Open header.php and change “News” to “RSS”:
<a class="rsslink" rel="nofollow" href="<?php bloginfo('rss_url'); ?>"><?php _e("RSS Feed", 'studiopress'); ?>
Change Comment Form
I want to change the comment form to make it clear that you can leave a comment without having to give an email address or a website url. Start with this partial line in comments.php:
<label for="email"><small><?php _e("Mail (will not be published)", 'studiopress'); ?>
Change to:
<label for="email"><small><?php _e("Email (optional, will not be published)", 'studiopress'); ?>
Two lines down is this partial line:
<label for="url"><small><?php _e("Website", 'studiopress'); ?>
Change it to:
<label for="url"><small><?php _e("Website (optional)", 'studiopress'); ?>
Don’t forget to de-select Comment author must fill out name and e-mail and Users must be registered and logged in to comment in the Discussion Settings.
Add Facebook icon to top right nav bar
I added a Facebook icon to the top right nav bar by adding the following bolded code to header.php:
<div class=”topnavbarright”>
<a href=”http://www.facebook.com/rickety” class=”"><img style=”vertical-align:top” src=”http://www.rickety.us/wp-content/uploads/FaceBook_icon.png” title=”Rickety Facebook” alt=”Rickety Facebook” /></a>
I got the Facebook icon from iconspedia and resized the 32×32 icon to 20×20. The icon file was placed in the http://www.rickety.us/wp-content/uploads directory. For a Twitter icon follow the same procedure. Ditto for your own newspaper site, here is what mine looks like: Rickety News. Make sure the icons are at least read only for world access. If you copy and paste my sample code make sure you still have straight (ambidextrous) quotes and not the curved quotes.
Replace Date With Own Text
Find the following in header.php:
<p><?php echo date(“l, F j, Y”); ?></p>
Replace with:
<p>Now mobile phone friendly</p>
If you actually want to make your blog mobile phone friendly just load and activate the MobilePress plugin.
Loading ...
