Arthemia: Wordpress Magazine Theme Released

2.05.08 at 23:53 in Wordpress and Themes # 255 Comments

Here is another theme from me: Arthemia. What is Arthemia actually? I don’t really care to be honest. But, at least I can say, this theme is way better than my previous theme. Well, I learn a lot.

Arthemia is combining a magazine and a weblog into one; it is not too magazine-ish nor too blog-ish. The front page of Arthemia shows the headline and featured post of yours along with the pictorial representation, that’s the magazine style, while the rest of your post will be shows sequentially just like a usual weblog. In the middle of the front page, Arthemia has a nice blue-and-black category bar which will help your readers exploring you site. At the bottom, Arthemia is outfitted with a blog must-have section, a three-list of favorite posts.

A Drop-down Menu?

Exactly. A drop-down menu is now becoming a standard navigational tools. Many Linoluna users said that a drop-down menu is quite a must-have thing in a website. Well, I am giving you what you want. It is a black elegant drop-down menu with a nice blue background when you move your mouse to hover it.

Automatic Image Resizer?

Yup! Arthemia uses a PHP Script to automatically resize the thumbnail image. Fabulous, huh? Just upload any image using Wordpress image uploader, and the thumbnail is there. Thanks to Darren Hoyt for the awesome release. There is a folder called ’scripts’ which contains the PHP image resizer scipt, timthumb.php. Inside the folder, there is another folder called ‘cache’. You have to make this folder writable by changing the folder attributes to 777 using any FTP clients or SSH access.

What plugins should I have?

For the best functionality, you should have the plugin WP-PostView, WP-PostRating, WP-Print, WP-Email installed. Those plugins are from LesterChan.net.

WordPress version? Browser compatibility?

Arthemia is build to support Wordpress 2.5. A gravatar support has been included. Anyway, if you want to use the theme in WP 2.3, you have to remove the gravatar code in comments.php. The theme has been tested in several browsers such as Firefox 2, IE 7, Safari 3, and Opera 9~~, and even IE 6.~~ By the way, dropdown menu and link hovering don’t work in IE6. ~~Everything is working like a charm.~~

Great, how to install this thing?

It is very easy; just as simple as this 3-step installation:

Download and extract the zip file.
Upload the theme file to your server at “/wp-content/themes/” folder.
Activate the theme. (Admin Panel -> Presentation -> Themes)

I’m done. Any configuration I should do?

Apparently YES. Arthemia is not really a plug-and-play theme. But believe me, this is not as difficult as it seems.

The theme is widget-ready. By default, the navigation is divided into three sections: the top navigation bar, the right sidebar, and the footer. Everything in the sidebar and footer may be customized easily through WP Admin Panel. The links in the top navigation bar should be edited manually using any text-editor of your favorite. I prefer Notepad. The top navigation bar can be customized by editing the header.php file.
To use Arthemia, you need to have a category named “Headline” and “Featured”. Posts in those two categories will be shown in the headline and featured section of the front page.
To show the category bar in the front page properly, you have to put the correct category IDs to this line in the index.php file:
<?php $display_categories = array(5,6,7,8,11); $i = 1; foreach ($display_categories as $category) { ?>
Notice that 5, 6, 7, 8, and 11 are the IDs of the category to be shown in the category bar.
To show the post list in the front page properly, you have to put the correct excluded category IDs to this line in the index.php file:
<?php $page = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=-9,-15&paged=$page&posts_per_page=2"); ?>
Notice that 9 and 15 are the IDs for the category: Headline and Featured. That will make no duplication shown in the front page. posts_per_page=2 means there are 2 posts listed per page. The navigation links are shown after the last listed post. You can change that to Lester-Chan’s WP-Pagenavi if you like.
Thumbnails across the theme are configured using the Custom Fields. You should add a custom field called “Image” in every post and put the image filename and folder within the custom field value. For example, custom field name: Image; custom field value: wp-content/uploads/2008/04/pool.jpg. How about the different image sizes for each thumbnails? Well, no worry for that because Arthemia has its own image resizer. Just upload one big-sized image and everything is under control.

So, what now? Go download or see the live demo!

Anyway, if you find the theme cool, helpful, inspiring, or whatsoever, I guess it’ll be a pleasure to donate me some money. I will be really thankful for that.

Changelog:
V1.0 First public release
V1.1 Added the pagination support for the blog post lists in the front page.

Note:
Arthemia theme may use the same CSS Class and IDs with some plugins out there. If you install this theme and then find the layout awful, there might be some conflicts with one of your plugin. Recently, I find that Arthemia might have some layout problem (the top navigation bar) if you have “Mike Jolley and Mike Cherim’s Secure and Accessible PHP Form” installed. But now the problem is solved!

im-FAQ 1 : How to get the thumbnail image resizer working??

Actually the explanation above is clear enough for you to get the thumbnail working, but in case you missed something, you could read these step-by-step to-do list. Before you start, make sure that the image is already there, located in your own server. The script can not generate thumbnails if your image is located outside your server (eg. Flickr photos, Picassa, etc.)

Be sure you have PHP 4.3 with GD-library installed on your server. PHP 5 is better.
Start from a fresh copy and upload the theme at wp-content/themes/arthemia. Do not change ‘arthemia’ to anything because it will break everything.
Make the folder “scripts” and “cache” writable (777). These folder are located in wp-content/themes/arthemia/ and wp-content/themes/arthemia/scripts/. You can do this using FTP or any online file manager from you web hosting company.
Add a custom field in the post. The custom field key MUST be Image (letter cases are important).
Fill the custom field value with the path of your image. It MUST start with wp-content I repeat it MUST start with wp-content. If you have the image located at http://www.yourblog.com/wp-content/uploads/2008/06/file_name.jpg then the key value of the custom field MUST be wp-content/uploads/2008/06/file_name.jpg (Notice there is no http://www.yourblog.com/ in the value)
If you still have the problem, read the step-by-step procedures again, and again, and again. Trust me it’s working and many have succeeded making this thumbnail thing working.

If you still have problem about the thumbnail image resizer, please read the discussion below. The problem may lies on the web server. FYI, Windows-based server cannot use FTP to make the cache folder writable.

im-FAQ 2 : Why the page is not rendered correctly? The search box and button in the navigation bar is not positioned as it shoud be!

First, you have to sure you have to start from a fresh copy because you may have edited something accidentally. Second, be sure you deactivate ALL plugins before installing the theme, especially plugins that generate contact pages, forms, custom post excerpts, etc. Those plugin may use the same CSS classes and IDs with Arthemia’s CSS and there would be CSS conflicts that would change the appearance of the search box and button. After everything is fine, activate the plugin one-by-one and be aware of plugins that import additional CSS to the theme.

im-FAQ 3: What the hell is im-FAQ?

im-FAQ is a list of incredibly most frequently asked questions; recently added to this post to make all of you smile and happy. I hope it works.

My next theme: Platformate with automatic thumbnail assignment

Anyway, it seems that this thumbnail assignment thing has gone way to complicated to some people. Therefore, I’m planning to have an automatic picture assignment feature in my next theme: Platformate. Thumbnails are automatically generated, resized, and assigned. So you can just blog normally, add pictures to your posts just like usual add-media/add-image Wordpress feature, forget the complicated custom-field thing, and the first picture in your post will be automatically assigned as the image for thumbnail generation.

255 Comments

David said:

hi michael …
finally it work!
gw tanya sama hosting gw hal2 yg lu suruh gw tanyain dan betul! Ternyata servernya ngga support GD library (whatever it means .. ) …
so setelah pindah server, gw coba dan …..
berhasil !!!!

Thanks Michael for awesome template! God Bless You!

# 255 - 5 July 2008 at 09:09 pm
Umorvitreo said:

Another thing:

The thumbs exists in the uploads folder. They only are not shown in the page…

# 254 - 5 July 2008 at 02:49 pm
Umorvitreo said:

Hi everybody.

Michael, your template looks very nice and so useful.
I’m tryin’ to use it for a new blog (http://www.cibele.it). Like some others guys I have some problems with thumbs…
I have controlled my database and I’ve seen that my php version is 4.7.
I should work but it doesn’t
I’m going crazy with it…
Other things are all ok (Custom Field, Permissions, etc.).

This blog is located in Italian. Could it be a problem with scrips??

Thank you (everybody) very much for help…

# 253 - 5 July 2008 at 02:31 pm
Steve said:

Also, for a next release iteration, you might want to make the top menu part to include the wp_list_pages() function which I implemented in lu of the static menu and it worked great. Even formatted with default CSS the drop downs!

# 252 - 5 July 2008 at 01:29 pm
Michael (author) said:

chet
1) You have to manually edit the file header.php to add the links in the navigation bar. Your page go nowhere because the nav bar is not set to automatically list your pages. One may have dozens of pages and I bet they do not want to list all of the pages there. That’s why the nav bar is configured for manual listing.

2) how do you test the 404 Not Found page? Anyway, have you tried to use pretty permalinks? It is a good way to know wheter the 404 Page is working or not.

FYI, not every not-found request are directed to 404 page. Some will simply display a short message: ‘Sorry, no post found.’ or ‘Sorry, no category found.’ To test the 404 Page, try to access some files and images instead of posts and categories. And make sure that the file/image is not exist.

3) well, the pictures in the post list are not thumbnails. It is basically a part of your blog post.

ronggo
Selamat! Hehe.. Hah? Go international? Gak segitunya kali..hehe..msh bnyk desainer2 Indonesia lain yg jauh lebih hebat.. Hehe.. Btw, syukur deh gak sia2 ngebalesin comment satu2.. Pada berhasil jg akhirnya.. Hehe..

# 251 - 5 July 2008 at 10:46 am
Ronggo said:

salot ni ma pak jubel yang udah GO internasional lewat themnya , sampe ber-jubel pula komennya, oya pak jawap semua pertanyaan pake bahasa indonesia aja biar mereka yang orang bule belajar bahasa indonesia, cinta dalam negeri,hehhe
aya dah berhasil pak cek ya
kasih komen
http://tanpatinta.com

# 250 - 5 July 2008 at 09:39 am
Chet said:

Time for a couple of new questions.

1) The page navigation bar. I see how to change what it says, but how do I link a page to those places? When I click on “About”, I get 404 error from IE.

When I create a page using the WP dashboard, I can preview it- it looks fine. But it seems to go nowhere when published.

2)About 404-Page not found… that doesn’t seem to be working.

3)For pictures to show up in the Recent Posts box (under the Category Bar), they need to added in to the post, right? That’s how I got it to work.

Thanks…that’s all for now.

# 249 - 5 July 2008 at 06:39 am
Chet said:

Hi Mike…

I got it to work!!

The method was a touch drastic. I just deleted the entire WordPress installation and started over again. I think having switched themes a few times just got things a bit messed up.

Thanks for your help!

Chet

# 248 - 5 July 2008 at 05:46 am
Chet said:

Whoops…that didn’t work:

[Fri Jul 4 06:07:01 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/404.shtml
[Fri Jul 4 06:07:01 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/wp-includes/js/thickbox/loadingAnimation.gif
[Fri Jul 4 06:07:00 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/500.shtml
[Fri Jul 4 06:07:00 2008] [error] [client 98.113.13.158] Premature end of script headers: /home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts/timthumb.php
SoftException in Application.cpp:544: Directory “/home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts” is writeable by group
[Fri Jul 4 06:07:00 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/500.shtml
[Fri Jul 4 06:07:00 2008] [error] [client 98.113.13.158] Premature end of script headers: /home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts/timthumb.php
SoftException in Application.cpp:544: Directory “/home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts” is writeable by group
[Fri Jul 4 05:59:22 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/404.shtml
[Fri Jul 4 05:59:22 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/wp-includes/js/thickbox/loadingAnimation.gif
[Fri Jul 4 05:59:21 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/500.shtml
[Fri Jul 4 05:59:21 2008] [error] [client 98.113.13.158] Premature end of script headers: /home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts/timthumb.php
SoftException in Application.cpp:544: Directory “/home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts” is writeable by group
[Fri Jul 4 05:59:21 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/500.shtml
[Fri Jul 4 05:59:21 2008] [error] [client 98.113.13.158] Premature end of script headers: /home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts/timthumb.php
SoftException in Application.cpp:544: Directory “/home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts” is writeable by group
[Fri Jul 4 05:58:12 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/404.shtml
[Fri Jul 4 05:58:12 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/wp-includes/js/thickbox/loadingAnimation.gif
[Fri Jul 4 05:58:11 2008] [error] [client 98.113.13.158] File does not exist: /home/thefo33/public_html/500.shtml
[Fri Jul 4 05:58:11 2008] [error] [client 98.113.13.158] Premature end of script headers: /home/thefo33/public_html/wp/wp-content/themes/arthemia/scripts/timthumb.php

# 247 - 4 July 2008 at 08:12 pm
Chet said:

Thanks Mike for taking a look.

Here’s a piece of the error log file. I haven’t a clue what I’m looking at.

# 246 - 4 July 2008 at 08:11 pm
Lior Iluz said:

Hi,
Thank you for this amazing theme.
I translated it to hebrew which is a Right-to-Left language and now, for some reason, when using IE-7 the drop down menu drops it’s sub-menus left than it’s supposed too…
you can see it here: http://test.lioriluz.com/
in firefox it works great and on IE-6 as you know, it doesn’t work at all…

Any ideas?

# 245 - 4 July 2008 at 04:10 pm
Michael (author) said:

Chet
I accessed the thumbnail image on your site and I found 500 Internal Server error. There might be something wrong with your server and I suggest you to see the error log in your web hosting control panel and fix that problem first.

# 244 - 4 July 2008 at 10:47 am
Chet said:

Hi Mike,

Great theme…but this picture thing is driving me mad. I’ve created a couple of dummy posts (”Welcome!” and “Forgotten Borough?”) Both should have a photo with them.

I entered the Custom Field info as instructed…Image with a capital I and the photo info (http://theforgottenborough.com/wp/wp-content/uploads/2008/07/BatterySunset.jpg) but starting with wp-content. I made sure the scripts and cache permissions are set to 777.

The result: nothing. I’m on IE7.

Any ideas?

Thanks…

# 243 - 4 July 2008 at 09:03 am
michaeljubel (author) said:

chris lagdameo
yes, it is of course possible. add <?php the_author(); ?> wherever you want the author name to show up within The Loop.

poer
yup, I am Indonesian, proud Indonesian. btw jadi gak enak nih dikira orang bule. huahahahaha..

Eli
yes, that’s what CSS stylesheets are for. Anyway, if you add an image using the Add Image/Add Media icon, you can align the image whatever you like and WP will automatically add CSS classes to the image: alignleft, alignnone, or alignright. It seems I forgot to add those classes to the CSS. You can add it by yourself. Open the file style.css and add these lines:
.alignleft { float:left; }
.alignright { float:right; }
.alignnone { float:none; }

A
We use conditional statements to determine which part of the sidebar will be shown in various conditions: home, archive page, and single post.

The error occurs because you do not use WP 2.5, or you use WP 2.5 but you disable the Gravatar support. You can either open the file comments.php and delete the command or simply enable the Gravatar support in your WP Admin Panel.

# 242 - 4 July 2008 at 08:25 am
A said:

Hi again- i don’t know what those conditional statements are for the missing sidebar on my post. It’s only like that one that post, too, the others it’s okay, so I don’t know where i should be going to fix this. However on all of them the comments show up as:

fatal error: Call to undefined function get_avatar() in /home/ohsodebo/public_html/wp-content/themes/arthemia/comments.php on line 39

D:

# 241 - 4 July 2008 at 08:03 am
Eli said:

Thanks michael for a fabulous theme. one question though.

When I insert an image into a post, the first line of the text basically starts at the bottom and right of the image. In order to make the text start to the right AND at the top of the image I had to manually enclose the image in a div tag with “float:left”. how do I do what I need without manually doing this?

Thank you so much!

# 240 - 4 July 2008 at 06:45 am
poer said:

sorry michael, i thought that u r a foreigner, never thought that u r indonesian

coba liat ada hutagalungnya, pasti ngerti aku hihihi…

btw, great job mas, keren abis themesnya, ga kalah sama revolution dan freshnews.

# 239 - 4 July 2008 at 12:05 am
chris lagdameo said:

Hi, very nice theme

I was wondering if you could include the author’s name on each post/article in this theme? is it possible?

# 238 - 3 July 2008 at 11:35 pm
Michael (author) said:

AndrewE

Your comment is not lost. I’ve just rearranged the layout of the comment section in my blog and add comment pagination support.

Open index.php and find the lines that pull out the categories for the category bar. Remove it and add these lines.

<div id="middle" class="clearfloat">

<img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/category.png" alt="" />

<br/>

<?php $pages = array(5,6,7,8,11); $i = 1; foreach ($pages as $ID) { ?>

<div id="cat-<?php echo $i; ?>" class="category">
<?php query_posts("page_id=$ID")?>
<span class="cat_title">
<a href="<?php echo get_permalink($ID); ?>">
<?php the_title(); ?></a></span>

</div>

<?php $i++; ?>

<?php } ?>

</div>

Replace 5,6,7,8,11 with your page IDs.

Anyway, the code above is not tested yet and I suggest you to read further at the Wordpress Codex.

# 237 - 3 July 2008 at 09:37 pm
AndrewE said:

Michael,

Really sorry to reiterate my comment, but I guess it must have slipped through the net. You’re getting a lot of support requests and I’m sure you’re very busy. Kudos to you for keeping this whole show going.

If you get a minute, I’d appreciate it if you could give me a little advice on the following:

I’m looking at the index.php file for arthemia. More specifically I to change the ‘Browse Categories’ middle section that displays categories and descriptions.

Rather than display categories I want each of the 5 sections to link to an individual page on my blog. I still want the same structure and layout as found in the default setting but just want to link to pages rather than categories.

Please let me know if this is possible and how I might go about achieveing this. In return for your good will, I’m planning a separate section on my site that outlines your theme. This will drive traffic your way.

Thanks so much for your help.

Best,

Andrew.

# 236 - 3 July 2008 at 06:51 pm
Michael (author) said:

eam + rich
Great!!! For everyone, thorough reading will help you find the way to solve the thumbnail problem. The answer is here and is always here. this ‘theme-tweaking’ thing might be a little frustrating and painful but you will learn a lot about Wordpress after you finally make it.

Good luck.

# 235 - 3 July 2008 at 01:48 pm
eam said:

Hi Nicole:

the custom field is located in the Wordpress site. When you’re writing a post, scroll down and just below where the trackbacks, is the custom fields. just type Image on the “key” section(capital I) then put your image name on the “value” that has to start with wp-content/uploads/2008/07/imagename.jpg (no need to put the http://address), then hit add custom field. don’t forget to tick headline or featured in the categories so it will show up where you want it.

the image for header is located in your FTP folders in Arthemia theme, there is an “images” folder. find the file headline.png and replace it with your very own exact filename headline.png. to double check that it loaded your own header image, just click view. After that, go to your wordpress site and refresh (press f5 on your keyboard) and it should have your new image.

i hope this helps you! cheers!

-mae

# 234 - 3 July 2008 at 12:54 pm
rich said:

hi… i was able to fix my headline and feature image by just reading michael’s instruction..

i just changed the ff folder’s chmod / permission access to 777.

timthumb.php - 777
cache - 777
all files inside arthemia -777
and the folder arthemia itself - 777 ( this is the one i missed, that’s why the pictures are not showing )…

you need to be at wp-content->themes folder… click the arthemia folder then change access to 777…

wow.. it works now! im so happy!

# 233 - 3 July 2008 at 10:31 am