Free Thesis Skin: Network News

by Ben Cook on September 7, 2010

Update: I’ve finally gotten around to updating this Thesis Skin for Thesis 1.8! Unfortunately I can’t keep up with all the updates to Dynamic Content Gallery so please read the installation instructions provided by the plugin developer.

When I declared that Premium Themes Are Dead, I received a LOT of feedback arguing that there will always be a market for premium themes since they give you a head start on the design process.

My response was that skins for framework themes such as Thesis provide that same “leg up” on the design and layout, without sacrificing any of the flexibility.

And, while I firmly believe that, there is one slight problem… there just aren’t many skins available yet.

So in an effort to help my prediction about premium themes come true, I decided to create a free Thesis Skin that heavily mimics one of my favorite premium theme designs.

The Network News Thesis Skin!

As those of you familiar with premium WordPress themes world will no doubt notice, the skin is based heavily on the Gazette theme by WooThemes, but offers even more flexibility.

Note: Let’s go ahead and get one thing out of the way right off the bat. I did not rip WooThemes off. Their themes are released under the GPL license and this is exactly the kind of thing the GPL is designed for. Besides they say, imitation is the sincerest form of flattery.

If you’re already comfortable using Thesis as well as the custom.css & custom_functions.php files using the skin will be a breeze for you.

If you’re not quite to that level yet, I’ve documented the process below in as much detail as possible. Please don’t let the length of the instructions intimidate you, I just wanted to make it clear enough that even someone new to Thesis can use the skin.

Requirements:

So what do you need for this skin to work?

Well obviously, you need to have the Thesis theme (and yes, that’s an affiliate link *waves to FTC*).

Also, this skin is also built for Thesis version 1.8.

I left comments within the custom.css file for those of you using older versions of Thesis, but you really should upgrade to the newest version.

You’ll also need to install the Dynamic Content Gallery plugin which will create the featured content slider on the home page for us.

Installation (Updated for 1.8!):

In order to download the files for the skin you’ll need to enter your name and email in the form to the left.

Don’t worry, we won’t be spamming you or anything like that. We simply want to be able to alert you when we update the skin or release a new one you might be interested in using.

Anyway, once you’ve confirmed your information you’ll receive an email with a link to download a zip file.

Unzip the files into a folder that will be easy to find later.

Upload the custom.css, custom_function.php and layout.css files to the Custom folder, over-writing your current versions. While I didn’t make any edits to the layout.css file, it would be best to upload the version I’ve provided just to make sure we’re all starting from the same place.

Tip: Always save copies of your current files before uploading the new versions. They’ll act as a safety net of sorts in case anything should go wrong or you make a mistake.

Next navigate to the Manage Options page in the Thesis menu.

On the Thesis Options Manager page (as seen in the screen shot above), click the green Download All Options button to save your current settings as a backup. That way you can always go back to the design you have now if you decide not to use the skin for some reason.

After creating your backups, click the browse button on the All Options field of the Upload Options section. Select the network-news-thesis-options.dat file and click Upload.

Warning! Importing these options will overwrite any of your current options. However, it also saves me from having to explain every single option I’ve clicked as I did with previous skins.

Logo

To display your logo instead of the big red block that’s there by default, you only need to make one simple edit to your custom.css file. Replace http://thesisdev.wpblogger.com/wp-content/uploads/logo-placeholder.jpg with the file path to your logo and save!

The default logo size is 384 x 100. The skin can easily accommodate a wider logo, however that will limit your use of the banner widget in the header .

If your logo is taller than 100 pixels, you’ll need to edit the height setting in the custom.css file one line above where you entered the image URL. You may also need to adjust the margin-top: value (currently set at -82px) for the sidebar_header in your custom.css file in order to keep it centered vertically.

Banner

The Network News was designed to incorporate a 468 x 60 banner advertisement into the header. To make use of the banner, add a text widget to the sidebar named Banner. Drop your banner code into the widget, click save, and you’re all set.

If you don’t want to use a banner, not a problem! Just don’t insert a widget into the Banner sidebar and the sidebar won’t be displayed.

Note: The code on Michael’s site is slightly out of date. We’ve gone ahead and made this change to the code so be sure not to over-write it.

Setting the plugin up can be a bit tricky so I’ll try to walk you through a few of the items that are specific to this Thesis skin.

Once you’ve installed and activated the Dynamic Content Gallery (DCG) plugin (version 3.1), you’ll need to go to the DCG settings page and skip down to step 3 to specify what content you want to feature.

DCG gives you 5 “slots” to feature in the slider and allows you to mix and match how you want those slots distributed. Rather than mixing and matching across several categories, I just created a Featured category, and inserted the category id (in my case 5) into each of the 5 category id spots.

Since I want to display the last 5 posts from that featured category, I simply numbered 1 through 5 in each of the post select boxes.

Steps 4 & 5 let DCG know where to find the images you want to use in the slider. I’ve input /wp-content/uploads/ in both fields since that’s where my images are stored.

Tip: WordPress defaults to managing your uploads into month and year based folders. Unless you want to be continually updating this setting in DCG, I recommend unchecking that box and forcing WordPress to store your images in one large folder.

Step 7 is where you’ll need to set the desired width, height, and colors for your slider. Since I want the slider to take up the full width of my content section, I set the width to 595. The height is up to you but I used 270. The rest of the settings are fairly self explanatory and I’ve included a screen shot of my settings for easy reference below.

click for larger image

Tip: Make sure my post images are cropped to the 595 x 270 dimensions so the images aren’t stretched or distorted in any way.

Once you’ve entered the desired settings, click the update options button to lock them in.

Before the slider will work you’ll need to a) make sure to save a few posts into your featured category and b) create two custom fields on each post you want to display in the slider.

After you enter each of the custom fields once, WordPress will automatically remember them for future use. When you want to put a new post into the featured slider, just make sure you add those two fields.

Also, make sure you only include the file name of the image in the dfcg-image field. The plugin is already set to look for the images in your uploads folder so you only need the myImage.jpg portion of the file name.

Customize to Taste!

I’ve said countless times that the best thing about the Thesis theme is the incredible flexibility it offers.

I’ve tried to capitalize on that as much as possible with this skin offering all sorts of widgetized areas that should make it easy for you to mix and match the different content you want to feature on your site.

I really enjoyed the process and plan on creating a few more skins so if you have any questions or suggestions please leave them in the comment section below!

With this being a a free skin I won’t be able to offer support for every question or problem you might encounter. However, leaving the attribution link in the footer definitely won’t hurt your chances 😉