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

1. Add this code to your styles.css file:

.dropCap
{
float: left;
font-size: 5em;
line-height: 0.9em;
padding: 0 5px 0 0;
font-family: Georgia, "Times New Roman", Times, serif;
}

2. Put this in your post where you want the drop cap:

<span class="dropCap">T</span>

Prevent Iframe Deletion

This has not been tested for Genesis Child Themes.

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

In the “Comments/Tracks” section of the Theme Settings under “Genesis,” check the “Enable Comments on pages?” box.

Change Header Image

In the “Header” section under “Appearance,” upload your chosen image and change the color of your header text.

Change Blog Title and Tagline Color

Change the color as detailed in “Change Header Image” above.

Change Post Background Image

This has not been tested for Genesis Child Themes.

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

Using Custom Post Background plugin to change the whole page background of a post

Hide Navbar Categories

Stop selected categories from displaying on the Navbar by entering the category IDs (in my case they are 564 and 615) in the “Secondary Navigation” section “Exclude the following ID’s” box in the “Theme Settings”.

The Exclude Pages plugin is not necessary for Genesis Child Themes. I want to change my footer so that I can display a privacy link and remove and/or add other links and text. Add this text to the genesis_footer hook in the Genesis Hooks plugin:

<div class="gototop">
<p><a href="#wrap" rel="nofollow">Return to top of page</a></p>
</div>
<div class="creds">
<p>© <a href="http://www.rickety.us/copyright">CC License</a> · <a href="http://www.rickety.us/feedback">Contact Me</a> · <a href="http://www.rickety.us/privacy-policy">Privacy</a> & <a href="http://www.rickety.us/comments-policy">Comments</a> policies · <a href="http://validator.w3.org/check/referer">XHTML</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> · <a href="http://www.rickety.us/wp-admin">Admin</a> · <?php wp_loginout(); ?></p></div>

Check the “Unhook genesis_do_footer() function from this hook?” and “Execute PHP on this hook?” boxes.

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 entering the page IDs (in my case they are 3417, 7988, 743, and 391) in the “Primary Navigation” section “Exclude the following ID’s” box in the “Theme Settings”.

The Contact Me link simply connects to my feedback page where a comment can be left and an email address is available.

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.

WordPress Comments setting

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. 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.
Rickety signature.

Speak Your Mind

(required but alias OK)

(not required)