I also created my first widgets! The ‘Interesting Links’ and ‘Interesting Images’ on the sidebar are no longer hacks done on the themes sidebar.php file. I learned how to create a plugin in WordPress and make it into a widget. Here is what one of the widgets looks like:

I had to go back to all my old posts and make updates. If you find any issues anywhere, please let me know so I can fix it asap. I’ve found instances in code where there should be two && and instead the code blocks shows &&. I’m currently trying to figure out why my preview button doesn’t work, hopefully I’ll figure that out soon so I can move on to changing some colors around and finally updating my ‘About Me’ page. I hope to have some content in that page by the end of this weekend. Other than that, I hope you all enjoy the new look and am looking forward to hearing some feedback!

The theme I’m using is Devart by deniart. The few mods I’ve made to this theme are:

• Edited the /wp-content/themes/devart/images/author.gif (to show my pic instead of the default apple)
• Modified the /wp-content/themes/devart/style.css to change the way <code>, <ul>, <li> look
• Modified the style.css to add my twitter logo and link on the top right hand side of the page
• Modified the header.php page to add my twitter logo and link to the top right hand side of the page
• Had to add <?php wp_footer(); ?> to footer.php to launch stats code
• Added img#wpstats{display:none} to style.css to hide the from stats plugin

I’ve also done the following to my setup:

• Followed these instructions to make my blog be at the root: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory
• Installed the following stats plugin: http://wordpress.org/extend/plugins/stats/
• Change ‘blog roll’ to ‘Links of Interest’ (displays all links under links category)
• Installed http://lesterchan.net/wordpress/readme/wp-postviews.html to show how many views each page/post has received. Made the modifications required for this to show and work. Also modified the view_options in db to format the text a bit differently.
• Installed the Google Analytics plugin and created an account with them.

“rtl.css is called when you are using a language localization that reads from right to left (e.g., Arabic or Hebrew).” – source

Well now I know and so do you.

So far I am using the default theme.  I’m sure I’ll eventually change it but for now I’m just trying to understand how things are structured and how to tweak elements on screen.  The WordPress Function Reference page was a great place to start.  My first goal was to figure out how to get my sidebar to display a list of projects and topics.  In the admin, I created a root level category called ‘Topics’ and another one called ‘Projects’.  Then I created a few other categories that were under either topics or projects such as ‘Flash’, ‘Cars’, ‘PHP’.

I was trying to make my side bar look something like this:

• Flash
• PHP
• General

• QAlias
• Car

Unfortunately, once I reloaded my page I didn’t get these results.  Instead, I had a root level element titled ‘Categories’ and the links under it were my sub topics.  After talking to Moses, he explained the concept of widgets and I guess currently the default theme is using a categories widget that isn’t doing what I need it to do.  So, I went back to the admin, clicked on ‘Design’, finally on ‘Widgets’.  On the right side of the page, it showed I was using a ‘Categories’ widget so I removed it since I didn’t see any options to modify it from here to do what I wanted.  I think this would be the right time to mention I like coding so I (depending on time constraints and the project) rather figure things out myself than to ask and/or find a guide online.   it makes things more fun – ok, back to the topic.

After removing the ‘Category’ widget I had to modify the ‘sidebar.php’ file located at ‘wordpress root/wp-content/themes/default/’ to add my ‘Topics’ and ‘Projects’ lists.  I opened the file and looked over it to see what it’s doing.  It’s pretty much just one big <ul> with a bunch of checks to see what needs to be displayed.  I went to the bottom of the file to add my two new <li>’s in there.  Using the functions reference list, I found a function called ‘wp_list_categories‘.  By using the ‘child_of’ parameter, I was able to get a list of all the sub topics for a particular topic.  My code looked something like this:

<!-- topic -->
<li>
<h2>Topics</h2>
<ul><?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=1&title_li='); ?>
</ul>
</li>
<!-- project -->
<li>
<h2>Projects</h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=2&title_li='); ?>
</ul>
</li> 
To get the id value for the ‘child_of’ parameter, I just went to the admin and clicked on ‘Manage’ and ‘Categories’.  Then you can move the mouse over the categories and in the status bar of your browser see if the cat_id for each category.  After a bit of researched, I found out that if you pass ‘title_li=’ with no value, the function won’t return a ‘Category’ title attached to the list of sub topics.  Before this, the list returned by the ‘wp_list_categories’ function was ‘Categories->Flash/PHP/Other’.  With ‘title_li=’ the return value is just the sub topics ‘Flash/PHP/Other’.

After hitting reload on my browser, my sidebar was displaying correctly but something was bothering me.  I was hard coding the title of the categories and I didn’t like that.  As you can see the code above, the <h2>’s have the names of the categories hard coded.  This to me is a big no no so I did some browsing around the list of functions in WordPress and found ‘get_cat_name(id)’.  Now I’m using this function and passing the correct id’s and I’m feeling better about the end result.  Final code is:

<!-- topic -->
<li>
<h2><?php print get_cat_name(1); ?></h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=1&title_li='); ?>
</ul>
</li>
<!-- project -->
<li>
<h2><?php print get_cat_name(2); ?></h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=2&title_li='); ?>
</ul>
</li>