Updated Site Design

Lennie here… I had a little extra time this weekend, so I did a little overhaul of my FreeMarket Media Group site (yep, this one).

Here’s the old version of the site as an image:

So here’s what I did:

Converted the entire site to WordPress

HUH?!

First some basics…

WordPress vs Static

Most basic sites on the net are built by a designer “coding” a site by hand or using a software program like Dreamweaver or Frontpage. That’s cool – that’s the way I started. Here’s the problem – this means that only someone who understands a design program and/or coding can do updates… Not so cool…

That is how the old version of my site was built. For me, that’s OK, cause I can code… I was using WordPress for my blog.

Over the last year, I have completely changed the way I work. So my clients can manage their own site easily, I needed a good content management system where they would be able to do updates and manage their site themselves. There are a few choices like Joomla – which I find way too overblown and complicated for most. That’s why I LOVE WordPress! It works brilliantly as a content management system and was exactly what my clients needed to easily and successfully manage their web presence.

For the last year, all my sites have been custom built exclusively around the WordPress Blog. The  problem was – MY site wasn’t and I realized that it was time to put my money where my mouth is…

The new version of my site now lives entirely inside and is completely updatable from within the WordPress administration.

How did I accomplish this?

Custom WordPress Template

First I custom created my WordPress template based on my original design with some changes (coming later).

Where do I start?

First, I built a template called mainpage.php which is now the site homepage. To accomplish this, I made several adjustments to the CSS (Cascading Style Sheet). I also had to build a new functions.php in WordPress (this is the page that tells a template what to do), so I could do certain things on my new homepage, like feed the newest blog posts to the homepage as headlines and excerpts with thumbnails. This way, every time I add a new blog post, I get new content on my homepage automatically! The old version used an RSS feed for headlines and excerpts (no thumbnails).

RSS vs New Homepage Content

RSS (Really Simple Syndication) is really common even if you don’t realize it. Nearly everywhere on the web where you see a headline with a link to a story somewhere is probably generated with an RSS feed. This is exactly what I did on the old site – I simply used a feed reader to make my blog headlines appear on the homepage.

But I wanted more design flexibility on the homepage. That is what the before-mentioned functions.php is for (and I’ll leave it at that). Now I can output the newest blog posts exactly like I want.

A Blog vs A Static Page

Most everyone who spends anytime online is familiar with blogs and what they look like. 10 posts or so per page with a sidebar that houses all the “Blog” navigation: Categories, Archives, Recent Posts, etc. These are exactly the 2 things I don’t want to appear on my homepage. That’s where the mainpage.php comes in: I built a WordPress template for my homepage – and then told WordPress to use it instead of the standard blog page.

(You too can use this function by going to your WordPress admin –> Settings –> Reading.)

What does the new stuff look like?

Here’s the newest blog posts feed:

So where’s the Blog?

By choosing to use a static front page you then must create a place for the blog to live. So, I created a custom page template for the “blog” which allows me to format the blog exactly like I want.

How did I get rid of the “Blog” navigation in the sidebar?

Since my sidebar actually gets called from a file called footer.php, I created a alternate footer page (footer2.php – creative, huh?) so I could alter the right column content – removing the blog navigation from the “pages”, home and others, while leaving the blog navigation intact in the blog.

The Cool Image Slider feature on top

Next, I added the slider feature on the homepage – to highlight things we do in a cool way. I did this using a slider java script and jQuery (jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML). I tweaked the dickens out of the scripts and accompanying CSS and ended up with what you see on the homepage.

Anything else?

Lastly I adjusted the column widths. I felt the the left column was to narrow.

This changed the dynamics of the right column, turning it into much more of a side bar. I needed to readjust the size of the email capture form and added an image of my book to make it more enticing. Narrowing this column also changed the number of “Featured Sites” thumbnails I could present per row from 4 to 3. This left me a couple images short so I added few new ones. Have a look:

I would absolutely love feedback on my updates. Thanks in advance! If you want to see the homepage in action, go here: Custom WordPress Design or if you want to check out our services, go here: Web Design & Social Media Marketing