I don’t even know where to begin. First, finding a good theme to use as a starting point is HARD. Don’t let anyone tell ya different. Second, tweaking that theme (the right way) is not always easy.

After hours of theme searching I finally came across Grey Opaque by H.-Peter Pfeufer. This theme puts most other free themes to shame. It’s downright sexy! Next, I needed to customize it a bit. I know just enough about WordPress to know that you should make a child theme for your changes, rather than edit any of the original theme’s files. The reason being that when your theme gets an update, it could wipe out all of your customization. It’s not too difficult to do manually, but I happened across a plugin that makes it super easy.

After setting up my child theme, I was able to tweak the CSS to affect most of my changes. Here’s a handy tip: if you don’t already know the joy of the !important rule in CSS, get to know it before trying to style a child theme. To keep it short and under-explained, the !important rule will make sure that your CSS gets applied, even if the normal rules of CSS wouldn’t have done so. KEEP IN MIND THOUGH, that !important will make that rule absolutely unchangeable, even with javascript, as I found out later.

[note color=”#DDD”]When you just gots to have an orange border!
div#example { border: 2px solid orange !important; }[/note]

Here’s where things got a little crazy. I decided that I wanted to setup some of my post categories as pages. For example, I wanted a page on my site called Linux, to show all my posts in the Linux category. One of the themes I tried on before finding Grey Opaque had this feature, so I assumed it would be pretty easy to implement. Turns out it’s not. Well, that’s not entirely true either, it can be fairly simple, but not if you want the category page’s posts to match the rest of your theme.

The first thing I did was install a plugin called List category posts. It’s a pretty amazing plugin and I highly recommend trying it out if you have need of something like this. It has shortcode with tons of options for displaying the posts the way you want. It also has a template system for taking even more control of the look and feel. At first I just used CSS to bend it to my will, but I eventually did end up making my own template as well. I got things pretty darn close to where I wanted them, but the blog posts on the category pages still weren’t identical to the main blog page and I wasn’t having it.

I did some googling on how to make category post pages and came across this guide. I followed the guide, replacing the standard WP Loop with the Post Loop from my theme. Actually, I needed a version of my theme’s loop that used $my_query for the post data, so I created a file in my child theme’s directory called loop-cat.php, and placed my very slightly modified code there. I just have my page template (also in my child theme’s dir) include that file.

The page template from that guide include a block of conditional statements at the top, where you have to specify which page ID should load which category ID:

[note color=”#DDD”] [/note]

I’m not a fan of hard coded IDs and such, so I needed to find a better way. A little more googling and I found a way to have the category name determined from the page name. With this setup, you just have to have a category with an identical name to your page and your done. There’s never a need to go in and fiddle with conditionals in your page template. BOOYA!

[note color=”#DDD”] [/note]

 
There was one last thing nagging me about this theme. On the main index page, the Post Info didn’t include sharing links, but on my category pages, search pages, or archive pages it did. I really don’t see why they shouldn’t always be visible, especially since this theme does such a nice job of moving that info out to the left of the post. I tracked down the bit of code behind this behavior to a function in functions.php. I copied that function out to a new file and saved that in my child theme’s directory as functions.php. I changed the IF statement that hid the sharing links on the main page to allow them everywhere and rejoiced.

EDIT: I found out later why the theme’s author had removed sharing links from certain types of pages. It’s because on pages where you see excerpts, like archives, the Post Info boxes will end up overlapping if the sharing links are visible.

Ok, so now I understand why it was hidden on some pages, but I still don’t like that solution. If some person out there want’s to share the fruits of my labor, THEN DAMNIT THEY NEED THOSE LINKS!!! My solution was to incorporate a little jQuery into the code to allow hiding and showing the sharing links when “share this post” is clicked on. Now I always have “share this post” visible, but the links aren’t always expanded. A nice compromise if I do say so. Now the archive pages are pretty and shareable.   :)

Unfortunately, they were still overlaping once expanded (on excerpt pages), but I managed to fix that by having the post container expand and contract with the sharing links.

What I’ve left out of this telling is the myriad syntax errors, accidental deletions and other shenanigans that are a hallmark of my *cough* method.