How To, WordPress, WordPress Themes

Hacking the Arras Theme

First off, I have to say that I love the Arras Theme and think it’s the coolest one out there. The other day I was adding some content to my site and I hadn’t upgraded to WordPress 3.0 yet so I decided to do the upgrade. I usually like to upgrade all the plugins and themes that have upgrades available before I upgrade WordPress just to make sure things are compatible. However, after upgrading WordPress and the Arras Theme I found that things didn’t quite look the way they did before the upgrades. Some of my issues were because I didn’t bother to check theme settings or save theme files that I had modified before I updated the theme. In my defense, I must say it had been a long time since I had setup the theme and had pretty much forgotten what I had done to customize it (yeah, it’s a lame defense ;) ).  Anyway, here’s a list of what was different after the upgrades:

  • PHP errors on page because it was using PHP4, not PHP5
  • Colors were different
  • Links for pages across the top (Home, Resume, etc.) were missing
  • Thumbnails were not displaying in the actual posts
  • No picture in the header

Some of these were pretty obvious, but I’ll go through each one so I can save myself time the next time I need to do this. :)

PHP errors on page because it was using PHP4, not PHP5

This was resolved with a simple .htaccess file that I needed to configure on the server the site is hosted on. By default it uses PHP4 but a lot of stuff is using PHP5 now. The fix was easy, I just needed to create a .htaccess file in the site’s root directory and add the following line to it:

AddType x-mapp-php5 .php

Colors were different

The site background color and the background color for the tables was different. Since I didn’t bother to check or document what they were before I updated the theme I didn’t remember what they were. So, I just forged ahead, kicking myself for not heeding that little thought that said I should take some screenshots and check settings before I did the upgrade. I didn’t think the upgrade would really change much. Oh well, I learned. First off, I needed to change the backgroud color in the “Custom Background” section under the “Arras Theme”. I just clicked the “Background Color” box and fiddled with the color chooser until I found something I liked. Next I wanted to change the background of the tables and after some fiddling I figured out that the color was f7f6f0 and the setting was located in “wp-content/themes/arras-theme/css/styles/default.css”. The line that I changed was:

#main                                   { padding: 10px 10px 0; background: #f7f6f0; border: 1px solid #d3d1c7; }
I changed the background to #FFFFFF and then I then noticed that I needed to change it for the footer too and that was done by modifing the following line of the above mentioned file:

#footer                         { margin: 20px auto 0; width: 980px; background: #ECEBE6; padding-bottom: 10px; border: 1px solid #CCC; }

I changed the background to #FFFFFF and then I was good to go. I’m not sure I like the white but at least I know where to go to change it now.

Links for pages across the top (Home, Resume, etc.) were missing

This one was a little strange, but I figured it out. I went to “Appearence > Menus” anc created a new menu named “Nav Bar” and then dragged the links for the Pages that I wanted displayed for the Pages section on the left to the new Nav Bar I had created on the right. After doing that they appeared.

Thumbnails were not displaying in the actual posts

To display the thumbnail image on each post, but not on each page, I found a nice little post from IT by MITCH. It’s a two step process. First you need to edit some of the config files for the Arras Theme and then you need to add a custom field on the post/page you don’t want the thumbnail to be displayed.

For the first part, the code, do the following (for me, the file is located in “wp-content/themes/arras-theme”:

  • In Functions.php, add the following line:

    Define( ARRAS_DONT_DISPLAY_THUMB, 'dontdisplaythumbinpost');

  • In library/template.php (for me it’s in “wp-content/themes/arras-theme/library”, find the line:

    if ($post) $id = $post->ID;

  • Add the following code after the above mentioned line:

Once I did the above, all I had to do was create a custom field on the page I didn’t want to have the thumbnail displayed. Once it’s created you can then just select it form the drop-down menu under Custom Fields for any of the other Pages or Posts you don’t want the thumbnail displayed on. To create it, go to a Page (or a Post) and under “Custom Fields” click “Enter new” and under Name put “dontdisplaythumbinpost” and under value put “1″. Once that was done I could select it on the Pages I wanted and set it to “1″ so the thumbnails wouldn’t show.

No picture in the header

To add a picture (background) to the header, I found a post on the WordPress forums (that I think I used when I first set the theme up ;) ) that explains how to set a custom background for the header. Basically, you have to modify the default.css file (the same one that I modified to change the colors) found in “wp-content/themes/arras-theme/css/styles/default.css”. Here’s what you need to do:

Find the following line:

#header { background: #000033; border-bottom: 5px solid #383332; padding: 0 0 15px 0;}

Then add the following within the header’s {} brackets

background-image:url(‘the url to your picture in http:// format’);

background-repeat:no-repeat;

background-position:center top;

It should all be on one line.

Other Stuff

I then noticed that it was recommended to add the WP-PageNavi plugin so I added it, activeted it and didn’t change any settings. And there you have it. This is what I did to hack the Arras Theme to get it like I wanted.

3 Comments

  1. rob

    Hi there. I too use the Arass theme, and am having some difficulty with it–but you seem rather savvy so I’m hoping you can help me. My problem is on posts, my author blog has the image above the ‘about the author’ text, whereas yours is justified properly to the right of the image. Did you have to do anything special to get this to work?

    I’m no web developer, but I can noodle around a bit. Logically it would seem this woul dbe something in the single post file (single.php), and that looks like the right spot, but I don’t see anything in there indicating how to move the image around. If you can spare a moment to help me out, that’d be great.

    I can’t post my file here for some reason (presumably, the PHP would cause an issue when loading the page)? Anywho, if you can help, let me know and I can send you the code in an email or something.

    THanks in advance!

  2. I don’t recall doing anything special to format the section you are referring to. I’m running version 1.4.3.1. What version are you running? I think you have the correct file, and here’s what my “single.php” file looks like. Hope this helps. Let me know if you have any more questions.

Trackbacks / Pings

Leave a Reply