Work From Home Online Guide

What Works and What Doesn't to Make Money Online

Work From Home Online Guide header image 1

Arras Free Magazine Theme for WordPress

November 27th, 2009 · 25 Comments

The free Arras magazine theme for WordPress will do many of the things that a paid theme can do to jazz up your site, and it works great for article directories and supersites.

StudioPress Premium WordPress Themes

Since it’s a free theme, you’ll have to be willing to make some compromises that you wouldn’t have to make with Thesis or Lifestyle, but if you’re on a tight budget, Arras might be a good choice for you.

As of February 2010, the Arras developer has dropped the old 1.3.6 version and is releasing regular updates to Arras 1.4.2. The 1.4 version is compatible with WordPress 2.9.2 and incorporates WordPress’s new thumbnail feature, which means that the many frustrations and security issues with the Tim Thumb plug-in used in version 1.3.6 are no longer an issue.

Similar to the Lifestyle theme, the Arras layout gives you a banner feature across the top of your site with carousel rotation of snippets and images from multiple posts. Below the carousel, you can set up smaller static featured posts, either in a grid, or stacked. At the bottom you can place an unlimited number of deep links to other posts on your site, which are good for both visitor navigation and on-site SEO. For sidebars, you can set the theme to display a left or right sidebar, or both, plus two footer blocks at the bottom. The theme supports 2- or 3-column layout, and is widgetized. You can find several demo sites at the bottom of these pages:
http://demo.arrastheme.com/
http://www.arrastheme.com/wiki/

So far, the creator of Arras has been releasing versions of the theme that keep up with WordPress updates, so check what version of WordPress your site is running before you get the theme. As of this posting, the most recent update for Arras was version 1.4.2, 3-28-10—pretty good for a free theme. Its requirements are:
* PHP 4.3 or later (PHP 5 recommended)
* GD Library PHP extension (available with PHP 4.3+)
* WordPress 2.7 (MU) or later (WordPress 2.6 is not supported)

My preferred way of installing WordPress themes is to download the zip file directly to my hard drive. Arras is available from the WordPress theme site:
http://wordpress.org/extend/themes/arras-theme. However, with the recent release of Arras 1.4, the WordPress site won’t always have the latest update of the theme as new bug fixes come out. If in doubt, check the Arras developer announcements page to see if you have the latest version of this theme.

After downloading, I extract the zip file and open my FTP program. On the right, open the themes folder for the site you want to install Arras on. On the left, click into the Arras theme folder until the folder name you see is arras-theme (NOT arras-theme.1.4.2). Upload and disconnect.

Now log into your WordPress control panel and select the Arras theme to get a general idea of how it will look. The site will be a bit wonky until you add your images and make a few code changes, so if it gets traffic, you’ll probably want to switch back to your old theme until you finish. (Note: you won’t be using a static home page with Arras, so you need to change back to Your Latest Posts on the “Reading” setting if it’s an existing site.)

First, set the posts you want to rotate in the carousel bar at the top by opening them in Quick Edit and checking “make sticky” (for new posts, in the publish box, click Privacy and make them sticky there).

To choose which posts you want featured below the carousel bar, you need a category dedicated to it. It doesn’t matter what you name the category (I call mine Featured Posts), and you can use an already existing category if it includes only the posts you want to feature. You’ll need a third category for the news links below the featured posts, unless you just want to include everything on the site.

Now make the Arras theme active again and go to the Arras Theme panel from the WordPress control panel toolbar on the left.

Click the Categories tab. Set Featured Category #1 (the carousel) to “stickied posts.” Set Featured Category #2 to the category name you chose (Featured Posts). Set News Category to All Posts, or skwhatever category you want to use for single-line links at the bottom of the site.

The Navigation tab changes the look of the top navigation bar that runs horizontally across your page under the header. I’ve left this at the default setting of Home, Pages, and none, or you can use this plug-in to add drop-down boxes to the header:
http://pixopoint.com/products/multi-level-navigation/
It works great but defaults to a weird blue color that I haven’t attempted to change.

The Layout tab lets you set how many posts appear in each section. I like 3 to 5 posts in the carousel (Featured Posts #1); 6 posts in Featured Posts #2, and 10 or more posts in the News section at the bottom. For Featured #2 display type, leave it at “node based” (this will allow your photos to be displayed). Leave both News Display Types at Per Line (you can play with them later). For Single Post Display, I only check “Post Thumbnail,” but it’s OK to check any other items you want to appear when the reader clicks away from the magazine front page to a post. Leave Position of Custom Fields checked to Before.

Now click the Design tab. At the top, choose whether you want a 2- or 3-column layout, and left or right sidebars or both. At the bottom, set the background color for the theme by # and then a 3- or 6-digit hex-HTML color code. For web safe hex-HTML colors, see this chart:
http://html-color-codes.com/
To expand the range of colors, use this tool:
http://www.colorschemer.com/online.html

To get rid of the ugly search box in the header bar, go into the arras-theme folder from your File Manager in cPanel and open the header.php file in Code Editor. Around Line 92 in Arras 1.5 (Line 83 in 1.3.6), delete the following code and save:

<div id="searchbar">
 
</div>

Time to add your images. The sticky posts will need wide images to look their best. For each sticky or Featured Post category post, upload an image directly into the WordPress Library from the Media panel in the left toolbar. (Don’t place any image code for inside the post, or it will appear twice.)

Here’s a screenshot of the Arras 1.4 control panel showing the new WordPress 2.9.X thumbnails feature. You no longer need to use the “Custom Fields” box to its left to place thumb images on your site. Simply click “set thumbnail” and select the image you uploaded earlier to your media library.

Arras Screenshot

The following instructions apply only to Arras 1.3.6 and the Tim Thumb plug-in:

If you prefer the look and feel of Arras 1.3.6, you’ll need to contact your hosting provider to make a simple change on their end, and you’ll have to be willing to change some coding in CSS and PHP. I’m not an expert coder by any means, but I’ve gleaned enough information from the Arras forums to put together a decent looking magazine style site with it and am sharing the information here. If there’s a problem I haven’t figured out, and you know how to solve it, please jump in with a comment.

Go over to the post you want it to appear in and scroll down to the Custom Fields box. Enter the field name as thumb. In the value box, paste the URL that you copied from the library. Click update. Your image is now in the post, but it won’t be visible until you make a change with your hosting provider.

After you’ve set up the look and feel and have uploaded some images, it’s time to contact your hosting provider and get the mod_security whitelist rules changed for your domain so the Tim Thumb plug-in that installs with Arras will display your images properly. Hostgator is right on top of this problem: simply open a livechat session and type in the following:

I’m running the Tim Thumb plug-in on one/some of my sites. Please add the appropriate rules to mod_security for www.yourwebsite.com and whitelist for the domain.

If the Hostgator tech is new and doesn’t know what you’re talking about, tell him you’ve already asked them to do it with other sites and it should be in their tech manual. Other hosting companies might need more hand-holding. You can find more information about this fix here:
http://code.google.com/p/timthumb/issues/detail?id=8

Keep your site open while the tech fixes it; when he’s finished, you should see your thumbnail images on your front page. I have no complaints about the Tim Thumb plug-in; it works great. I’m batching up all the sites I want to convert to Arras and will have Hostgator fix the whitelist all at once for them. I admit that having to contact your hosting provider is a PITA, especially if they’ve never had to perform the fix before. Also, if what I’m describing is actually a security concern, please post a comment below.

Now it’s time to do some coding to pretty up the theme. I do my coding from the Hostgator cPanel in the Code Editor screen. If I screw up, I just FTP the default version of the file from my copy of Arras on my hard drive. If you’re making extensive mods, save a copy of the file after each one so you don’t have to start all over again.

To get rid of the date and number of comments across the Featured Post thumb images, click into the Library file and open filters.php in Code Editor. Around Lines 41-42, change this code:

$postheader .= '<span class="entry-meta"><a href="' . get_permalink() . '">
<span class="entry-comments">' . get_comments_number() . '</span></a>';
	$postheader .= '<abbr class="published" title="' . get_the_time('c') . '">'
. get_the_time( get_option('date_format') ) . '</abbr></span>
 
';

to this code:

$postheader .= '<span class="entry-meta"><a href="' . get_permalink() . '">
<span class="entry-comments"> </span></a>';
	$postheader .= '<abbr class="published" title="' . get_the_time('c') . '">
</abbr></span>
 
';

This fix works great for taking out the text, but it still leaves the ugly black bar across the thumb images. I have the code for taking them out, but it also takes out the bar across the carousel banner at the top, which I want to keep. I’m living with it for now; suggestions are welcome.

I’ll add instructions for changing the color scheme and a custom header at a later date. If you want to use Arras, it’s worth registering for their users forum at
http://www.arrastheme.com/forums/

You can also dump any CSS style into the Arras CSS folder, and there are plug-ins for a newspaper style, as well as translations, none of which I’ve tried.

Have fun with this great theme.

Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

→ 25 CommentsTags: Site Building Tools