AEXT.NET MAGAZINE » Wordpress

Get a 360 Degree Security For Your WordPress Blog

aextmag — Wed, 29 Dec 2010 02:34:20 +0000

Most of us are happy and contented using “Wordpress”; the so very popular blogging platform, as, it is fulfilling almost all our blogging requirements, but how long? Only till keep your WordPress blog secured from hackers or the worms of today that affect your blog. Why do I call them worms of today? There’s a reason for this. Where the worms were mischievous: like defacing your site, today, they attack without any prior signs and screw up your sites and even tend to eradicate you from Google list!!

It’s not that I am scaring the hell out of you; it has happened and may happen over and over again, if, you do not take precautions.

A stitch in time saves nine!! So, if you do not wish to drench yourself later, here are some tips to secure your blog from such worms and to block the holes that may occur during installation or after installing WordPress.

1. Update the software

There is no as such software system which is completely impervious to bugs and susceptibilities. If you are thinking that something can go wrong with your site, soon you will be facing problems. There are frequent attempts to exploit all kinds of software by people who are experts in doing this, those, whom we call ‘HACKERS”!!A good way to fight them is to keep your software up- to- date.

This lesson was well clear to the WordPress users when in September 2009, a wave of attacks spread across sites which did not use the latest version of the software. I guess you won’t wish that to happen with you. Moreover, when it’s so simple to keep your WordPress site up-to- date, why should you take a risk? The best part is that for the latest versions, you have the option to install automatic updates. You also receive notifications for every new upgrade. Then why keep your blog away from it?

If you aren’t using the latest version of WordPress, get it soon, as; sticking to the old one can invite the hackers with doors open.

2. Password considerations

Your user password keeps a hold of your blogging experience. So, a very important question is how to keep it protected. First of all, you should constantly keep changing your password to something that is out of the reach of one’s mind. What would make your password unique? Try avoiding common phrases and consider using numbers in your password. Having lower and upper case letters will confuse and make it different and the hacker will have to break his mind behind it.

When I ask you to constantly keep changing the password-I mean that change it at least once in six months. Another plus point for you is when you are using a program like ‘1 password for Mac or Windows’. It helps you to store your password secured in the browser and also find out strong and unique passwords, thereby, making it easy for you to change it.

3. Secret keys for WP-Config

The WP –Config PHP file in WordPress is an asset for you, as, it has all the database information which is needed by WordPress to connect its circuit-so to-speak. Not securing this file may lead to insecurity for the name, address, password of the MySQL database that stores all of your user info, blog posts and other valuable content. You may very well imagine now as to why it becomes necessary to use a secret key to prevent others from accessing your account. Now if you ask what a secret key is? It is a password with elements making it difficult to generate enough options to break through your security barriers.

How to install this secret key function: Go to- https://api.wordpress.org/secret-key/1.1/ and copy the results into this section of your wp-config.php file. And then you are ready to use a secret key for this section of your wp-config.php file.

4. Htaccess File in Check

This I consider as one of the most effective ideas. Once you have started using an htaccess file, you can lockdown your WP-admin directory by IP address. In more simple words, this will make sure that, only the IP addresses you specify, can access your admin dashboard URLs. Meaning, you are putting a ‘No Entry’ board for anyone else to try and hack your WordPress backend. To do this, simply create a file called .htaccess and add the following code to your file, replacing xxx.xxx.xxx.xxx with your IP address:

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName "Access Control"
AuthType Basic
order deny,allow
deny from all
#IP address to Whitelist
allow from xxx.xxx.xxx.xxx

Also remember that you can add multiple “allow from” lines. So, make sure that you add any IP addresses you plan on accessing your site from (ie Home, Office, etc). Keep in mind that most ISP use dynamic IPs and so your IP address might change on occasion. In case, you get locked out, just update your .htaccess file or delete it all together.

However, this obviously is not a good tip if you allow open registrations as you need to allow your users access to WP-admin.

5. Know Your File Permissions

Do you leave files or folders with liberal permissions? Now, this brings in chances that the hackers will be able to gain access to your site which obviously will irritate you. It is your WordPress installation method or the default practices from your webhost, on which the permission for files depends and at times may not be apt.

To know and understand as to what permissions are acceptable you can read it on WordPress Codex. You should also know that File and directory permissions can be changed either via an FTP client or within the administrative page from your web host.

6. Avoid using admin account

Using an admin account is like inviting the hackers for a battle and that too when you have no weapons with you. Actually, admin account is the default user account which is created with every WordPress installation. Knowing this; the hackers can, without too much thoughts, launch a dictionary in your site and surmise your password. So play a safe part and change or delete the username of admin account.

Imply them:

Now, when you have so many easy and effective options, will you still be carefree with your WordPress blogs? I don’t think so. Anyways, these are just few ways of securing your blogs from the irritating bugs. You can also make use of certain WordPress plugins like WP Security Scan, Secure WordPress and few other popular ones which provide protection to your blogs. Make use of them and these tips, because, ‘prevention is always better than cure’.

This post was written by Andrew Paul, BDM with WordPressIntegration, company with a team of experts specialized in PSD to WordPress conversion and integration. You can connect with the author @andrewpaul123

WordPress 3 and What You Can Do!

Bima Arafah — Tue, 13 Jul 2010 16:30:31 +0000

After a quite long awaited by many WordPress users all over the world, finally this world most popular blog portal launchs its brand-new version WordPress 3.0 a.k.a Thelonius.

Thelonius is the software version 13th which have been launched by WordPress until now. We’ll find not less than 2.700 changes and 1.217 bugs fixed inside it. The most striking change is its capability to run some blogs at the same time or generally called Multiside Capabilities (with WordPress MU). Before, each blogs on the web shall be run separately. This capability to run many blogs has been integrated into its brand-new version, so that it can be utilized easier. Bloggers are now be able to upgrade through upgrade menu on the WordPress or we can also download it manually. So what any other features can we maximize on it? Let’s now discuss it a lil’ bit deeper.

WPfromPSD.com is a leading PSD to WordPress coding shop.

New, username and password while installation

Some people urgently recommend to deactivate or even to avoid using default username and password which are username : admin and default password on every installations. Cause, there were many ways you could be “hijacked” possibly use to break its default username and password on this most crucial case if you’re using WordPress before this 3rd version. But you need it no more now, you’re free to define your username and password at the beginning of WordPress installation. So you don’t need to hack on your WordPress anymore to eliminate its admin default username and password.

Twenty Ten default theme

After all this time WordPress installation has been bundled with its default theme called Kubrick, now it’s no more with. WordPress now comes with its new bundled theme which’s named Twenty Ten! It’s very good with sweet 2-column display including widgetized sidebar and footer. And believe it or not, now WordPress is equipped with explanation documentation that facilitate anyone to know more deeper about WordPress details. You can check it through the source code from this twenty ten theme. It helps, doesn’t it?

You must know that this twenty ten theme is supported with some new features from WordPress 3, which are:

Background customization

Now with WordPress 3 you can change your background with no more trouble. As twenty ten shows us, on the picture below.

Then how to apply it to a theme? Easy, just write down this codes into functions.php file in your theme folder.

    // allows users to set a custom background
    add_custom_background();

if you’re done with the codes, you’ll see background menu on the Appearance section

New editor style

Many people may find some difficulties to see the style that’s being used by wordpress (previous version) when they’re writing. If you use to write on blog using windows live writer perhaps you can also load the current style that’s being used on your theme onto your visual editor. But you need it no more now, wordpress 3 gives easiness for us to be able to see our preview style while we’re writing on our tiny mce editor, pretty cool huh? Same as before, we need to write down the scripts below to functions.php file in our theme folder.

  // Apply visual editor with and match the theme style.
  add_editor_style();

After that don’t forget to create editor-style.css file in your theme folder and copy style.css file content then paste it onto editor-style.css file you just created. I suggest you to copy on the sections where your posts will be displayed, which are all classes .entry on style.css file.

Custom menu management

Many wordpress themes developers intentionally build theme option to their customers, what is the purpose? Just in order to ease them to manage menu navigation layout on their themes. Then, what wordpress 3.0 try to offer to us on this feature, in my opinion it’s proportional with any other CMS out there which also offer this kind of feature on their back-end pages.

Then how do you apply it on your own theme? It’s quite easy, you just need to define this menu on your functions.php file.

 add_theme_support( 'nav-menus' );

then attach this onto your header section

wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) );

Example custom menu

It’s simple, isn’t it? Then how if I forget to define it on the header section? Simple, now I’ll give some instances for us to explore a bit on this menu feature and let’s just get going. First we have to define our menu later on functions.php file on themes folder.

/*
 * CUSTOM FUNCTION STARTING FROM HERE
 */

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
    register_nav_menus(
        array(
            'top-menu' => __( 'Top Menu' ),
            'middle-menu' => __( 'Middle Menu' ),
            'bottom-menu' => __( 'Bottom Menu' )
        )
    );
}

As we see above, that I defined it for 3 kind of custom menus that I’d like to display it later.

Okay then, let’s create menu, give your menu a name TOP, MIDDLE, BOTTOM through “Menu Name” and choose category and page that you’re willing to include to each of your custom menus. I made an example and defined it below

After above we defined it for Top Menu, then find this script line on your header.php file

 wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

then change those lines with your custom Top Menu

// you can use this type too to call wp_menu_nav
// wp_nav_menu( 'sort_column=menu_order&container_class=menu-header&theme_location=top-menu' );

if ( has_nav_menu( 'top-menu' ) ) {
    wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'top-menu', 'fallback_cb' => '' ) );
}

In here is the process to match if there is a matching clauses found with top-menu, then it’ll return true value. You can see, I used has_nav_menu and wp_nav_menu functions. And here it’s the preview from what we’ve just done

How’s that, get enough? Yup I guess it’s enough, but how’s the way to show the description on each menus? Very good question. What’s the use of menu description as seen on menu management picture if we couldn’t display it. In here we need to do some hackings, write down the scripts below onto your functions.php file to display the menu description

// Hook nav rules to showing description page
// Look details information by this page wp-includes/nav-menu-template.php
// or by this link - http://core.svn.wordpress.org/trunk/wp-includes/nav-menu-template.php
add_filter('walker_nav_menu_start_el', 'description_in_nav_el', 10, 4);
function description_in_nav_el($item_output, $item, $depth, $args){
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    return preg_replace('/([^<]*?)" . "{$item->title}
{$item->post_content}<", $item_output);
}

Now we can see the condition from our custom menu.

And these are the source codes after we hacked walker nav menu above



Portfolio
See my work!

You can see it, if there’s a description then it’ll be displayed, but if there’s no menu description found then it’ll only return empty value (space). In here we see that we break title from menu and description from the menu itself, so that we’re free to customize the class from test-menu-title and test-menu-desc with bold, color, italic and anything you want! I think that’s enough for now. Have fun with your menu folks!

Further information about New Menu System:

Custom Post Types for Content Management

This feature is the most awaited feature by wordpress users and developers, the reason is through this feature we’re be able to use wordpress not only as a blog machine but also as full Content Management System. What I like from this feature is the content classification is run separately, for example when we build a portfolio. How, let’s just study it step by step.

Custom post types, in its usage for a portfolio it’s very ease us for content sorting which has particular posting category/type. There are so many things that we can create and develop through this custom post types, and I’ll give some instances to you how to create portfolio page using this custom post type and combining with your custom field. First of all, we need to write down the scripts below onto our functions.php file.

/*
 * custom post for super porto
 */

add_action( 'init', 'create_my_post_types' );

function create_my_post_types() {
    register_post_type( 'pf_cpt',
        array(
                'labels' => array(
                'name' => __( 'Portfolios' ),
                'singular_name' => __( 'Portfolio' ),
                'add_new' => __( 'Add New Item' ),
                'add_new_item' => __( 'Add New Portfolio' ),
                'edit' => __( 'Edit Item' ),
                'edit_item' => __( 'Edit Portfolio' ),
                'new_item' => __( 'New Portfolio' ),
                'view' => __( 'View Portfolio' ),
                'view_item' => __( 'View Portfolio' ),
                'search_items' => __( 'Search Portfolio Items' ),
                'not_found' => __( 'No Portfolio Items found' ),
                'not_found_in_trash' => __( 'No Portfolio Items found in Trash' ),
                'parent' => __( 'Parent Portfolio' ),
            ),
            'public' => true,
            'show_ui' => true,
            'menu_icon' => get_stylesheet_directory_uri() . '/images/picture.png', // icon defined
            'menu_position' => 20, // 5 - below Posts | 10 - below Media | 20 - below Pages
            'hierarchical' => true,
            'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail' )
        )
    );

    register_taxonomy( 'charge-type', 'pf_cpt', // in-case you do for commercial or free (such as foundation etc)
        array(
             'hierarchical' => false, // or true
             'label' => __('Free or Commercial'),
             'query_var' => 'charge',
             'rewrite' => array('slug' => 'charge' ) ) );

    register_taxonomy( 'client', 'pf_cpt', // in-case you have 2 or 3 boss (clients) at one project
        array(
             'hierarchical' => false, // or true
             'label' => __('Clients'),
             'query_var' => 'client',
             'rewrite' => array('slug' => 'client' ) ) );

    register_taxonomy( 'project-type', 'pf_cpt',
        array(
             'hierarchical' => false, // or true
             'label' => __('Project Type'),
             'query_var' => 'project',
             'rewrite' => array('slug' => 'project' ) ) );

    register_taxonomy( 'tasks', 'pf_cpt', // for specified your tasks
        array(
             'hierarchical' => false, // or true
             'label' => __('Your Task'),
             'query_var' => 'task',
             'rewrite' => array('slug' => 'task' ) ) );
}

Another reference about register post types, Function Reference/register post type. And then after we wrote down the codes above onto functions.php file, let’s now see the back-end display for custom post types that we’ve just created.

And our this editor page we’ll be looked like this after we clicked Add New Item

Click to see full size image

You can see what we’ve done through the preview above. On the bottom-left side Menu Pages (because we gave value 20 before) there’s our new menu including its taxonomies custom for controlling based on its related custom post type. On the middle section, we have title, editor, and custom field for editing needs. On the right side coloumn, there are custom taxonomies input for Project Type (Logo, Website, etc), Charge (Commercial, Non-Commercial, etc), Clients (Company A, B, C, etc) Your Task (WordPress integration, xHTML and CSS design, PSD Design, etc)

Now how about that? Anyone has a question?

“Yes, I have a question. How to create Custom URL for each items please?”

Okay, we have two tricks in here. The first one is with adding metabox on our editor custom post types pages.

 add_meta_box( $id, $title, $callback, $page, $context, $priority );

Write down these codes onto functions.php file to create meta box that will be our custom url

ID);
        $custom_url = $custom["custom_url"][0];
?>
    
        URL:       
    
   
ID, "custom_url", $_POST["custom_url"]);
    }
?>

And it’ll be seen like this later on your editor page

And the second one is with using custom field, I myself is prefer to use custom field. But once again, it’s all up to you. So now let’s we fill our custom post types first with some datas which will be displayed later on the portfolio page.

By default, you can display your custom post types on the portfolio page this way, write down the codes below on the template file for your portfolio page




 'pf_cpt', 'posts_per_page' => 10 ) ); ?>
have_posts() ) : $p_loop->the_post(); ?>
', '' ); ?>

ID);
  $website_url = $custom["custom_url"][0];
  if($custom != "" ) {

  ?>

 



 




?>

How’s the display, do you see the thumbnail that you’ve defined it before including its custom taxonomies you’ve determined on each items? Then how about to display and format the display? It’s easy. Later we’ll get it formatted based on each Project Type that you’ve defined through custom taxonomies and it’ll be indexed based on custom field with key = year and value = yyyy-mm-dd, and you have to know that in here I defined Project Type with value Website, Logo, Poster, etc where one item of portfolio is representated by one project type

Then paste these scripts into template file for the page above so it’s gonna be:






Website

posts
  LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
  LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
  LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
  LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
  WHERE $wpdb->posts.post_type = 'pf_cpt'
  AND $wpdb->posts.post_status = 'publish'
  AND $wpdb->term_taxonomy.taxonomy = 'project-type'
  AND $wpdb->terms.slug = 'website'
  AND $wpdb->postmeta.meta_key = 'year'
  ORDER BY $wpdb->postmeta.meta_value DESC";
  // see value 'project-type' and value 'website'
  // feel free to define any value from your taxonomies, for grouping

  $result = $wpdb->get_results("$querystr");
  foreach($result as $post){

  setup_postdata($post); // remember this line, it needs cause our "foreach" statement

  ?>

', '' ); ?>

ID);
  $website_url = $custom["custom_url"][0];
  if($custom != "" ) {

  ?>


 



 


ID, 'project-type', 'Project Type(s): ', ', ', '' );
  $commercial_type_list = get_the_term_list( $post->ID, 'charge-type', 'Type(s): ', ', ', '' );
  $client_list = get_the_term_list( $post->ID, 'client', 'Client(s): ', ', ', '' );
  $task = get_the_term_list( $post->ID, 'tasks', 'Task(s): ', ', ', '' );

  // if it's not empty, return value of each type
  // define project type value
  if ( '' != $project_type_list ) { $taxo .= "$project_type_list
\n"; }

  // define commercials or non commercials project type
  if ( '' != $commercial_type_list ) { $taxo .= "$commercial_type_list
\n"; }

  // define client list value
  if ( '' != $client_list ) { $taxo .= "$client_list
\n"; }

  // define task value
  if ( '' != $task ) { $taxo .= "$task
\n"; }

  // Output taxonomy information if there was any
  if ( $taxo != '' ) {

  ?>



ID, 'year', true) ) :
    $date = get_post_meta($post->ID, 'year', true);
    $dateTime = new DateTime($date);
    $formatted_date=date_format ( $dateTime, 'F Y' );
        echo 'Date: '.$formatted_date.'
';
  endif; ?>

And you’ll get a display which looks like below

But after you noticed it, how’s it so the value from each custom taxonomies isn’t be formed as a link (url)..? just change the codes above become codes below

$project_type_list = strip_tags( get_the_term_list( $post->ID, 'project-type', 'Project Type(s): ', ', ', '' ) );
$commercial_type_list = strip_tags( get_the_term_list( $post->ID, 'charge-type', 'Type(s): ', ', ', '' ) );
$client_list = strip_tags( get_the_term_list( $post->ID, 'client', 'Client(s): ', ', ', '' ) );
$task = strip_tags( get_the_term_list( $post->ID, 'tasks', 'Task(s): ', ', ', '' ) );

See that strip_tags( [your_term_list] ); to ignore HTML format. Simple, right? Then it’s done, have fun with your custom post types and custom taxonomies folks!

Further information about this features:

Conclusion

I think it’s pretty tempting your insight about WordPress 3.0, and what you can do with it furthermore, as a blog machine or as a CMS, that’s up to you. So now what about we’re having share about it, what do you think about WordPress 3.0 and for you that’ve already experienced with it, you may share with us here, I think that’s why sharing considered as caring.. arghh it’s pain to say it.. :p See ya!

Another References

10 Features to Look Forward to in WordPress 3.0
WordPress 3.0 is scheduled to be released within the next 30-60 days. There are some great new features coming, including custom post types, a new default theme, and a menu manager. Read on Nettuts to find out what to expect in version three!
WordPress 3.0: Ultimate Guide to New Features
WordPress 3.0 — the newest major version of WordPress — is one of the most highly-anticipated open source upgrades this year. Good article from Saad Bassi on Six Revisions
9 Features We Most Want in WordPress 3.0
Messageboards are currently awash with demanding bloggers, listing the new features they most want to see and the plugins they want shifted into core. By this article on DesignM.ag you’ll find the 9 new features that are most in demand.
What’s Coming in WordPress 3.0 (Features)
Another reference from WpBeginner, just check this out too guys!
WordPress 3.0: The 5 Most Important New Features
The list of new features in WordPress 3.0 isn’t very long in comparison to previous releases. However, the changes that are coming will certainly have a significant impact, particularly if you use WordPress as a CMS. Here is a rundown of the most important new features arriving in version 3.0. Mashable will let you know which features of WordPress 3.0 you are most looking forward to.
10 Great New Features in WordPress 3.0
WordPress is by far the most popular blogging platform available and with over half a million known websites running on the software, it’s no surprise there’s a big news surge when a new version is released. Read more on Web.AppStorm

Quick Tip: Display Timeago For WordPress If Less Than 24 Hours

Lief — Wed, 14 Apr 2010 08:32:32 +0000

This small code snippet will help you to display the time ago for WordPress post if your post was published less than 24 hours ago. You can find some code published on other blogs that used for displaying the time different from now to the time when the post published like: “minutes ago“, “hours ago“, “days ago“… This code will display only when the different time is less than 24 hours.

The completed code you need is below. Copy it and paste it to the functions.php file and you are ready to go. No more messing needed.

add_filter('the_time', 'timeago');

function timeago()
{
    global $post;

    $date = $post->post_date;

    $time = get_post_time('G', true, $post);

    $time_diff = time() - $time;

    if( $time_diff > 0 && $time_diff < 24*60*60 )
        $display = sprintf( __('%s ago'), human_time_diff( $time ) );
    else
        $display = date(get_option('date_format'), strtotime($date) );

    return $display;
}

This code will hook into the the_time() function. It will do the filter which modify the return value of the_time() before sending it to the browser screen.

The output:

Published:  5 minutes ago
Published:  12 hours ago

Or

Published:  March 14, 2010 //Depends on your date format setting

Don’t forget to subscribe to our rss feed to receive full code snippets and articles via feed reader or follow us on twitter.

Most Wanted Business/Magazine WordPress Premium Themes

Jilson Thomas — Tue, 09 Mar 2010 06:05:58 +0000

You may have your own blog or working for someone else. What ever may be the content of the blog, the theme of the blog gives the first impression about the blog to the reader. If your theme is very interactive and user friendly, then reader will probably enjoy it. If you are serious about your blog, you should have a serious theme. If you have a design or technical related blog, you probably don’t want to miss this showcase.

In the showcase below, I tried to include some of the highest rated magazine/business WordPress themes voted on by bloggers and designers. Once you have a licence for the theme, you are (of course) free to edit it to fit for your requirements. Here are some premium themes that will get you noticed, for sure.

All descriptions are from the theme designers themselves.

Agivee – Corporate Business WordPress Theme ($32)

Agivee wordpress theme will give your business or company website a smart and professional look. It’s widget ready and works fine in all versions of wordpress. It’s easy to maintain and rich of features. You can find out some of the cool jQuery slide show, Auto image resizing, built in ajax contact form etc.

Our Magazine ($32)

A powerful WordPress theme special for online magazine, community, network or any site with rich content. It is modern, clean, and sexy ~ I just liked the color combination of this theme. It’s pretty good na ?

Our Magazine comes with 2 color variations, a slider for headline news, auto image resizing, advance theme option. It also provide a highly demand user link feed to allow your reader to submit news, example http://psd.tutsplus.com/ and http://kailoon.com.

Newscast 4 in 1 – Magazine and Blog Template ($22)

I think, You don’t wanna miss this lovely theme. Newscast is a HTML Template, best suited for Magazines and Blogs. It comes with 3 fantastic Image and News slideshows has multiple Page templates and of course gives you the option to choose from 4 Fantastic skins:

Magnifizine: A Magazine & Business WordPress Theme ($32)

Magnifizine is a stylish and modern looking WordPress theme designed primarily for magazine and business websites. It comes crammed with features Including a custom slider that comes in three sizes and plays Flash and YouTube videos.

Global Press – A Premium Magazine WordPress Theme ($32)

Global Press is a premium news, portal or magazine WordPress theme. It is very lightweight, almost no images are used. It include a lot of custom features and is easy to use. Itâ€™s perfect for almost everyone who want to write articles, news, or publish an online magazine.

Liquid Magazine – Unique Fluid Grid Layout ($27)

This is one of a kind theme, there are no analogs on ThemeForest It will suits best for the blog with creative posts. Different thumbnails height is giving a special â€œstyleâ€ to the template, your visitors will love it!

Headlines Premium WordPress Theme

Some of the Features for this theme is follows. I know you may like this.

Featured jQuery tabber/slider area above normal posts to showcase your favorite posts. Can be static or set to slide automatically with built in options.
Show your latest tweet in the header (instead of 468Ã—60 ad space)
A custom social bookmark option at the bottom of single posts to share your writings with ease!

My Stream: Premium WordPress theme

MyStream is a flexible and extremely customizable personal blog theme with massive social media & lifestreaming influences. Change the background to your visual identity, move the many available widgets around and VOILA: you have YourStream.

Aperture WordPress theme

Aperture is a multi-functional photo-blogging theme with a unique home page, consisting of a latest posts slider, a visual category display, a blog module and lots of stylish widgetized spaces. With 12 alternate styles and a very visual archive system you should be able to house your photos/portfolio proudly in a theme that caters specifically for your needs.

Newsport WordPress theme

Newsport is a stylish magazine theme aimed at those who want a more professional feel to their site. It includes a well laid out front page that showcases all your news with images, and also a cool category news feed on the side so that all content of your site gets to shine.

Groovy-Video WordPress theme

Groovy Video is a colourful, funky video blogging theme, which is sure to put you at the top of the pile. Video blogging (vlogging) is trendy right now (all the cool kids are doing it), so do get your groove on with this theme! Get it? Got it? Good!

Noctis Theme ($27)

Noctis theme is a dark magazine-blog style. This theme is suitable for blogger who like magazine layout and want to show big post thumbnails in their homepage.

Affairv($22)

It is a 2 column, magazine flavoured WordPress theme, designed to put your content at the forefront and give your blog a modern, stylish and professional feel. Featuring automatic thumbnail generation and custom social media links.

Caulk($27)

Caulk is a modern, sleek WordPress custom theme built especially for magazine-style blogs, but also customizable for personal use, making use of multiple jQuery sliders. It is clean, organized, and easy to read with plenty of white space and nice typography.

MAJALAH ($27)

MAJALAH is magazine style WordPress theme with clean and modern layout, and also can be switched as community theme. There are 2 Slideshow options in MAJALAH theme, 3D slideshow and Javascript slideshow that easily configurable from admin theme options, and also 2 colors available in dark dan white color with 4 combination background.

BusyBee

Clean and efficient wordpress theme from the wootheme sets. You can directly go and setup what all you needed in this page. You can customize this theme. I really liked this theme very much.

Convergence – Community WordPress Theme($27)

Convergence is a nicely put together WordPress theme with the intent and focus on creating a community site. This theme includes many popular features seen in todayâ€™s industry leading community sites.

If youâ€™ve ever thought about starting a community based site, then this is your theme. Purchase today and be up and running in no time at all.

Intersect – WordPress Theme($27)

Intersect is a bold, striking WordPress theme with various layouts, colors and easy to setup. This theme is ready to get a site up an running out of the box. It is easy to customize and is configured for fast skinning.

Includes 8 different skins, each with a unique custom background. The PSD files includes a backgrounds file allowing you to create your own combination of any color with any background, or make your own in minutes.

My WordPress ($27)

My WordPress is a professional WordPress theme with the intent and focus on creating a community site. It is widget ready, print ready, page-navi ready, ad optimization ready, SEO friendly, smooth tabbing and dropdown using jquery, breadcumb integrated and many more!

Marketplace Community WordPress Theme ($27)

Marketplace is a both clean and stylish WordPress theme with the intent and focus on creating a community site for industry news, tutorials, etc. This theme includes many popular built in features seen in todayâ€™s industry leading community sites. This themes comes with 5 different color options to choose from.

Sharp($27)

The Sharp theme is a widget ready clean, crisp WordPress blog layout with 4 color variations that is easy to customize and use.

Template features:

WordPress 2.6 & 2.7 Theme
Easy logo change
Sidebar Widget Ready
Valid CSS and XHTML 1 .0 strict
2 columns tableless fixed layout
4 PSD files
Easy customization

WooiTuts – Advanced community theme($32)

WooiTuts is an advanced WordPress theme for all of those ever wanted to create a cool Communtiy site, like an Tutorial blog, Tech blog or whatever type of blog you want to setup you can do it with WooiTuts.

Evolutionary Theme ($27)

Evolutionary is a clean, jQuery animated WordPress theme.

Features include:

Four Color Schemes: Blue (default), Green, Red, Black (inverse)
Featured Posts section: No plugins required.
jQuery animations in navigation and sidebar
Widget Ready Sidebar and Footer
Featured Posts, Color Scheme, Copyright, and moreÂ

Intersect – HTML Template (8 in 1 skins) ($17)

Intersect is a bold, striking html template with various layouts, colors and easy for modification. This theme is ready to get a site up an running out of the box. It is easy to customize and is configured for easy skinning.

Post It ($22)

Post It is a WordPress Theme designed for all creative bloggers

Theme Features

4 characters / skins to choose from
960 Grid System
Easy customization with theme options page
RSS feed design integrated in header illustration
Built-in 125Ã—125 banner ads (managable in theme options)
Widget ready

Filthy ($32)

Filthy is a personal blog theme thatâ€™s been through the ringer. This thing is just down right dirty! And best of all, it comes it 2 shades of filth â€“ brown and black.

WordPress Theme from Scratch – Day 3: HTML to WordPress

Lief — Fri, 08 Jan 2010 09:52:39 +0000

This tutorial is in the series of â€œWordPress Theme from Scratchâ€ that helps you build a WordPress theme by yourself from nothing. Previous tutorial in this series helped we convert a mockup in PSD to HTML and today, we will continue to go to last tutorial: build WordPress theme from the HTML file.

The most difference between WordPress and other blog platforms in theme development is WordPress theme more easier than others for development. In basic, the elements of wordpress theme likes blocks and building WordPress theme likes we build these blocks to make them to fit together.

In WordPress template, some file we will use to display it in all page on our website such as: header, footer, sidebar … and other file we have to customize it to fit our requirements under specific conditions. If you are going to build a WordPress theme, I recommend to take a look at “Using_Themes section in WordPress Codex” to understand how a theme built.

Prepare files for theme

In this tutorial, I will help you build your first WordPress theme that works. That means I’m gonna build some important files that WordPress requires to run without errors. My FrozenFlirt WordPress theme should contains these files:

--FrozenFlirt
-----header.php
-----index.php (Homepage display)
-----single.php (Post display)
-----archive.php (Archive display for categories, tags, date, authors...)
-----comments.php (Comment temple include form, post comments)
-----sidebar.php
-----functions.php (All of your template functions will go here)
-----footer.php
-----style.css
-----image
-----js

Note: These files need for your template works with basic requirements such as: post, categories, tags, authors, search … viewing. If you want more, build as same as we are doing here with 404 display, links template …

Before start, copy all images in this HTML layout to images directory and all css files to the root theme folder. Furthermore, this theme is using one javascript file call script.js, so copy this file to folder js.

Let’s begin!

Split HTML layout

We will use header, sidebar and footer to display in all pages, so we need to split our HTML file into 3 main parts: header.php, sidebar.php and footer.php.

Refer to the HTML file in previous tutorial: WordPress Theme from Scratch â€“ Day 2: PSD to HTML and after splitting, we have these files:

header.php


xmlns="http://www.w3.org/1999/xhtml">

    http-equiv="Content-Type"content="text/html; charset=UTF-8" />
    </span>FrozenFlirt WordPress Theme From Scratch<span style="color: #881280;">
    href="reset.css"rel="stylesheet"type="text/css" />
    href="style.css"rel="stylesheet"type="text/css" />
    href="pagenavi-css.css"rel="stylesheet"type="text/css" />
    
    
    





    id="main-wrapper">

        class="container">

            id="header">

                id="topmenu">
                    
                        href="#"title="Home Page">Home
                    
                    
                        href="#"title="Tutorial Category">Tutorial
                    
                    
                        href="#"title="Freebie Category">Freebie
                    
                    
                        href="#"title="Inspiration Category">Inspiration
                    
                    
                        href="#"title="Resources Category">Resources
                    
                

                id="topsearch">
                    action="http://aext.net/"id="searchform"method="get">
                        
                            type="text"                                    onblur="if (this.value == '') {this.value = 'Type Keywords And Hit Enter...';}"                                    onfocus="if(this.value == 'Type Keywords And Hit Enter...') {this.value = '';}"                                    value="Type Keywords And Hit Enter..."                                    class="searchfield"id="searchbox"name="s"/>
                        
                    
                

                class="clear">

                id="logo">
                    href="#"title="FrozenFlirt Homepage">FrozenFlirt Theme
                    "Wordpress Theme From Scratch"
                

                class="clear">

sidebar.php

            id="sidebar">

                class="widget"id="adblocks">

                    href="#"title="">src="images/ads/vivatheme.png"alt="Viva Theme" />
                    href="#"title="">src="images/ads/pixelcrayons.jpg"alt="Pixel Crayons" />
                    href="#"title="">src="images/ads/wpbest.gif"alt="WPBEST" />
                    href="#"title="">src="images/ads/buysellstockdesign.gif"alt="Buy Sell Stock Design" />

                

                class="widget"id="popular-posts">
                    Popular Posts
                    

                        title="blablabla"href="#">class="wpp-post-title">5 New Useful jQuery Plugins For Your Next Projects 
                        title="blablabla"href="#">class="wpp-post-title">35 Fresh and Cool Web Design Interfaces for Inspiration 
                        title="blablabla"href="#">class="wpp-post-title">Bubble Effect with CSS 
                        title="blablabla"href="#">class="wpp-post-title">CSS Absolute Positioning: Create A Fancy Link Block 
                        title="blablabla"href="#">class="wpp-post-title">Incredible Drop Down Menu Solution With CSS Only 
                    

                

            

            class="clear">

footer.php

            id="flickr-stream">

                Flickr Stream
                
                class="clear">
                id="flickr">
                    
                

                  

            id="twitter-update">
                Twitter Update
                
                class="clear">
                id="twitter">
                    id='twitter_update_list'>
                
                href="http://twitter.com/prlamnguyen"title="Follow me on twitter">id="followme">Follow Me!

                                  

        

    

    class="clear">

    id="footer-wrapper">

        class="container">

            id="copyright">©2009 FrozenFlirt. All Rights Reserved

            id="designedby">WordPress Theme Design by href="http://aext.net">src="images/aext.png"alt="Theme by AEXT.NET" />

The remain part we will use for replace with the content.

header.php

The header file need to declare the blog title, description (if you are using SEO plugin, I don’t think this part is important), blog feed, pingback… And off course, you need to put your stylesheet here.

Put these code to your header for:

HTML type

http-equiv="Content-Type"content=" bloginfo('html_type'); ?>; charset= bloginfo('charset'); ?>" />

Blog title

</span><span style="color: #dd0000;"><?php</span> <span style="color: #003369;">wp_title</span>(<span style="color: #eb7300;">'«'</span>, <span style="color: #881350;">true</span>, <span style="color: #eb7300;">'right'</span>); <span style="color: #003369;">bloginfo</span>(<span style="color: #eb7300;">'name'</span>); <span style="color: #dd0000;">?></span><span style="color: #881280;">

Blog description

name="description"content=" bloginfo('description'); ?>" />

Feed and pingback

rel="alternate"type="application/rss+xml"title=" bloginfo('name'); ?> RSS Feed"href=" bloginfo('rss2_url'); ?>" />
rel="alternate"type="application/atom+xml"title=" bloginfo('name'); ?> Atom Feed"href=" bloginfo('atom_url'); ?>" />
rel="pingback"href=" bloginfo('pingback_url'); ?>" />

Because you will upload this theme to the themes folder, you need to gather the blog directory to import exactly the url to your css, javascript … files. Using this code, you will get the url to your template folder:

 bloginfo('template_url'); ?>

Link to your stylesheet using code above:



  print '';

?>

For more information about bloginfo, check this page Template Tags/bloginfo.

DON’T FORGET to put these code before closing the head tag

 wp_head(); ?>

This is one of the most essential theme hooks. You use this hook by having your function echo output to the browser, or by having it perform background tasks. This is very important because all of the plugins installed will use this hook to output their code such as css and javascript to template header.

In this theme, you can see that I made the rounded border style for the categories link on header. It will be easy to list all category links if we just make simple links by using this code:

    
      href=" bloginfo('url'); ?>">Home

       echo wp_list_categories('echo=0&title_li='); ?>

However, this function just generate a list of category with links and we cannot put a span tag inside the link to make a rounded border style like what we do with the HTML template.

This is why we use this code instead;

id="topmenu">
    
       href=" bloginfo('url'); ?>"title="Home Page">Home
    

    

        $args=array(
            'orderby' => 'name',
            'order' => 'ASC'
        );

        $categories=get_categories($args);

            foreach($categories as $category) {
                echo '';
                echo 'get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ),                       $category->name ) . '" ' . '>' . $category->name.'  ';
                echo '
';
            }
    ?>

Now, with the css code I provided previous tutorial, we can build great rounded border link style.

[smartads]

sidebar.php

Actually, the sidebar is very simple. Themes usually have at least 1 or 2 sidebars, in this case, we have one. Each section in the sidebar is known as a “widget” that you can add or remove, and move up or down. You can configure your sidebar by going to Appearance > Widgets. Because nothing is special here, we only need to make it ready for widgets. That means you can add/remove widget in your sidebar in admin panel. In this case, I will keep the ads section as HTML, other widgets will be updated through widgets configuration.

In your sidebar.php, add these code:

id="sidebar">

    class="widget"id="adblocks">

        href="#"title="">
            src=" bloginfo('template_directory'); ?>/images/ads/vivatheme.png"alt="Viva Theme" />
        
        href="#"title="">
            src=" bloginfo('template_directory'); ?>/images/ads/pixelcrayons.jpg"alt="Pixel Crayons" />
        
        href="#"title="">
            src=" bloginfo('template_directory'); ?>/images/ads/wpbest.gif"alt="WPBEST" />
        
        href="#"title="">
            src=" bloginfo('template_directory'); ?>/images/ads/buysellstockdesign.gif"alt="Buy Sell Stock Design" />
        

    

     if( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

     endif; ?>



class="clear">

The code above will keep the ads section stays in the sidebar even when you add widgets in admin panel or not. Other widgets will be added through admin panel and be right next below to ads block.

However, that’s not enough. Because, in this case, we are setting up the sidebar widgets as div elements, we need to set up the sidebar format by using register_sidebar() in functions.php file. In functions.php file, add these code:

// register sidebars if( function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Default sidebar',
        'id' => 'sidebar-1',
        'before_widget' => '',
        'after_widget' => '
',
        'before_title' => '',
        'after_title' => '
'
    ));
}

This code used for register the default side that all widgets inside it will come inside div element with class name widget and their id by plugin widgets. The title of each widget will be wrap by an h3 tag.

That’s all you need for a sidebar with widget ready. Download this plugin WordPress Popular Posts, install, active then drag the widget to the sidebar. Done!

footer.php file

Honestly, there is nothing important here. Some blog design their beautiful footer with a lot of stuff, but in this case we only create two widgets for Flickr stream and Twitter update using javascript to make this tutorial simple. These widget display will depend on the user’s Flirkr and Twitter account, so we will create these widget display base on the options that user will put their account in. Luckily I published an useful posts “WordPress Theme Design with Options Adminstration“. Now, you have to check this post first because it’s very complicated step that should not put here for a very long long long tutorial. It’s not necessary, but at least put some code for this tutorial more complete.

In functions.php file, put these code for theme options:

// theme options $options = array(

  array(    
    "name" => "Flickr ID",
    "desc" => "Enter your Flickr ID to display Flickr Stream widget",
    "id" => "flickr_account",
    "default" => ""),

  array(    
    "name" => "Twitter Account",
    "desc" => "Enter your Twitter username to display Twitter Update widget",
    "id" => "twitter_account",
    "default" => "prlamnguyen"),

);

These lines of code will control the form submission of the theme options:

function frozenflirt_options() {
  global $options;

  if('theme_save'== $_REQUEST['action'] ) {

    foreach($options as $value) {
     if( !isset( $_REQUEST[ $value['id'] ] ) ) {  } else { update_option( $value['id'], stripslashes($_REQUEST[ $value['id']])); } }
     if(stristr($_SERVER['REQUEST_URI'],'&saved=true')) {
     $location = $_SERVER['REQUEST_URI'];
    } else {
     $location = $_SERVER['REQUEST_URI'] . "&saved=true";
    }

    header("Location: $location");
    die;

  } else if('theme_reset' == $_REQUEST['action'] ) {

    foreach($options as $value) {
     delete_option( $value['id'] );
     $location = $_SERVER['REQUEST_URI'] . "&reset=true";
    }

    header("Location: $location");
    die;

  }

  add_theme_page('FrozenFlirt Theme Setting', 'FrozenFlirt Theme Setting', 10, 'frozenflirt-settings', 'frozenflirt_admin');
}

And these code for the UI in admin panel:


function frozenflirt_admin() {
    global $options;
?>
class="wrap">
  class="alignleft">Theme Setting
  
clear="all" />

  
    //Check if settings saved!     if( $_REQUEST['saved'] ) {
  ?>
        class="updated fade">Setting Saved
   } ?>

method="post"id="myForm">
id="poststuff"class="metabox-holder">

 class="stuffbox">
  Footer Setting
  class="inside">
    class="form-table"style="width: auto">
    
     foreach($options as $value) {
      switch( $value['id'] ) {
        case "flickr_account": ?>
        
        
        
        

       break;
        case "twitter_account": ?>
        
        
        
        

       break;
        }
    }
    ?>
   scope="row"> echo $value['name']; ?>
 echo $value['desc']; ?> 
         name=" echo $value['id']; ?>"                 id=" echo $value['id']; ?>"type="text"                 value=" get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        
scope="row"> echo $value['name']; ?>
 echo $value['desc']; ?> 
         name=" echo $value['id']; ?>"                 id=" echo $value['id']; ?>"type="text"                 value=" get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        
  
   


name="theme_save"type="submit"class="button-primary"value="Save changes" />
type="hidden"name="action"value="theme_save" />


method="post">
name="theme_reset"type="submit"class="button-primary"value="Reset" />
type="hidden"name="action"value="theme_reset" />




}
?>

scope="row"> echo $value['name']; ?> echo $value['desc']; ?>	name=" echo $value['id']; ?>" id=" echo $value['id']; ?>"type="text" value=" get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
scope="row"> echo $value['name']; ?> echo $value['desc']; ?>	name=" echo $value['id']; ?>" id=" echo $value['id']; ?>"type="text" value=" get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />

Your theme options adminstration will look like:

We are good now with the theme options. Let’s get these value to display in the theme. In your footer.php, insert these code to your Twitter widgets to get twitter account name from theme options:

In this code above, if the option value of twitter_account doesn’t exist, this widget will display twitter update from my twitter account by default.

With Flickr Stream widget, go back to header.php file to edit because I put the jQuery code to get stream from specific account on header.php file. I’m so sorry! If you want, move this code block to the footer.php file. That’s fine!

Alright, now you have done for the three files that will used in all pages. Now, we continue to go forward to other pages that display in homepage, post pages, categories pages…

index.php

This file will used for display in the main page of your blog. It usually displays a number of recent articles. The number of posts will be display was set up in your WordPress Admin > Setting > Readingas below:

By default, you don’t need to query posts in homepage, the only code for the loop of display post in homepage is:



//The Loop if( have_posts() ) : 

    while( have_posts() ) : the_post();

        //Posts in the loop     
    endwhile;

else:

        //No post in homepage ?????      
endif;

?>

However, sometime we need to display post in homepage with conditions. An example with Noupe.com, they are using the Community News which all of news were submit will go to News category, but they don’t want to display a lot of community news in homepage. The best way to do is override and replace the main query in homepage. In the case I have just mentioned(At this time, Noupe has disabled Community submission !!!), the replaced query will be:



//Begin replace the main query query_posts('cat=-155'); //155 is the id of Community News category 
//The Loop if( have_posts() ) : 

    while( have_posts() ) : the_post();

        //Posts in the loop     
    endwhile;

else:

        //No post in homepage ?????      
endif;

//Reset the query wp_reset_query();

?>

With the query_posts, you can change the order, number of posts…. I would like to forward a link to Template Tags/query posts to check more information and usages.

Way back to the tutorial, you already knew how to use the loop in display posts, now we begin to work with our index.php. But at first, you have to clean this index.php because we have 4 blocks of post in HTML template. Keep only one post excerpt, remove all of others.

Before starting write code for display post excerpts, we need to look back to the split files. You remember that we split our HTML file into 3 files: header.php, sidebar.php and footer.php. Now, we need to include them again. In index.php file, put your header, sidebar and footer:



/**  * @package WordPress  * @subpackage FrozenFlirt_Theme  */
?>

 get_header(); ?>

            id="main-content">

                ..........

            

             get_sidebar(); ?>

 get_footer(); ?>

In main content elements, we write a loop of post to display:

id="main-content">
  class="container">

    

    if(have_posts()) : while(have_posts()) : the_post();

    ?>

    class="post exerpt clearfix">
      href="#">
        alt="ahh ahh ahh"src="images/post-image-1.png"width="200"height="200"class="thumbnail" />
      

      href="#"rel="nofollow">Fronze Flirt Theme

      Written by href="#"title="Lam Nguyen">Lam Nguyen on Dec 11th in href="#"title="Tutorial Category">Tutorials

      class="summary">
        Lorem ipsum dolor sit amet, this is bold text consectetur adipiscing elit. This font is in italic cras lacinia pellentesque elit nec sodales. Etiam vehicula egestas interdum. Nulla facilisi. In at lectus odio, quis iaculis dui. 
        rel="nofollow"title="Read more this post"href="#">Continue Reading »
      

    

     endwhile; ?>

         if(function_exists('wp_pagenavi')) : ?>
             wp_pagenavi() ?>
         else : ?>
            class="navigation"id="pagenavi">
                class="alignleft">
                     next_posts_link(__('« Older Entries','arclite')) ?>
                
                class="alignright">
                     previous_posts_link(__('Newer Entries »','arclite')) ?>
                
                class="clear">
            
         endif; ?>

     else: ?>
         printf("Sorry, no posts matched your criteria."); ?>
     endif; ?>

This loop will display the number of post with the same title, thumbnail, description… because we haven’t change the code to display correct post title, post description… These code below is used for replace the HTML in the loop:


    if(have_posts()) : while(have_posts()) : the_post();          
?>
class="post excerpt clearfix">
  href=" the_permalink() ?>">
  
        if( has_post_thumbnail() ) {
            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
        } else {
            // Who doesn't want a thumbnail??         }
  ?>
  
  rel="nofollow"  href=" the_permalink() ?>">
     the_title(); ?>
    

  
        Written by  the_author_posts_link(); ?>
                on  the_time('F jS') ?>
                in  the_category(', '); ?>
  

  class="summary">
     the_content( 'Continue Reading »' ); ?>
  


 endwhile; ?>

Wow, we’re going to the most interesting feature of WordPress 2.9: Thumbnail Generation for Post. You remember, in the past, how we made thumbnail for a post? It was really a nightmare with a lot of code and stuff. Today, everything has changed. With few lines of codes, you can insert thumbnail for posts easily.

In functions.php file, insert these code to active the new feature:

add_theme_support( 'post-thumbnails', array( 'post' ) );

You can make this feature active for posts, pages… but for posts only in this case. Display the thumbnail within the loop:

href=" the_permalink() ?>">
    
        if( has_post_thumbnail() ) {
            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
        } else {
            // Who doesn't want a thumbnail??         }
    ?>

This code will display the thumbnail with dimension: 200×200 pixels and the img tag is with class name thumbnail. The thumbnail will be added when writing post:

I recommend this post for new feature Post Thumbnail references: Using The New Post Thumbnail Feature In WordPress 2.9.

archive.php

This file will used for display category archive, tag archive… The easiest way is copy all code of index.php page and past it to archive.php because tag or category archive usually display in the same way as index page. In WordPress, when develop theme, the posts query was already made by WordPress, so that’s why we need just copy and paste content of index.php to the archive.php file. As I said above, if you need to display something different such as: posts order, number of posts will be displayed… just use the query_posts()function to override and replace the main query for the page.

However, in archive.php file, you need to notify users which page they are on. Insert these code on the top, before display the loop of posts:

                ...

                

                if(have_posts()) :

                ?>

       $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
       /* If this is a category archive */ if(is_category()) { ?>
        class="pagetitle">Archive for the ‘ single_cat_title(); ?>’ Category
       /* If this is a tag archive */ } elseif( is_tag() ) { ?>
        class="pagetitle">Posts Tagged ‘ single_tag_title(); ?>’
       /* If this is a daily archive */ } elseif(is_day()) { ?>
        class="pagetitle">Archive for  the_time('F jS, Y'); ?>
       /* If this is a monthly archive */ } elseif(is_month()) { ?>
        class="pagetitle">Archive for  the_time('F, Y'); ?>
       /* If this is a yearly archive */ } elseif(is_year()) { ?>
        class="pagetitle">Archive for  the_time('Y'); ?>
       /* If this is an author archive */ } elseif(is_author()) { ?>
        class="pagetitle">Author Archive
       /* If this is a paged archive */ } elseif(isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
        class="pagetitle">Blog Archives
       } ?>

                

                    while(have_posts()) : the_post();

                ?>

                ...

The result:

single.php

This file is used for display your WordPress posts. In this file, I will tell you a small trick. In HTML template, you see the post display as below:

class="summary">

    Post Excerpt



class="post-content">

    Post Main Content

If you put the_excerpt() and the_content() together to display as above. That will not work because the post excerpt will be duplicated. Even when put the excerpt to the Excerpt field which located below the post editor. This is good if you want to display links or images in your excerpt, but it doesn’t work here.

Alright, here is the trick. We will hook into the_content. In functions.php file, add these code:

add_filter('the_content', 'format_content');

function format_content($content) {

    if( preg_match('/<\/span>/', $content, $matches) ) {

        $content = explode($matches[0], $content, 2);

        $content = '' . $content[0] . '
' . $matches[0] . '' . $content[1] . '
';
    }

    return $content;

}

We will split the content into 2 parts then wrap each part by specific div tag with class name “summary” and “post-content”. Is that cool?

And this is the complete code of single.php file:



/**  * @package WordPress  * @subpackage FrozenFlirt_Theme  */
?>

 get_header(); ?>

            id="main-content">
              class="container">

                

                if(have_posts()) : while(have_posts()) : the_post();

                ?>

                class="post clearfix">
                    href=" the_permalink() ?>">
                    
                        if( has_post_thumbnail() ) {
                            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
                        } else {
                            // Who doesn't want a thumbnail??                         }
                    ?>
                    

                    rel="nofollow"  href=" the_permalink() ?>"> the_title(); ?>                
                    Written by  the_author_posts_link(); ?> on  the_time('F jS') ?> in  the_category(', '); ?>

                     the_content(); ?>

                

                 comments_template(); ?>

                 endwhile; ?>

                 else: ?>
                     _e("Sorry, no posts matched your criteria.","arclite"); ?>
                 endif; ?>

              
            

             get_sidebar(); ?>

 get_footer(); ?>

You have done with the single.php file, but don’t forget to put comments_template(); ?> before ending the loop.

comments.php

WordPress fresh installed will come with the default theme and we can use some of those files to re-use. In default theme directory, open comments.php file, copy all the code then paste it to your new theme comments.php file. Use css to style the comment form and comments list. That’s all we need for the comment template.

I recommend some tutorial that help you build a better comment:

The most important when editing the comments.php file is DON’T FORGET to put these code before closing the comment form tag:

 comment_id_fields(); ?>
 do_action('comment_form', $post->ID); ?>

With page.php file to display pages, we are good to use the same code of single.php file because the in fact, page is a post.

Conclusion

This tutorial doesn’t guide you to build a completed WordPress theme, but at least it makes the WordPress Theme FrozenFlirt works with some basic function such as: view post, view index page, archive pages, comments…. If you need to build a completed theme with all of function you will need do more. The great place and my recommend website to learn how to mastering WordPress theme is WordPress Codex. Hope you guys design great WordPress theme from this tutorial. Any suggestion helps this tutorial more completed will be appreciated.

AEXT.NET MAGAZINE » Wordpress

Get a 360 Degree Security For Your WordPress Blog

1. Update the software

2. Password considerations

3. Secret keys for WP-Config

4. Htaccess File in Check

5. Know Your File Permissions

6. Avoid using admin account

Imply them:

WordPress 3 and What You Can Do!

New, username and password while installation

Twenty Ten default theme

Background customization

New editor style

Custom menu management

Example custom menu

Further information about New Menu System:

Custom Post Types for Content Management

Website

Further information about this features:

Conclusion

Another References

Quick Tip: Display Timeago For WordPress If Less Than 24 Hours

Most Wanted Business/Magazine WordPress Premium Themes

WordPress Theme from Scratch – Day 3: HTML to WordPress

Prepare files for theme

Split HTML layout

FrozenFlirt Theme

"Wordpress Theme From Scratch"

Popular Posts

Flickr Stream

Twitter Update

header.php

sidebar.php

', 'after_title' => '

footer.php file

class="alignleft">Theme Setting

Footer Setting

index.php

archive.php

class="pagetitle">Archive for the ‘ single_cat_title(); ?>’ Category

class="pagetitle">Posts Tagged ‘ single_tag_title(); ?>’

class="pagetitle">Archive for the_time('F jS, Y'); ?>

class="pagetitle">Archive for the_time('F, Y'); ?>

class="pagetitle">Archive for the_time('Y'); ?>

class="pagetitle">Author Archive

class="pagetitle">Blog Archives

single.php

comments.php

Conclusion