I’ve been having a ton of fun so far setting up and working on MakeDesign,NotWar. Originally, it was just a way to get a new portfolio site up, but more and more it’s become a great excuse to really dig into Wordpress, the FreshNews theme, and the wide word of plugins available. The purpose of this post is to give a quick rundown of the current plugins and tweaks that I’m using, and to house a few small tutorials that will apply to WP and the FreshNews theme in specific.
A Grain of Salt
I’ll start by saying this: I’m not a programmer. I’m a designer with enough programming experience (and friends) to tinker with these technologies. The difference is this: a designer w/ programming skills only teaches himself enough to get the job done, where a true programmer will understand the reasons behind why it works. Sure, I’m pretty fluent on how and why my tweaks below work out, but just keep my designer’s point of view in mind when it’s question time 
.
Fresh News : Premium Themes vs. Custom Themes
It wasn’t until I saw the Fresh News theme that I really became interested in using a blog as a platform for my freelance site. I’ve used everything from Flash to barebones HTML to custom self-made CMS systems in the past, but the blend of simplicity, good straight forward design, and flexibility is what got me on board to start building on top of the Fresh News theme.
As of writing this, I’ve now customized quite a bit using almost all of the WooThemes, among several other ‘premium’ themes. I’ve also had plenty of experience with starting from scratch at making custom themes.
So what is the difference between working with a scratch Wordpress theme versus using a pre-built ‘premium’ theme?
1. Ease of Use.
2. Quicker “Start – to – Launch” time.
3. Custom admin panels.
4. Less time designing = more time skinning.
5. It’s standards compliant.
The main difference to me boils down to time (and less headaches). Starting with a pre-built theme means I can worry less about the overall design and spend more time doing actual skinning, which means the final look and feel of the content is going to go up in quality. Having custom admin panels that don’t normally come with WP and are catered towards the purposes of the theme are awesome tools down the line. Finally, my biggest headache when building scalable sites like Wordpress is that I don’t want to have to worry about coding for 8 different browsers. Using a premium theme usually passes the ’standards’ buck on to the original theme programmers, which lets me spend more time playing with custom skin options, writing actual content, and adding plugins.
The Fresh News theme specifically is quite nice. I won’t go into too much detail because you can read all about it here or view their custom showcase versions of the theme here.
The Plugins
I’ve hunted around quite a bit for plugins to use with my WP install. While I change them all the time, here’s the list of can’t live without ‘em plugins that I’ve found so far.
Flashy Titles : Probably my favorite plugin so far. It’s sIFR, custom built for Wordpress, without the headaches of installing sIFR. Best of all, with it’s custom admin panel, it’s easy to add/edit/remove custom font styles from the admin screen without ever having to edit a line of code. You’ll notice that I’ve limited the usage to headlines (h2, h3, and h5) specifically – mainly because I don’t feel like anything besides the standard web typefaces belong in content paragraphs… but that’s just me. In case you’re interested in the typeface I’m using, it’s Precious Serif by Nick Cook.
Subscribe to Comments : Pretty straight forward; it allows users to receive notification when new comments are posted on a thread after their own. Crucial to creating the little threads of dialogue that make small blogs valuable as community tools.
Change Font Size : I like small type. Like, a lot. This bugs the heck out of the people that I design for usually because I err a good 2-4 pts below what other people are comfortable with… and believe it or not, that’s after I went through my pixel font stage. While I’ve tried to keep the size issues on here pretty run of the mill, this little plugin allows people to change the font size on the fly in case they don’t know how to use CTRL +/-. It might seem frivolous, but it’s about accessibility on the web.
Ozh’ Admin Drop Menu : This one is a very very close runner up to being my favorite. It customizes and streamlines the admin panels UI so that it-just-works-better. Get this one.
All in One SEO Pack: Just like it says, out of the box SEO for your Wordpress blog.
Google XML Sitemaps : Simple little plugin (the best are simple) that creates an XML sitemap for use with Google SEO among other search engines. A great way to get your site crawled more efficiently.
Super Cache : While I haven’t had to use it yet, and I hope that I won’t have to given the stellar track record of MediaTemple, this plugin has me prepared for if traffic ever spikes.
Customizations
Finally, because I just can’t live without actually popping open the hood and breaking making my own additions, I began working on making edits to the actual theme files to customize the theme to my liking.
Sidebar Blocks and Widgets : I’ve always been fond of having lots of fun little content to discover in a site’s sidebar. So, I added a couple custom little tweaks to the Fresh News basic sidebar by adding a custom advertisement/affiliate section that goes above and beyond what Fresh News comes with. I’ve also added an About the Author section, and am currently in the process of writing a custom sidebar item that will allow me to post quick links to other blogs/sites that I find to be awesome. I’ve also tinkered with some Twitter sidebar customizations as well, but being as I don’t really twitter too often, these are turned off until I catch the twitter bug.
Web Typography : Honestly, this is the single biggest and easiest improvement that any website can make when it comes to having a well designed, easy to use site. It’s not hard either. I began by tinkering with the size, color, line height, and family of the main uses of type on the site. Settling on a well thought out use of Georgia for main content and plain old Arial for sidebar headlines, I began to fine tune specific areas of the site’s typography.
For instance, one of the long term goals of my site is to offer lots of great downloads to users. So, I created a nice little download class to help users find download links quicker when scanning a page.
The CSS looks like this:
.download {
background:#F3F0E7 url(http://www.blog.epicerastudio.com/wp-content/themes/freshnews/images/dropbox.gif) no-repeat scroll left center;
border:1px solid #E6E5DA;
height:40px;
line-height:38px;
margin:10px 0;
width:500px;
}
.download a{
color:#64625C;
font-size:12px;
font-weight:bold;
padding-left:30px;
}
Finally, I finished up my initial type treatment (I always adjust after the fact), I installed sIFR through Flashy Titles and spent a lot of time finding just the right font usage for headlines to add a little bit of personality to the site. As mentioned before, I’m using Precious Serif in various styles and weights to call attention to my headlines and sub-headlines.
Header : The header is where you set the tone for a site, naturally. So I wanted to have an easy to read header section with enough style to showcase a little bit of my personality without being overly gaudy or dismissive of the content below. The result is something that I’m happy with, but the way it’s coded and styled is flexible enough for me to change on the fly down the line if I want to. It also includes all the main information that a user could need to navigate the site, all standards compliant.
Infinite Background Tweak (Fresh News) : Getting a background to repeat infinitely is easy as cake [ background-repeat: repeat; ]. However, Fresh News, by some quirk of code, decided to link the entire page background to the header of the site. Meaning, that if you want a background texture to extend below the header section, you need to either A) save an overly tall background graphic, which is heavy on filesize and still won’t be infinite or B) make several class adjustments to their code.
You’ll have to look in depth at my source as well as your own to implement this, but with a little work you can implement this on your Fresh News theme. Note that I’m stripping out quite a bit of code for presentation purposes, so use this as a guide, not something to cut/paste into your script.
The code essentially boils down to this [header.php]:
<div id="page" > <!-- Note that I'm separating the container_16 class -->
<div class="container_16"> <!-- container_16 limits the content width -->
<div id="header">
HEADER CONTENT...
</div>
</div> <!-- end container_16 " -->
<div class="goodwood"> <!-- Begin the background graphic at full width -->
<div id="topmenu" class="topmenubg"> <!-- Skin the navigation bar -->
<div id="navcontainer"> <!-- Begin limiting the width again for the nav -->
NAVIGATION CONTENT...
</div>
<div class="container_16"> <!-- Begin limiting the width again for the rest of the page -->
PAGE CONTENT...
</div>
</div>
The extra CSS looks like this:
.goodwood {
background:#EBE9E1 url(images/badwood.jpg) repeat scroll center top;
}
.topmenubg {
background:#EBE9E1 url(images/topmenubg.jpg) repeat-x scroll 0 0;
}
.navcontainer {
height:35px;
margin:0 auto;
position:relative;
width:960px;
}
Fresh News Images : I wasn’t quite happy with the way that Fresh News displays images and thumbnails on the homepage, so I did quite a bit of adjustments to create a hybrid of their “default” and “blog” homepage styles that ultimately allows me to display headline images on my own terms, not the way that Fresh News was handling them. I’m currently using their “featured post” as an intro vehicle, but I might actually mash this into a WWSGD plugin down the line.
That’s It!
Thus concludes my wrapup of the bits and pieces that make up the current version of Make Design, Not War. I’ll continue to upload and modify this post as I continue to work on the site, but feel free to post any comments, questions, feedback, or ideas below and I’ll be sure to check them all out.
Sun, Sep 21, 2008
Webnology, Website News