Introduction Back to top
Aries is a minimalist, elegant, and highly customizable WordPress themes. I bundled two themes in the package, the one with the right sidebar, and another one with the left sidebar. If you have a skills in CSS and HTML, you can actually create the 3 column version for this design.
This theme is not a premium theme. It is a limited edition, an exclusive WordPress theme. Only 12 peoples in the world will use it. To fully understands what Aries can do, or can't do, please read this documentation thoroughly. Contact me if you have any question, I will try my best to respond.
Aries is developed for WordPress 3.0+ version. It has been tested and performed fantastically on modern browsers. As a reminder, we did not design Aries for Internet Explorer 6 and 7.
Best regards, Mohd Huzairy.
Features Back to top
Aries known features so far:
- Widgetized Sidebar — You can arrange your sidebar items easily. We even styled the calendar widget for your pleasure. But beware, never put a search form widget, it looks so uncool. Besides, Aries already have it's own search box at the top of the header.
- WordPress 3.0 Custom Menu — Aries supports the new WordPress custom menu. You can enable it in Dashboard » Appearance » Menus. Now you can arrange your own links easily. But, too many links would break the top level menu area in Aries. To use the dropdown menu, please use Shailan's Dropdown Menu plugin.
- Built-in Asides Post Type — To enable the asides post type, tag your post with "asides" category and it will works like a charm. Just make sure you only throws in a text, not a lists, or images.
- Built-in Related Post — This feature has been hardcoded into Aries. You no longer need to use additional plugins to display your related post. But, if you want to display the related post with the thumbnail, you may use additional plugin to do so.
- Built-in Share Options — Readers can share the post with others using three social services: Twitter, Facebook, and StumbleUpon. No need to use additional plugins to share your posts.
- Built-in Breadcrumb Navigation — Aries has it's own breadcrumb navigation to ensure the readers know their current location. The breadcrumb works in all pages, including the search result's page.
- Built-in Wp-Pagenavi style — Aries comes preloaded with the CSS styles for WP-Pagenavi plugin.
- Highlighted Post Author Comments — Readers can easily spot the post author comments since it is now differentiated from normal reader's comment.
- Image-less — Aries didn't have a single image file. Aries is utilizing the power of CSS3, along with HTML5.
- Lightning Fast — Since Aries didn't have an admin panel and additional theme hooks, this theme performed extremely fast. Besides, Aries didn't have any image files, and using well coded CSS and HTML.
- Two Layout Options — Aries original design is using a right sidebar. However, if you finds that the left sidebar is much cooler, you can use the left sidebar version which is bundled in the package.
- Well Coded and Clean CSS — Apparently, I am not a fan of single-line CSS code, so I opted out by using the multi-line CSS. In Aries CSS stylesheet, I commented the section of the selector, so that you can make your customization quicker.
Aries unsupported features:
- Custom Admin Panel — Unlike other modern WordPress themes, Aries didn't have a custom admin panel. But thanks to that, Aries performed much faster since it eliminates the custom theme hooks, additional PHP codes, and additional function request from the server.
- Threaded Comments — The only reason why I didn't implement this feature is, it is not cool to the eyes. It makes the comment section looks complicated, and crowded. If you insist on using threaded comment features, I suggest you use Disqus, or Intense Debate.
Usage Back to top
Basic usage — After you downloaded the themes, you will get a zip file named aries.zip. I suggest that you make a backup copy of this file. Then, unzip it, and you will see a folder named aries. Inside the folder, you will find three folder: aries_left
, aries_right
, and documentation
. Choose which theme you want to use(aries_left or aries_right), and upload it to your server's themes folder. Browse the themes in Dashboard » Appearance » Themes. Activate the Aries themes and there you go.
Using border for images — By default, the image in your post is borderless, except for the wp-caption's images. To apply a border to your image, you need to add an extra classes named frame
in the <img>
tag. See the example below:
<img src="http://yourwebsite.com/wp-content/uploads/2010/12/pic.jpg" alt="" title="1202" width="500" height="370" class="frame size-full wp-image-124" />
Note: The maximum image width is 500px. Use a pics larger than that will cause a chaos.
Using wp-pagenavi instead of using the default page navigation — To enable the WP-Pagenavi in Aries, please open the pagenavi.php
in the themes folder. Below is the content of the specified file:
<!-- Replace the code below with wp-pagenavi code, if you have the plugin installed --> <div id="pagination"> <p class="previous left"><?php next_posts_link('← Older posts') ?></p> <p class="next right"><?php previous_posts_link('Newer posts →') ?></p> </div> <div class="clear"></div>
Now, replace all the codes and make it become like this:
<?php wp_pagenavi(); ?>
Next, uncheck the "Use pagenavi.css?" from the WP-Pagenavi plugin's setting to enable Aries' built-in WP-Pagenavi styles.
That's it. You can now start using the themes.
Customize Back to top
Changing the link's colour — To change the link's colour is pretty easy. Open the style.css
in the themes folder, and locate this piece of code (Line 28):
a { text-decoration:none; color:#a5956c; /* Change the links colour, please use the hex color code */ }
Replace the #a5956c
with your desired colour. The value needs to be in hex-color code. Save the file to see the result.
Use Google Webfont — By default, Aries is using Times New Roman(for headings) and Arial(for body text). If you prefer other fonts, especially the ones that provided by Google Font Directory, you can use it by following these simple steps. First, let say that you would like to use the Droid Sans font. Click "Use this font" tab, and copy the code provided, see below for examples:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Then, open the header.php
files in the themes folder. The excerpt of the codes should be like this:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title('»', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <link rel="alternate" type="application/rss xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <?php wp_head(); ?> </head>
Paste the codes that we copied before under the rel=stylesheet
on line 7. See the example below:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title('»', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <link rel="alternate" type="application/rss xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <?php wp_head(); ?> </head>
Save it. Now, we need to modified the codes in stylesheet. Again, open style.css
, and locate this piece of codes(Line 76):
#header h1, .entry-title, .single-entry-title, .entry-content h3, .entry-content h4 { font-family:"Times New Roman", arial, verdana; }
Replace the "Times New Roman" with "Droid Sans". See the examples below:
#header h1, .entry-title, .single-entry-title, .entry-content h3, .entry-content h4 { font-family:"Droid Sans", arial, verdana; }
Save the file, and you are done.
Use background image for site background — To use a background image, you need to have an image files, preferably the ones that can be repeated. Now, open the style.css
, and locate this piece of codes (Line 12):
/* Common HTML tags */ body { font:80%/150% arial,sans-serif,verdana; background:#fff; color:#666; border-top:10px solid #eee; }
Then, replace the #fff
with #fff url(images/bg.png) repeat
like below:
/* Common HTML tags */ body { font:80%/150% arial,sans-serif,verdana; background:#fff url(images/bg.png) repeat; color:#666; border-top:10px solid #eee; }
I'm assuming your background image(bg.png) is saved in theme's image folder. Save it, and see the result.
More? — You can always contact me if you had problems regarding Aries' customization.
Support Back to top
Licensing Back to top
Aries, as a part of 12 Designs Project, is released under GNU Public License (GPL). As a customer, you are free to use, modify, distribute, or even sell it. But you can't claim that you are the original designer/developer of this works. By stating it is free, it is free as in free speech, not as free in free drinks.
Changelog Back to top
- Version 1.0 — Aries successfully launched on 26th December 2010.
Note: New updates will be delivered through email, for free.