John&Jacq~s Garden

Life-long learning with WordPress Codex

Just sharing what I’ve recently discovered when I set my mind to learn what I’ve missed out on WordPress.

John&Jacq~s Garden website had been initially set up by our elder son, David, using WordPress as our blogging tool and publishing platform. Thus, I’m not as familiar with the technical aspect of it (especially the template, etc.) as I do with Blogger, the other publishing platform that I use for my other blogs.

Ever since it was first set up in September 2006, I have been focusing on just presenting as many articles as I possibly could and getting them properly categorized. I’ve never bothered to learn about the layouts of the site or how to improve its appearance as a whole….that’s too technical, I thought?

It was only recently when our boy upgraded our version of WordPress to version 2.8.4 that finally aroused my curiosity and interest. It’s new layouts and features are awesome, enticing me to explore and learn. I’m so happy that by clicking on all the links therein in earnest, I came across one that is most crucial to guide me through, that is, the WordPress Codex. Gosh, I did not know that this powerful and ultimate WordPress reference exists for its users! What a great and valuable resource!

As I probe further into WordPress Codex, I’m truly humbled…there’s so much to learn, discover and grasp. A steep learning curve, it will be obviously! Learning online can be quite tiresome, especially when you’re up against a wall with questions that have no answers. Undoubtedly, a physical tutor beside me would simplify matters and make a world of difference, but beggars cannot be choosers, right?

Nevertheless, I am prepared to learn the hard way. Sometimes, knowledge acquired the hard way can be more rewarding as they remain remembered for long, not discounting the old age factor of course! ;)

That’s why, I’m recording here what I’ve discovered and applied thus far, lest my memory fail me later should I need to replicate them if ever I change our site’s template design/theme or for whatsoever reason. Who knows, maybe someone may be facing the same WordPress dilemma and get some insights here!

Blotanical logo
I’ve registered as a member at Botanical recently, and wanted to include its logo to this site’s right sidebar but just didn’t know how-to. This was my first challenge at tweaking the theme file that succeeded after many failed attempts and rereading over and over the WordPress Codex documentation.

How-to add the logo to the right sidebar :

1. Go to Site Admin | Appearance | Editor | Sidebar (sidebar.php)
2. Scroll down the codes to locate the position where you’d want to insert your logo. I wanted it placed after the ‘Recent Posts’, so it will be inserted below the code, <?php get_links_list(); ?>. But, before editing the theme file, you may want to copy and paste it onto a Notepad or TextEdit, just in case it’s unsuccessful and you need to revert to it again.
3. Insert the logo’s HTML code within the HTML li tags like this :
   <li>
   <div><a href=”http://www.blotanical.com” target=”_blank”><img src=”http://www.blotanical.com/images/banner_small.png” alt=”Blotanical: Find Garden Blogs” height=”40″ width=”120″ border=”0″ /></a></div>
   </li>
   (Note: I’ve reduced the size slightly (originally, height was 60 and width 180) to fit into our site’s narrower-sidebar and added the attribute, alt=”” as prompted by W3C Markup Validation Service)
4. Click Update File, when done. Then, click View Site, to see the addition.

Copyscape banner
Previously I had this banner at the end of every post as I didn’t know how-to have it appear at the site’s sidebar. Now, I’ve every reason to smile, as it’s where I wished it to be. The process is quite similar to inserting the Blotanical logo.

How-to add the banner :

1. Just follow the same steps as above with a slight difference as it is placed at the left sidebar instead, below the Categories section. So, Ctrl F or scroll down to locate the word, Categories, in the same theme file, Sidebar (sidebar.php) and insert the Copyscape HTML code appropriately. The following code was placed below the HTML li closing tag for Categories :
   <li>
   <div><a href=”http://www.copyscape.com/” target=”_blank”><img src=”http://banners.copyscape.com/images/cs-ye-3d-120×60.gif” alt=”Protected by Copyscape plagiarism checker – duplicate content and unique article detection software.” title=”Protected by Copyscape plagiarism checker – duplicate content and unique article detection software.” width=”120″ height=”60″ border=”0″ /></a></div>
   </li>
   (Note: I’ve added the text, target=”_blank” so that the link opens in a new window. Also, many of the HTML attributes in capital letters that showed as errors by the W3C Markup Validation Service, were corrected to lowercase letters.
2. When done, click Update File, to save edit.

Go on, you can choose your own banner for your site/blog at Copyscape’s gallery of banners if you’re interested.

Post tags and tag cloud
These were features that I had yearned for so long!
Gosh, these were tough nuts to crack…almost had migraine trying them! After much effort, I had to post a query to WordPress Support to help solve the riddle.

How-to add post tags below each post :

1. Go to your Site Admin | Appearance | Editor | Single Post (single.php)
2. Insert the following <p><?php the_tags(); ?></p> below the text <?php the_content() ;?> , bearing in mind that a template tag should be placed before this point <?php endwhile; ?> as indicated at WordPress Codex – The loop in action (this was the missing clue that solved the riddle for me!).
3. When done, click Update File, to save edit.

How-to add a tag cloud at the right sidebar :

1. Go to your Site Admin | Appearance | Editor | Sidebar (sidebar.php)
2. Envisage where you want the tag cloud to appear and insert its code accordingly. I wanted ours to be displayed before the Meta section, so inserted the following code before <h2>Meta</h2> :
   <li>
   <h2>Tags (or change to whatever title you want)</h2>
   <?php wp_tag_cloud( $args ); ?>
   </li>
3. Click Update File when done.

Valid XHTML
Have noticed this feature at the right sidebar but never bothered to explore! Just recently discovered that it is a tool from W3C Markup Validation Service) to check the markup validity of Web documents in HTML, XHTML, etc. Just click on its button to validate your web page.
Whew…so many HTML errors were found in most of our web documents by this Validator! If only I hadn’t ignored this feature much earlier, I wouldn’t be wasting precious time now cleaning up the mess. Aaargh!! I’ve only managed to tidy up only about 10% of our published posts so far. What a boring job and quite time-consuming, but rather challenging and exciting when all errors in each document are removed and validated. Anyway, I’m resolved to continue this validation process, targeting probably 5 web pages per day, until our site is fully valid, no matter how long that takes.

(Update: June 14 2010 – finally all our webpages are XHTML compliant, almost 7 months later…so happy and proud to display its logo at the sidebar now!)

Personalized signature
Just discovered how to sign off each post with a personalized signature. Read about how-to create your own signature at Jacqsbloggertips, if you’re interested. Once, you’ve obtained the HTML code of your personalized signature at MyLiveSignature.com, return here to know how-to add your signature to all your WordPress posts (the past, present and future) automatically.

How-to add your signature to all WordPress posts :

1. Go to your Site Admin | Appearance | Editor | Single Post (single.php)
2. Insert the HTML code of your signature recently generated, right below the code <?php the_content() ;?>
3. Click Update File when done.

There are so much more to learn and apply, I’m limited only by my imagination. Definitely, this new journey into WordPress Cordex will be a life-long learning and discovery. Ahem…best of luck to me! ;D

Tags: blogging tips, codex, wordpress