avgjoegeek.net has gone through a lot of changes over the past few years. The main one being the site’s design. I started out with a free Woo Theme, moved to a Premium Framework with Thesis, and then switched to Genesis after the Thesis 2.0 disaster. Well StudioPress released an update to the original Child Theme I was using to News Pro. So I finally decided to take a step back and re-do it the way I wanted it to look. This is a before and after look on what you can do to the News Pro child theme from StudioPress.
Studio Press Genesis News Pro Child Theme
I have really grown to love the Genesis Framework and its Child Themes. They are built well out of the box and the way they are structured is pretty easy to follow. I especially liked the News child theme Studio Press offered. Then they went and updated it to the new Genesis 2.0 format with HTML 5 and CSS3. It is now a fully responsive design and they overhauled the theme quite a bit.
- HTML 5 and CSS 3 Compliant
- Responsive Design to fit Smartphones and Tablets
- CSS was completely re-written for the Child Theme
- Functions.php were stripped down and re-done with Genesis 2.0/HTML 5
Old News Child Theme
News Pro – HTML5, CSS3, and Responsive
New Tools to Develop With
Web Matrix from Microsoft
I’m a sucker for new tools. My brother was ranting and raving about this new tool called Web Matrix from Microsoft. I was immediately turned off by it because he said the “M” word. He finally talked me into at least trying it out and I was blown away by it. It not only offered a way for me to install WordPress locally on my desktop without having to configure ANYTHING, I was now able to easily make changes and not have to hammer my webhost to see them! I’ll have a full review of this awesome piece of FREE software in a future article. I will tell you now though that it was a huge timesaver for me.
Google’s Chrome Developer Tools
I also used Chrome’s Developer Tool to quickly make adjustments ‘on the fly’ to see if they work before re-adding them back into the stylesheet. This was also a great time saver as well. Instead of going through the edit -> save changes -> reload webpage -> pray that it works. I was able to make the changes and once happy with it then I could go through and add it/save the changes and test to make sure the edits worked.
Change Log
This is to list everything that was changed, tweaked, altered, and fixed so I could use it for avgjoegeek.net. This is my mental checklist but should give you an idea of the work that is needed if you decide to alter or create your own theme with Genesis.
Header Section
This section was mainly just re-adjusting the size of the header area and accommodating for a larger logo and smaller ad banner area. I still need to adjust it a bit so it fits better.
- Altered the size of the Logo and Ad areas.
- Logo can now be around the same size as before.
- Ad Widget is back down to 468×60 from the original huge 728 x 90 banner it was originally
- Fixed the height of the Header area so its not as tall as the original theme. I don’t know why they want to have a height of 150 px! I want people to see the content when the page loads – not a huge header area!
Navigation
This one wasn’t hard to change either. But I did run into some issues that took some work to get it to look right.
- Changed the Navigation area so it wasn’t as tall as the original design.
- Added Font Awesome icons next to the Pages/Categories
- Had to fix an issue so they displayed correctly for Firefox and IE with adding an entry to the .htaccess file. (Thanks MaxCDN Support!)
- Added Search Bar to Navigation and had to adjust it to fit with new Nav bar.
Sidebar
This was a relatively minor edit for the sidebar.
- Changed Widget Title to match current theme design.
- Removed/adjusted padding and grey bar that showed up under each Widget area
- Added back email opt in form. Adjusted text so it includes offer for free report.
Main Content Area
Here all I did was adjust the main titles as they were huge causing a lot of text to wrap to a new line. Although some of my titles are very long this will prevent that.
- Removed banner ads.
- Added WP Beginners’s Floating Social Bar
- Removed prior Social Sharing plugin as it was bogging down the site.
- Temporarily (?) removed optin form below content.
- Removed Comment Policy section (nobody read it – and certainly not the auto spammers!)
- Changed nRelate plugin to plain text with excerpts. Adjusted style to match current design.
- Removed Post Meta information. Do readers really care about the tags used and where its categorized under?
Comment Section
- Replaced the entire comment section with the previous version and adjusted colors/padding to fit the current theme.
- Adjusted text size to be a little larger.
- Added Comments Evolved – now have Facebook and Google Plus comments enabled.
- (Removed call to Roboto font in plugin)
Forms
- Made sure that all forms on the site appear to be at least similar in functionality.
- I will be moving to Gravity forms eventually. Have the CSS in place just need to learn more on how to create/use the forms and then will replace Comment Form 7.
Footer
I really disliked the Footer section for the News Pro theme. Sure it works with what they are doing with it but it wouldn’t fit my needs.
- Go into functions.php and de-register the original five widgets back down to three.
- Modify the CSS and @Media so the new widgets were the correct width and collapsed correctly when viewed on a tablet or smartphone.
- Re-designed colors, titles, text, and links to match my current design. (I know its dark and ‘retro’ – I just couldn’t go with the latest trends of ‘flat design’ – bleh!)
- Removed the Bottom Footer – well minimized it for now as I might use it later on. Did this by changing the CSS so its essentially a minor padded area underneath the footer.
- Removed bottom Genesis ‘Footer’ message/Copyright info as I already have it up in the footer.
Additional Tweaks/Modifications etc.
These are those million little details that go into keeping a site up and running. WordPress by itself isn’t complicated. Having everything put together and working well is. This gives you a rough idea of the work involved.
- Attempt to run WP HTML Minify – broke CDN so removed it. *sigh*
- Read manual on WP Plugin Organizer – this is a really nice plugin to help prioritize/block what plugins are running and in what order they should load.
- Tried to learn and style Gravity Forms – Wow this is a great premium form system! And it is not very user friendly in terms of CSS styling or initial Setup. Thankfully there are a million tutorials on both their site and on the web to help out here.
- Went to WP Better WordPress Minify and added/tested moving more javascript down to the footer.
- Possibly remove BJ Lazy Load from the site. Had complaints where people think the page isn’t loading although they are… just in the background. Its just taking too long due to the hosting I’m on.
- Hours spent on researching different ideas, fixing issues, code snippets, how to do certain things.
- Test to ensure blog formats/displays correctly on IE 10, Firefox, Chrome, and Safari
- Test to ensure that blog displays correctly on Smartphone and Tablets (Tested on iPad, Galaxy Note 3, Galaxy SIII, and HTC One X)
- Test to ensure that I didn’t screw up the CSS for the footer resizing.
- Test to see if web page speed changed dramatically – it did… by loading faster!
Todo List
- Center images and Metro Social Widget on Sidebar
Fix Guest Posting Sign Up Page- Center About Me footer image.
- Re-write Resources and Services pages.
- Go through recent content and adjust images where necessary so they display on the front page correctly.
- Install Gravity Forms
- Create popup for email opt in and test it.
- Get back to writing!
Conclusion
You can see that even a simple design change like this can take a lot of work. If your a one man show like me on a shoe string budget? It meant sacrificing a week of writing to focus on re-doing the theme and doing the behind the scenes stuff you never get around to doing otherwise.
I’m pretty happy with the results. I now have my blog which essentially looks the same – but it is now completely re-written and responsive! I know its pretty retro in terms of design – I just couldn’t go through with re-doing it with a ‘flat’ design. It does show what you can do fairly quickly and easily to make it look the way you want to.
What do you think though? – Leave me a comment on what you think about it as your opinion matters!
