Customizing the Grid Focus WordPress Theme

25 Jan 2008

Customizing the Grid Focus WordPress Theme

I am not a designer. For me, creating a good-looking site design is a long and tedious task of trial and error. So one of the things I’m learning to love about building a site in an open-source CMS platform like WordPress is the number of free designs available. And some of them are even good!

Check out this list from Smashing Magazine. It’s where I found Derek Punsalan’s Grid Focus, which I loved for its clean and neutral look. I like the hyper-organization of it.

What follows is an ongoing documentation of the changes, customizations, updates that I am making to hellorobot.org’s Grid Focus install. Hopefully, some of these changes are for the better.

I want to note that many of these changes are very, very minor – and yet, however small, they occur through specific alterations in the CSS, XHTML, PHP, and WP template tags that make the theme. I’m curious how much tweaking occurs. And, when, I wonder, will hellorobot.org cease to be an install of Grid Focus and be instead its own theme? (If ever.)

11 Feb 2008

Addressed some display discrepancies in Internet Explorer – implemented an IE-specific stylesheet using the <!–[if lte IE 7]–> conditionals. Prefer to avoid hacks wherever possible.
Created a main archives page. Didn’t feel that the available template “tags” (i.e., functions) in WordPress suited my needs, so created some new ones as plugins.

10 Feb 2008

Took the <body> tag out of the header.php template. Seems illogical to me to put part of the body into the “header” template – and what if I want to reuse a modular element on more than one pages with style changes? An easy way to control this is by an id attribute in the body tag, and easiest to apply that id attribute inside the actual template to which it belongs.

6 Feb 2008

Created and stylized an “In Brief” page for links.
Still to do: create/stylize search & 404 pages; create projects page; create main archives page; clean up browser display discrepancies (hello IE); tidy CSS; re-do calendar styling…

5 Feb 2008

Created a screenshot.png for the new hellorobot.org homepage. Probably only used in WordPress admin panel, but just in case…
Created and stylized archives-by-date pages. Kind of awkward looking, but it’s a start.
Created and stylized archives-by-category pages.
Created and stylized archives-by-tags pages. Is there any useful difference between categories and tags?

1 Feb 2008

Styled the comments form in the single-post pages.
Added a menu-type of section above the final footer on the single-post pages: provides links to newest entries, categories, archives by month, tags, and search. Now search is on the page twice… should probably be culled to one.
Styled and edited the about page using the pages part of the control panel and the page.php template.

29 Jan 2008

Limited number of entries on home to three – one extended excerpt, two brief.
Organized secondary content on right side.
Styled the footer to eliminate the repeated menu – a blog is such a familiar site style to users, they don’t need the menu over and over to get around.

28 Jan 2008

Applied the smaller width style across the entire site.
Enlarged the photoblog image to the site width, placed it directly under the header.
Reorganized, re-styled the marginalia bits in the right-hand columns on the home page.
Modified the presentation of the entry excerpts on the homepage so that the first entry has a long excerpt, then 4 more have only a brief excerpt.

27 Jan 2008

Completely reworked the header and head navigation: 1. removed the avatar (might place somewhere else?); 2. replaced the old nav bar with a smaller, darker line; 3. brought “Hello, robot” down into that line; 4. floated menu elements to the right; 5. Dropped second-line descriptions of menu items – didn’t add anything valuable; 7. Eliminated “home” link – site name already fulfills function. To do: create elegant rollover styles for all parts of the header.
Compressed the width of the page on single-entry pages. Apply site-wide?
Styled search box on single-entry pages. Similar site-wide?
Added tags and categories for single-entry pages.
Created “related posts” list for single-entry pages based on entry categories and tags.

24 Jan 2008

Removed the ‘main: skip to content’ link from the menu. The header’s so short; this link is pointless, wastes space just to fill it. Removed the RSS link from the menu.
Added pseudo-class first-child styling to the first paragraph of the single entry pages. Will need to rework this to be dependent on a class name, which will probably require a WP plugin to alter how it parses a post.
Compressed the width of the single-entry page. Apply throughout site?
Removed the title link and “read the rest of this entry” link from the single-entry pages. No need for a permalink page and a permalink preview page. Not trying to impress advertisers.

23 Jan 2008

Created a favicon.
Created a WP plugin to handle updates to the frontpage image. Created a jQuery plugin to handle the hover effects. Both plugins still under construction.

22 Jan 2008

Eliminated the three-column layout on the single entry pages. Centered the entry body text some, widened margins. Flushed images to the margin edges and hung them into the text. Kept title/meta date info to the left. Still formatting. Referring to Subtraction for inspiration.
Added Google Analytics but did not use the WordPress plugin for Google Analytics. It’s unnecessary. The GA code is outputted directly, as-is to the browser. Easiest pasted in the footer template; doesn’t require database communication.

21 Jan 2008

Shrunk and moved site name away from the vertical center of the header. Not sure about this yet.
Removed the about copy from the header to create more whitespace at the top of the page. Moved it down to the marginalia above the second and third columns.

20 Jan 2008

Experimenting with colors on navigation rollovers.
Moved categories from rollover drop-down on navigation “Archives” to rightmost column.
Added a date and tag archives module to rightmost column.
Moved the “Elsewhere” links to the middle column. Will build out as a portfolio/other projects feature.
Added a large image above the second and third columns. Might ruin the weight of the page. Image is a “thumbnail” of the current image at my photoblog.
Deleted the comments icon and count from the meta/date line above each entry summary. Hellorobot.org is too new to worry about comments. Eliminating them enforces a cleaner style.
Changed the date formatting in meta line above each entry.
Limited entry summaries output to 4 entries.

hellorobot.org