QUEEN OF KLUDGE

This is the original nav_menu.php code:

<li><a <?php if (is_home()) echo(’class=”current” ‘); ?>href=”<?php bloginfo(’url’); ?>”>home</a></li>
<li><a <?php if (is_page(’archives’)) echo(’class=”current” ‘); ?>href=”<?php bloginfo(’url’); ?>/archives/”>archives</a></li>
<li><a <?php if (is_page(’about’)) echo(’class=”current” ‘); ?>href=”<?php bloginfo(’url’); ?>/about/”>about</a></li>

First, I changed it to this:

<li><a <?php if (is_home()) echo(’class=”current” ‘); ?>href=”<?php bloginfo(’url’); ?>”>Home</a></li><?php wp_list_pages(’sort_column=id&depth=1&title_li=’); ?>

Then I decided to manually code in the links, so I could pick and choose which pages I wanted, and the order in which I wished them to appear.

<li><a <?php if (is_home()) echo(’class=”current” ‘); ?>href=”<?php bloginfo(’url’); ?>”>Home</a></li>
<li><a href=”http://www.goldenbrewski.com/about/”>About</a></li>
<li><a href=”http://www.goldenbrewski.com/buying-a-home/”>Buying a Home</a></li>
<li><a href=”http://www.goldenbrewski.com/selling-a-home-2/”>Selling a Home</a></li>
<li><a href=”http://www.goldenbrewski.com/contact-us/”>Contact Us</a></li>
<li><a href=”http://www.goldenbrewski.com/the-blog/”>BLOG</a></li>

To open on a static page

Click “Settings” at the upper right corner of the Dashboard

Click “Reading”

At “Front page displays” check “A static page” and choose a page from the drop down list.

If you have not already done so, click “Write”, “Write Page” and create a new page titled “Blog”.  Just type in the title.  Do not write anything in the page text box.  Save and publish it.

Now go back to “Settings”, “Reading”, “Front page displays” at the drop down menu for “Posts page” select the new page titled “Blog” that you just created.

Bingo.  Now all your posts display on the “Blog” page, and a static page of your choice, opens as the main front page.

Simple insertion of header image:

<div id=”header”>

<img src=”http://www.bobtaylorproperties.org/wordpress/wp-content/uploads/2008/11/policy002.jpg“>
<p><br></p>

<div id=”logo”>
<?php if (is_home()) { ?>
<?php } else { ?> 
<p id=”tagline”><?php bloginfo(’description’); ?></p>
<?php } ?>
</div>
</div>

Remove this line:  <h1><?php bloginfo(’description’); ?></h1>

It looked to me that left edge of the nav bar was a couple pixels out of alignment with the left edge of the logo, and I couldn’t seem to get them absolutely spot on.

So, I elminated the problem entirely by floating the nav bar to the right

The original Copyblogger logo font size was 5.0em.

I changed it to 4.0em, then 3.5em, then 3.0em, then back to 5.0em, then finally back to 3.0em.  For the particular blog I think it will stay 3.0em for now.

Also seriously thinking about deleting the “American Typewriter” font, although I ~know~ that’s the “copywriter” idea…

This morning I downloaded and installed the Copyblogger theme on one of our blogs.

As usual, the first order of business for me is Make the Columns Wider.

In the stylesheet I changed  #content_box from 72.8em to 97.8em

I changed #content from 46.8em to 61.8 em

I changed #sidebar from 20em to 25em

I changed #nav from 72.8em to 102.8em

Have you ever worked on a custom banner for a WordPress blog, and no matter how you tweak the padding and margin settings in the stylesheet, it just won’t position properly?  Or it positions properly in Internet Explorer, but not in Firefox, or vice-versa.

Here’s helpful trick:  Add the padding with a transparent image.  And Better yet:  Just make that transparency part of the banner image.

Here’s how, in Photoshop:

Open your original banner image.  To view the image size, click Image -> Image Size, and make note of the Width and Height Pixel Dimensions.  After you note the dimensions, click cancel.

Next, create a new, blank image with a transparent background:  File -> New   Making sure to check the selection box for Transparent.  Change the Width and Height dimensions to numbers slightly larger than those of your original banner image.

Click back in the original image, to make it the active window.  Click Select -> All

Click the Move Tool

Drag the original image into the new blank file.  Position it so the amount of padding you want shows around all the sides of the image.

Save for Web in .PNG format to preserve the transparency.  Upload to the blog.

Presto!  Instant padding!  Works in all browsers. 

Several months ago, Greg described this process in Project Bloodhound speaking in tongues: To whom am I speaking?

At the time, I had no need to implement author images in a WordPress multi-author blog, (and I already knew the technique for TypePad), so I didn’t work with the process until just today.

As I set up what will become a company blog for our incoming agents, I realized that the average WordPress user might need a little more background information to put Greg’s code to use.

First of all, you need to find all your authors’ ID numbers.  Unfortunately current versions of WordPress do not show author ID numbers.  The easy solution for me was to download the Reveal IDs for WP Admin plugin.

Activate the Reveal IDs plugin.

To go to the Users page, click Users in the upper right column.

You’ll see each author’s ID number displayed beside their username.  All ID numbers, that is, except your own.  The only way to see your own ID number is to create a new separate admin username and login, then login as that new identity, and find your old self on the list.

Next step:  Obtain images of each author.  Resize each image (I decided on 52 pixels in height, and 50 pixels in width as appropriate for the design I am using.)  Each image must be named simply by the author ID number.  For instance, my lovely image here on Bloodhound Blog is titled 34.jpg.

Upload all the newly resized and newly renamed images to your blog’s root directory.

Now you are ready to rock and roll.

Click Design -> Theme Editor

From the list of Theme Files in the right column, click on Main Index Template file (index.php) to open it.

I simplified Greg’s code for now to only display the author’s image and name

<img src=”http://www.bobtaylorproperties.com/blog/<?php the_author_ID(); ?>.jpg” height=”52″ width=”50″ align=”left” hspace=”10″>
Posted by <?php the_author() ?> <br>

And I placed it under the PHP code that inserts the post title.  Here’s the complete snippet:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”entry”>

<h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h1>

<img src=”http://www.bobtaylorproperties.com/blog/<?php the_author_ID(); ?>.jpg” height=”52″ width=”50″ align=”left” hspace=”10″>
Posted by <?php the_author() ?> <br>

<span class=”meta”><?php the_time(’F jS, Y’) ?> <br>
Posted in <?php the_category(’, ‘) ?> <?php edit_post_link(’| Edit’, ”, ”); ?></span>

<br class=”clear” /><br />

I’ll add the email link code when l actually have live people posting.

UPDATE: Reading the comment stream on Bloodhound Blog suggests that a footnote might be indicated:  If you copy and paste the above code, you might want to first paste it into a plain text editor (Windows Notepad, for example), save it, select and copy it again from the text editor, then paste it into your index.php file.

Why?  Because your browser might copy in rich-text format, changing straight quote marks to curly quote marks  …  And code won’t run with curlies.

Originally posted on Bloodhound Blog

To add the hairline border … insert this line of code: border: 1px solid #877743; in the Stylesheet file (style.css)

The code goes into three different places,

First #header2

Note the width of the header2 container must be increased by one pixel, from 960 to 961 to prevent the third box from falling off the end.

Then insert the border code at #content

And finally, insert the border code at #sidebar

Maybe it’s just me, but I think a hairline border around each section looks more “finished”, or maybe the word is “polished”.

See the difference?  The top header section has no border in this screen shot.  The content and sidebar sections have hairline borders:    border: 1px solid #877743;