Tag Archives: wordpress

Bold Feature Rundown

It’s been a month since I launched the redesign of Random Process, in the form of Bold. I’ve been massaging some rough spots since then, and there’s a big list of to-do’s still left in my OneNote notebook. Now, here are some more detailed thoughts when I went about creating this new design.

I don’t profess to be a graphics artist. My Photoshop skills are pretty meager. Yet at the same time, I’ve wanted to add some more character to my designs, which have traditionally been pretty dull. This time, I turned to a couple of interesting colors to liven things up. I really can’t say there was any technique in picking the shade of blue and orange. Nevertheless, I rather enjoy how they mix.

As you may have noticed, there are no sidebars, per se. Consequently, much of the miscellaneous content that took up that space in the past has essentially disappeared. This was intentional, with the reason being that there will eventually be a permanent homepage, which will contain the things that don’t quite fit in with the blog nature of this site.

The lack of sidebar(s) also puts the focus directly on the content. Because the homepage will be the portal to other forms of content, I can focus solely on the writing here. In that same vein, the blog index now shows full posts, instead of one feature and then excerpts only. This translates into less clicking and more reading.

The single column layout also gives me much more flexibility in presenting different types of posts in different ways. As photography is becoming a bigger part of my interests (and subsequently, a bigger part of the posts here), I felt confined by the approximately 500 pixel wide content areas I had to work with. I want to showcase larger images, and this new layout allows me to do that easily.

Of note, the archives section of the site has been completely redesigned. I used a fancy AJAX archives plugin in the past, but I wasn’t happy with the navigation, which was simply a giant list of dates and posts. Instead, I’ve created a table-like structure, where the user can select both year and month to drill down into the archives.

The same general format is used for the search and category pages as well, although I haven’t quite figured out what I’m going to put on the side for the category version. Meanwhile, the search results page will throw up another search box if a lot of results are returned. I figure the user might want to refine their search if it happens that what they initially searched for returns too many results to go through easily.

Finally, to keep with the WordPress times (e.g. version 2.7.1), I’ve included support for threaded comments. The new comment function, wp_list_comments, is nice in that it eliminates a lot of code for the designer and surfaces so many classes with which one can modify the look of comments. Unfortunately, creating a custom callback to use a completely different HTML layout means all those useful classes, which identify things like odd/even posts, author responses, and more are lost. In addition, the function itself isn’t well documented on the Codex, so I had to reference other sources, and rip out my share of hair, fiddling to get things the way I wanted. I’m planning on writing a few tidbits for others in the same position. Even Otto’s excellent post didn’t quite do it.

I’m pretty happy with the design overall, and with this semester as horrifically busy as it is, there’s probably little time to make major changes even if I wanted to.

Introducing Bold.

I gave a small sneak peak at the overall redesign I had planned for random process early in the year, and a couple weeks ago I mentioned I had started on the implementation in earnest. Now, you get to see the fruits of my labour, Bold. For those of you reading this in a feed reader, now would be a good time to drop by.

I’ll write a much more complete post on my design philosophy and the key features, but for now, I’m hoping to get some feedback, mostly to ensure things aren’t broken all over the place. I’m perusing the site, looking for bugs, but if everyone helps out, it’ll be a much quicker task. Key things to focus on would be the threaded replies of WordPress 2.7, which are now supported, along with the archives.

I’m no where near done implementing all the features I want to, but the core is there and I think it’s a big step up on what I had before. I’ll roll out incremental updates to the design over the next little while.

I hope you enjoy the new design!

Working On a New Design

I mentioned in a recent comment that I was hoping to get some updates to the rc2 theme going during my break, but alas, I’m being a bit selfish. Instead, I’ve devoted some time to implementing the new design for random process I wrote about a little while ago.

I didn’t get started until two days ago, so predictably, there’s still quite some work left to do. As well, since things aren’t quite ready yet on the main page front, it’ll only by the blog portion of the site that gets refreshed. There’s not enough time during this break to do any meaningful work on my plans for a gadget section (boy, do I ever need one).

That’s all for now! The break has been great. For now, it’s time to watch Canada’s last chance at the Stanley Cup in the Vancouver Canucks play. Wish them luck!

A (Re)Design Project in Progress

It’s more than half way through my reading week and I’m finding some (okay, let’s be honest, lots of) time between studying to relax and work on some things I’m a bit more interested in… like another redesign of random process. I started the process last semester, but the punishing overtime left me with little energy to do much more than pick a color palette.

I finally sat down and whipped up some mocks this past week and they’re coming along quite nicely. I won’t give away the farm yet, but here are a few select portions of the design.

Random Process Redesign

There are many things I like with the existing design, such as the ‘topbar’ before the content. However, I wanted to streamline those components and really focus on what they’re intended to do: drive readership. That means I’m taking out recent comments in favor of more prominent placement for the feed. You can already subscribe to individual post comments, so displaying the recent ones doesn’t seem as valuable as increasing subscribers.

Random Process Redesign

A first for random process, I’m going have a ‘static’ home page, designed to act as a portfolio of my interests. It’s time I better organized the things I’m passionate about, as opposed to simply writing them here, interspersed with everything else. I want to immediately impress upon a first-time viewer what I’m interested in and what he/she can expect to find.

Random Process Redesign

Space is at a premium on the home page, so I’ll be putting some of the JavaScript skills I picked up over the last work term to use to shuffle between post excerpts and spruce things up.

I’m not sure when the design will actually be implemented. Hopefully I can put in a couple hours each week to complete it before the end of the semester.

Got Hacks?

We random process certainly got hacked in a major way. About a week ago, I noticed my Google search referrals dropping like a stone. After a few days, searches were down from several hundred per day to less than 10. Needless to say, I was ripping my hair out. I don’t do any weird shady stuff with my website and I didn’t think I had stepped on Google’s foot anywhere along the way. I was pretty stumped. My only lead was the thought that perhaps the links back to my site in the themes I’ve released over the years has linked me with some ‘bad neighborhood’ sites around the internet. I ended up sending in a reconsideration request to Google, in the hopes that my case would be excused, if that were even the problem.

As it turns out, that probably wasn’t the problem at all. By complete random change, I fired up the updated Windows Live Writer to work on the long-time-coming Microsoft Zune review only to find that footer of my site was filled with garbage keywords in the preview, selling prescription drugs for cheap and the like. This was especially curious since I had never seen any of these links when on my site previously. Quickly, I navigated to my site in Firefox and found nothing. A view source showed nothing either. Bewildered, I checked WLW again, and there it was.

To confirm, I performed a search, ‘site:randomprocess.ca prescriptions’ and lo-and-behold, tons of links with drug-related keyword links appeared. But curiously, clicking through to the links, once again, showed nothing amiss. Trying the cache also didn’t show anything wrong.

I then went over to Yahoo to double check; however unlikely, I had to make sure Google wasn’t improperly caching or doing something weird. But Yahoo showed the same thing. This time though, viewing the cache displayed the spam links in all their glory.

With some knowledge of the problem at hand, I did a search and many articles on the issue immediately appeared. It seems like this was no unique occurrence. Here’s a few of the articles I referenced in cleaning up my site:

As is explained in the utmost detail in those links, this hack is no trivial matter. It encompasses everything from database fields (new user, bogus plugins that activate PHP scripts that are actually stored as image types, jpg, gif, png, etc) to script injected into themes to htaccess changes. I hadn’t realized that WordPress 2.6 was susceptible, but I’ve now upgraded to the latest version. On the other hand, if 2.6 wasn’t exploited, then I can only shudder at the thought of when my site was hacked… back in the 2.5 days?

One thing’s for sure, I can stop ripping my hair out over the loss of search traffic. Just what I needed after a 10 hour work-day…

WordPress Theme – RC2 (v1.0)

It’s been a long time since my last theme release, but I’m back with rc2, a lightweight, widget-ready, two-column theme. The design arose from the desire to break from my traditional boxy style. I’d grown tired of that design mentality and wanted to try my hand at something new.

RC2 has been tested under the following browsers. Please let me know if you run into any issues.

  • IE7 (rigorous)
  • Firefox 3 Beta 4/5 (rigorous)
  • Safari 3.1 (fairly rigorous)
  • Firefox 2
  • IE6

For those of you who want instant gratification, you can take the design for a test run on my development site, or download the theme. Update – there’s been a small change bumping the version to 1.0.1. It should now be both XHTML (Strict) as well as CSS valid. Unfortunately, the WP2.5 gallery feature produces invalid XHTML, so validation of the development site homepage won’t be indicative. Try this site’s homepage or a single post entry.

Demo

» Download

Otherwise, read on to find out a bit more about the theme.

Lightweight, but Fully Functional

The design is lightweight. It adds only 7 additional HTTP objects on top of whatever is required for your content. Total damage is in the range of 10KB for the CSS and 2KB for images.

That’s not to say it’s sparsely featured. There is support for most of the newer WordPress features and some other popular ones, including:

  1. tagging
  2. widgets
  3. gravatars (WordPress 2.5)
  4. galleries (WordPress 2.5)
  5. asides (link posts)

Navigation links at the top-right are generated from pages.

Sidebars

The sidebar is dynamically generated based on the type of content. More importantly, there are two widgetized sidebars. The names are pretty self-explanatory, but just in case, the Single Post Sidebar is what gets displayed for single post content, while the Front Page Sidebar is what gets displayed on the index (home/front) page. It often makes sense to have a different set of sidebar content between the front page and the individual post pages so I’ve made it easy for you to do just that.

Default Plugins

Additionally, I’ve included two integral plugins with the theme. They help populate the top-bar by default. Feel free to switch them out for whatever content you want to place there in their stead.

  1. Recent PostsNick Momrick – This displays the most recent posts to the blog. I’ve set it to show up to 6. That seems to be the sweet spot for the size of the top-bar.
  2. Brian’s Latest CommentsBrian Meidell – This shows the latest comments and their corresponding post.

Known Issues and Limitations

  1. Asides are styled differently from other, standard content on the home page. In order to do this, the query loop applies different CSS classes to certain categories. However, in order to do this, the asides category ID must be specified. Currently, the way to do this is to edit the index.php page and set the $asides_cat variable to the appropriate category ID(s). By default, this variable is assigned 0, which means all your posts should be displayed with standard styling.
  2. The blue color scheme is something I decided upon (I just love blues), but won’t appeal to everyone. Fortunately, I’ve stuck with two shades of blue. For links and headers, #0a52aa is the shade of blue used. Mouseovers and hovered links use #14272d.You should be able to do a global find and replace on those two colors and switch in whatever two-tone scheme you want. Unfortunately, the top-bar headers are images, based on #0a52aa, which means to complete the effect, you’ll have to remake your own header images, which leads me to my next point.
  3. The top-bar is not widgetized. A large part of that has to do with what the standard dynamic_sidebar function tries to output – the top-bar markup is quite a bit more complex, and the added image header makes it that much more difficult to implement. I’m working on something to get around these issues, but that didn’t make it into the first release.
  4. The WordPress 2.5 gallery will not display properly if the_excerpt_reloaded plugin is not used and the gallery appears in an excerpt on the home page. This isn’t so much an issue with this theme as it is an issue with the way the basic WordPress excerpt function operates, not parsing any HTML tags. I strongly suggest you go and get the plugin, so you can style excerpts to your heart’s content.

Future Plans

Looking down the road, there are a few key features I want to implement: localization support, a print stylesheet, and an administration page, for setting options such as the asides category.

Feedback

As always, I’m open to comments and suggestions on the design. Are there certain widgets you’d like to see styled or plugins supported? Let me know.

Update: David Young wrote in the comments that the design would look a bit more consistent if the sidebar lined up with the navigation module and I agree completely. I’ve rolled the changes into the package, so go ahead and grab it. Thanks David!