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.
Brandon – The site is looking great, but then again I’d be a bit biased!
Glad that you have found the Fresh News theme valuable and easy to use; as those are the exact reasons that we are releasing themes like these.
We look forward to seeing the final product here!
Very nice looking website, although I’m not very fond of the use of Flash just to be able to display some custom font. Too bad the main div container is a fixed with one!
I like the use of those colors. Good job.
@Adii: Wow thanks for the kind words. They are definitely appreciated coming from someone with the WooTeam (haha, see what I did there?). Anyways, serious – thanks a ton for taking the time to check out my little blog. The team that I work with the most often has been loving the projects where we get to skin premium themes like the ones you’re releasing. I was trying to find it out on your blog (very nice by the way, I’ll be a regular there soon enough it looks like), but what role are you playing in the current design & dev of woothemes? I’d be very interested to hear a little bit about it from your end of things. Cheers!
@Jefklak: Thanks for the comment – I was the same way about sIFR until I learned how nicely it degrades when flash isn’t present – it works just fine on platforms like the iPhone; where Flash isn’t available, it just reverts to CSS (i’ve even taking time to style the non-flash version pretty meticulously). My only real gripe is that it loads usually towards the end of a page load process, which can mean waiting a few seconds, but as I’ve read, there’s already a solution to that, it’s just not been implemented in Flashy Titles… perhaps it’s a project for me to take on. I’ve already managed to put together a solution so that the sIFR links function properly (they didn’t in the original install), but I’d venture to say that this too is a work in progress that I’ll be tinkering with for a while .
Again, thanks for dropping by. Cheers!
Hi
can you help me, i have a new logo and the height is 200px but i cant change it, i have search in style.css cant fin it. HELP plz
nice site you have.
“Fresh News theme”
@mikael: To swap the logo – you can go to WooThemes to get a more in depth tutorial… but I’ll show you what I did as well.
1) Disable the Custom Logo field inside the Fresh News admin panel. (just clear the field)
2) Go into Style.css and find #header h1 and add your logo as a background attachment there.
ie:
#header h1 {style.css (line 173)
background:transparent url(images/logo-trans.png) no-repeat scroll 0 0;
float:left;
height:108px;
margin-top:0;
text-indent:-9999px;
}
3) Tweak the other divs around it to adjust for your custom height/width so that it fits properly.
If ya need more help, I’d recommend posting a forum topic on it and seeing it the WooThemes rockstars can help you out – if you’d rather post here I’ll be happy to help ya as well
O thanks
how do u do this -> 3) Tweak the other divs around it to adjust for your custom height/width so that it fits properly. my logo i 150px height
bigg thanks
Thanks for sharing Brandon, btw is there any logical reason why Woo has decided to use the original CSS? Just curious.
@wecreateyou :
Oh sure – there’s a ton of logical reasons why they might have made this decision – the most obvious reason to me would be that it simplified things from the admin side… which suits their pre-built styles better than my method which adds a new level of complexity. They can change the entire look by changing a few items in the CSS, where my method adds a couple extra steps… every added level of complexity when building a theme that’s targeted at a very broad usage is generally frowned upon because it opens the door to more potential problems.
There’s also the likelyhood that the simpler method follows a “best practices” viewpoint from the side of the builder that states that if an element (the background in this case) can be reduced to a smaller chunk of code, then do it. Furthermore, the percentage of people that will even be interested in using a repeating background graphic is pretty small, and those people are likely determined enough to figure it out on their own (like me).
What it comes down to is that each time a theme like this is built, the builder has to ask himself where the line is between quick & easy versus complex & custom. You want to offer enough ways for a user to customize his/her template quickly, but adding too many ways to do this can result in a mess. I actually am pretty happy so far with just how much I can edit on my own without having to do what I’d call major edits to their core code… and for the rest of the stuff, I’m usually rewarded by either a trip to their forums or some experimenting on my own to figure it out. That said, I’m sure I’ll outgrow this theme at some point and begin wanting additions that might require some pretty heavy renovating…
Thanks for taking my post seriously. {I wondered if anyone would) I was asking because I’m recently looking into creating templates for WP and I’ve had a heck of a time getting a concise list of conventions to use. It seems there are so many ways to attack creating themes in WP.
Thanks Again!
@wecreateyou : my pleasure! Your question digs into coding philosophy, which can be a pretty tricky field to navigate. When you are coding a website for yourself, there’s a thousand ways to achieve what you’re trying to do with code… it’s a different matter when you’re building a website that’s intended to be used by thousands of people. Every little decision that you make can play a big role in how easy it is for other coders to come in after the fact and make changes.
In this specific scenario – I was able to quickly isolate and understand what I was trying to do. This is partially because I’ve done it before a lot, and partially because the core FreshNews coding is pretty clean and easy to understand. Again, this is where using clean code, good ethics, and best practices can be the difference between easy customizations and nightmarish wrestling matches.
I’d refer you to some of the people who are currently making themes though, as I’m certainly not an expert on the matter of theme coding. Check out Adii for starters, and browse around the sites and forums at Theme Forest and WooThemes for other coders that make themes on a regular basis. Best of luck to ya and happy coding!
how do u do this -> 3) Tweak the other divs around it to adjust for your custom height/width so that it fits properly. my logo i 150px height
bigg thanks
Great looking site! I noticed on your front page that all your posts are the same larger width. Are these all featured posts, or did you customize the settings?
Hi Heather – thanks for the kind words. To answer your questions: I actually did a fair amount of customizing to get the post sizes to work out this way… I wasn’t 100% happy with the out-of-the-box FreshNews layout, so I opted for a hybrid of the blog.php and default.php templates. The simple explanation is as follows:
1) I’m using blog.php as the front page template.
2) I am using just one featured post (the very top post) because I liked that the image shows up on top of the post title.
3) Each subsequent post is full width (again, because I’m using the blog.php template instead of the featured template which uses those little boxes for front-page posts which are cool looking, but didn’t fit my needs.
4) I am creating custom graphics (540×195) for each one of my posts to make it look like they are featured, when in actuality it’s just hard coded images in each post.
5) I did a small amount of tweaking the actual template coding (layouts/default.php and blog.php) to knock out the thumbnail images in the front page so I could use my full width images instead. I still allow the system to use those little square thumbnails in Archives, but they’re disables in my main page listings.
Hope that helps; I can probably provide some code samples if you’d like a more detailed explanation, but this should give you enough to begin looking at it yourself if you’re willing to get your hands dirty.
Cheers!
B
That helps out a lot, Brandon!
Hi,
My Name is, Daniel
good overall content
look at my site:
http://Fl5hwa.spaces.live.com/
The people in such cases, said so – Avos will be alive, maybe pomrem.
halo… good design fresh news.
how to create picture show in homepage, frontpage.
why my blog not show… the picture link to photobucket.
my blog http://www.rykers.org
I wnana know more on this when is the next post comming
respect
jenny omper
______________________________________________
passing hair drug test | pass drug testing | pass hair follicle drug test
i would love to read more from you on this
Thanks
james orel
______________________________________________
Online Stock Broker | cctv uk | Answering Services
Can i have more info on this ?
respect
Jinues man
______________________________________________
I posted your blog to my facebook group
regards
Davin saha
______________________________________________
Valuable gift for anyone who needs backlinks for no cost. Anybody need free one way backlinks for their blog? I figured I might share some awesome info I found recently. Free backlinks for your website. I have been taking advantage of this this for my blogs and it absolutely works great! Just click my name to get what I mean. Not peddling a thing, it’s completely free and it works.
I bookmarked your post will read this latter
regards
Adrian Devan
______________________________________________
Hello Guyz I added this post to my article site. You can view this here.
respect
Alessandro Jayson
______________________________________________
I loved the way you exlained things. Much better many here
Thanks
GILMA RAYMONDE
______________________________________________