Custom Post Types is the most wanted feature by WordPress developers. WordPress Custom Post Types allows us easy to create and handling WordPress content sorting. However, the first time setting up and Custom Post Types customization is quite complex for someone who are not familiar with this feature. I admit that I cannot memorize the code each time I start developing a WordPress project and, off course, I always mess it up. When I scanned and did some researches if there is any WordPress plugin which can help us to control this feature, I found the plugin called Custom Post Types UI. Using Custom Post Types UI plugin is a easiest way to create custom post types and taxonomies in WordPress.

If you haven’t heard about this one, you can check it out or download it here. Right in the front of the plugin page, you can see a video which demonstrates how the Custom Post Types UI(CPTUI) works.

After installing and activating the plugin, you can access the plugin setting page in the left side Admin menu Dashboard.

In the “Create New” menu, you will have 2 option panels: one fore creating new Custom Post Type and one for creating new Custom Taxonomy.

Custom Post Type

The only field you need to fill out is the Post Type Name filed. The other fields will be automatically created by default options. In this case, your new Post Type will be created with the name “portfolios” with the slug is “portfolios” as the image below:

You can also choose another slug name if you don’t want this default slug as post type name (choose View Advanced Options). Furthermore, in this Advanced Options panel, CPT UI allows you to enable/disable some options: Trackbacks, Revisions … Awesome, because I don’t want to enable Revisions for portfolio post type.

And with “View Advanced Label Options”, you can specific each label for your custom post type. If you don’t fill out those options, the plugin will automatically create labels based off of your custom post type name.

Custom Taxonomy

Like Custom Post Type options, the only filed you need to define is the taxonomy name and the other filed will be automatically created depends on the taxonomy name.

When creating new taxonomy, you can assign it to your previous custom post type or any default post type like WordPress Posts, Pages. In this case, I will create new custom taxonomy named “Project Type” and attach it to “Portfolio” post type which I created recently.

In the page of creating new portfolio, I can see the new taxonomy now:

Quite easy and fast, right? We can finalize it up by adding the theme template for the custom post type. As we already knew, to make a theme template for a custom post type, we simply name the template single-{post-type-slug}.php and add it to our theme folder. In this case, this would be single-portfolios.php.

That’s all! Instead of messing with code each time you create new post type project, you can use this plugin to handle this feature. You will 100% work on user interface. Highly recommended for web designers and someone who are new to WordPress 3.

You think the more secure blog, the more successful blogging job, don’t you? You can keep your blog secure by installing a bunch of WordPress security plugins. However, instead of activating too many plugins that have the same features, same purposes… and even some issues because of the conflicts between them, you should consider using only these top plugins that help you to do the job better.

Here is the list of Top 15 WordPress Security Plugins that have all the features you need. If you got some other plugins that are better, please help us to complete the list by dropping your thought in comment form.

Askimet and no more other plugin for spam protection

Akismet is a wonderful plugin for spam protection, really! It checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

I personally don’t use any spam prevention plugin but Askimet. Why do you need to install other plugins since you had Askimet. The spam filter of this service is really cool. I’m facing with not more than 1 spam comment a day!

AskApache Password Protect

With AskApache Password Protect, you can set password for your admin dashboard, also with any files folder in your web host without messing with your database. This plugin is specifically designed and regularly updated specifically to stop automated and unskilled attackers attempts to exploit vulnerabilities on your blog resulting in a hacked site.

Admin Log

I’m using this plugin to keep tracking all foot prints of users logged in to the blog admin area. This is updated every time a page in the admin area is accessed. Information displayed includes: admin page accessed, user, and time of access. However, this should be filtered better because it’s keeping some access pages that are unnecessary at all.

Secure WordPress

It will help to secure WordPress installation by removing miscellaneous items after the installation process which may aid hackers: Remove Error information on login page; adds index.html to plugin directory; removes the wp-version, except in admin area.

WP-Ban

Ban users by IP, IP Range, host name, user agent and referer url from visiting your WordPress’s blog. It will display a custom ban message when the banned IP, IP range, host name, user agent or referer url tries to visit you blog. You can also exclude certain IPs from being banned. There will be statistics recordered on how many times they attemp to visit your blog. It allows wildcard matching too.

WARNING: When using the WP-Ban plugin, be very careful when banning certain IP addresses, especially your own. If you accidentally ban your IP address, you won’t be getting back into your blog until you acquire a new IP.

Limit Login Attempts – Login LockDown – User Locker

These plugins are very useful for protecting WordPress login page if you combine them into a set of 3.

Limit Login Attempts will shut down anybody who fails X number of logins from a specific IP address (using auth cookies). It keeps tracking all failed IPs, emails you in the event of a lockout, and is the perfect solution for keeping nosy relatives out of your admin area.. Download

—–

Login Lockdown is a great security plugin to prevent some people guessing your password to login to your site. It records the IP address and timestamp of every failed login attempt. This helps to prevent brute force password discovery. Download

—–

User Locker plugin is a great solution to limit the number of invalid logins for specific user. Once the plugin has been installed, it is set by default to lock the user’s account after 5 invalid login attempts. Furthermore, you can manually lock any user via plugin setting. This is a really helpful for some blog, magazine that have more than one user. Download

WP Security Scan

Nice plugin helps you to scan your WordPress installation for security vulnerabilities and suggests corrective actions: passwords, file permissions, database security, version hiding, WordPress admin protection/security…

Admin SSL

Secure WordPress login and admin pages for that extra bit of security with Admin SSL. This plugin forces SSL on all pages where passwords can be entered so that all information transmitted are encrypted. However, you have to own a SSL certificate before you can do it. If you are not willing to shell out the extra money to buy a private SSL certificate, you can ask your Web host about Shared SSL. Most webhosting provide Shared SSL for all their clients and it is easy to configure.

Stealth Login

Stealth Login obfuscates your login page by allowing you to define a custom login page rather than the default wp-login.php. In the event that your password is leaked, the hacker will also have a hard time finding the correct login URL. A good use of this is to prevent any malicious bots from accessing your wp-login.php file and attempting to break in.

WordPress Database Backup

WordPress database backup creates backups of your core WordPress tables as well as other tables of your choice in the same database. It’s very simple to use! If you need only the backup feature for your blog database, this is your best choice.

WP-DBManager

One of the widely used and one of the must have plugin for wordpress is WP-DBManager. A very popular plugin for database management. This plugin is not only perfect for doing automated backups, it can also do things like database optimization and the admin pages for it allow you to do the occasional query from within WordPress! You can schedule to back up your database and email it to your email. You can also run mysql query in plugin setting page. With WP-DBManager, you won’t need any other plugin for your wordpress database, you can find all the needed features in this all in one plugin.

TAC (Theme Authenticity Checker)

TAC helps you to scan your themes for any unwanted or potentially dangerous code. This is a helpful plugin for you to check any theme you download somewhere to make sure the theme is safe for using.

WP Sentry

This is a simple plugin just for privacy reason. WP Sentry restricts access to the post for specific users, groups…and a little more granular access controls.

Extended Reading:

There are some helpful articles and tutorials helps you to secure your WordPress better.

• WordPress Security Tips and Hacks
• 11 Best Ways To Improve WordPress Security
• Hardening WordPress
• 12 Essential Security Tips and Hacks for WordPress
• 5 Plugins to Keep WordPress Secure
• How to Keep WordPress Secure

WordPress is getting popular now and everyone is switching to use WordPress because we can build anything with WordPress: WordPress as a magazine, WordPress as a bulletin board, Video site ….. Today, I would like to put all my love for WordPress into this tutorial to explain how to build WordPress as a Community News, … but in a right way.

In WordPress, the popular plugin for us to build community news submission is FV Community News which is being used on a lot of blog pages. This plugin is really useful to add related articles from other blogs to your sidebar. Adding them manually takes lots of time we don’t have. However, FV Community News stores submissions in another table in database. That’s the problem now for someone want to build a community website where everyone can submit their news to. You can check some design community news website such as: webdesign-ne.ws, design-newz.com, scriptandstyle.com… or check my second website at whofreelance.com. They and I are not using FV Community News to handle users submissions. The plugin on these websites is TDO Mini Forms because TDO Mini Form help users submit their posts as WordPress posts.

1. Setting up your TDO Mini Form.

First, very simple, download this plugin in zip format and extract the files to a subdirectory, called tdo-mini-forms, of your plugin directory. i.e. /path_to_wordpress/wp-content/plugins/tdo-mini-forms. Then, go to plugin menu in WordPress Admin and active it. Make sure you then configure it via the main TDOMF menu in the WordPress Administration backend.

I would like to forward you a link to Tutorial Video for TDO Mini Forms! . The video is pretty good too as it shows you how to create a submission form and an edit form.

And after you know how to use the TDO Mini Form, create a submit page with the form as below:

Create new page item in WordPress Admin and name its title as “News Submission”. In my case on whofreelance.com, the permalink for this page is http://whofreelance.com/news-submission/. After that, type something about the the copyright or something like the rules for submission. Don’t forget to implement the form to this page by put this code below:

[tdomf_form1]

And this is what you get:

Now, at this step, you already done for the community website that publish users’s news submissions. No more step required for doing like all of the community design news websites I referred at the beginning of this post.

If you have not only one website or blog, and you want to display these submissions on another websites, the best way is fetching rss feed from it. However, the problem is you cannot get the direct urls to original posts because we save the users’s post urls as post meta tags. B default, post meta tags were not included in the feed. You might have a little confusing because css-tricks.com is fetching the news from scriptandstyle, or you can see I’m doing the same with AEXT.NET which are fetching users’s submission on whofreelance.com. That’s why you need to go to next step.

2. Modify the feed of the submissions.

Each post when submitted to your WordPress will appear on your feed, right? Someone will say: “Hey, it’s easy, I have the feed here, I can fetch rss and display the submissions on other websites”. The answer is “Yes, you can”. However, you can just only fetch the post title, post url or anything is belong to the article submitted except post meta tags. Refer to the first image above, I highlighted the post_url meta tags because it will be the most important part of community news.

ScriptandStyle published a post explains how to Add Custom Values To Your WordPress RSS Feed. That would be a good solution for you to put post meta tags to the feed, right? This hack will work. However, you will realize that everything (your changes) will be lost when you update WordPress.

Here is better solution. In your WordPress Admin, create another page. What’s the heck this page for? For your feed. Because you will lose your changes when you update WordPress if you hack into feed-atom.php file. So, why don’t you create your own rss file and put it into your template folder, and create a new page in WordPress Admin with the content is the content of rss file? Everything will be fine if you update WordPress or not.

[smartads]

Simple as I did, in your theme directory, create new file name it “communty-feed.php” or something you like (just keep it in secret), then copy all the content of feed-atom.php in wp-includes folder and paste into your new file you have just created.

Important: Insert these code at the head of this file.

<?php
  /*
  Template Name: Community Feed
  */

$numposts = 10;
$posts = query_posts('showposts='.$numposts);

Without query the posts and number of posts to display, the content of your new feed file will be empty and only the title of page will appear in the feed.

Set the Template Name on the head will help WordPress recognise the file, so that you can create new page in WordPress admin with the template is this page. Furthermore, add the direct url to your feed by put these code within the entry tag.

<entry>
    <author>
        <name><?php the_author() ?></name>
           <?php $author_url = get_the_author_meta('url'); if ( !empty($author_url) ) : ?>
             <uri><?php the_author_meta('url')?></uri>
           <?php endif; ?>
    </author>

    <!-- this is what we add -->  
    <directurl><?php echo get_post_meta($post->ID,'post_url',true); ?></directurl>

    <title type="<?php html_type_rss(); ?>"><![CDATA[<?php the_title_rss() ?>]]></title>

To set this page as page template, following this image:

And now, you are fine with the feed, you will not see the post meta tags in any feed readers, but the feed still work like original feed.

Fetching feed on other websites

All the feed have the same basic structure. Each feed has its children tags, and in this case, our feed is:

We will fetch only the title, published date, and the link to original post of each item. In your functions.php file, create new function to fetch all the feed items. Remember that the total number of items will be fetched is 10 because we have limited the number of post displayed in our feed is 10 as above. Refer to the image right above, using simplexml_load_file, your function will look like:

function getFeed($feed_url) {
    $xml = simplexml_load_file($feed_url);
    echo "<ul>";

    foreach($xml->entry as $entry) {
         echo "<li>";
         echo "<span class='post-date'>Posted: ".date(  "F j, Y", strtotime($entry->published) )."</span>";
         echo "<h3><a title='Permanent Link to ".$entry->title."' rel='nofollow' href='".$entry->directurl."'>".$entry->title."</a></h3>";
         echo "</li>";
     }

     echo "</ul>";

}

In your sidebar, use this code to display the feed.

<?php getFeed("http://link-to-your-feed/"); ?>

Your result:

The feed can be display by different codes, this code is just an simple code I would like to put it into this tutorial.

Some code you will be interesting to take a look for example:

• SimplePie Core for WordPress
• How to Read an RSS Feed With PHP – screencast
• Function Reference/fetch feed
• How to: Display any rss feed on your WordPress blog

Conclusion

You see? we can build anything from WordPress. The only problem is the better way to transform it and do it in a right way. I hope this tutorial will help you build a better web community news for news submission. I would appreciate all the comment the help the tut more completed.

People asked me how I mention my recent articles in WordPress sidebar by display post thumbnails and titles with a well-styled. Today, I would like to response their request. This way is being used in some blogs. I’m not sure if they are using the same method as mine, but at least we will get the same result.

When design blog theme in WordPress, I always look for non-using plugins solution. People asked me which plugin I’m using for this sidebar. No, the answer is NO.

There are a lot of WordPress plugins to display your recent articles, popular articles to mention your posts in the sidebar widget. However, you forgot that you can do the same with a simple posts query using WP_Query(); function.

To begin, create new posts object that you will call by will have_posts() and display your posts within the loop

Example:

$wp_query->have_posts();

This function is called to see if there are any posts to show. Using the while loop, and we can use have_post() as the condition. This will iterate around as long as there are posts to show.

In my case, I’m using iterations, the_post(), within the while loop to iterate around as long as there are posts to show.

<ul>

  <?php $recent = new WP_Query("showposts=35"); while($recent->have_posts()) : $recent->the_post();?>

    <li>
      <a title="Permanent Link to <?php the_title(); ?>"rel="nofollow"href="<?php the_permalink() ?>">

        <?php if(get_post_meta($post->ID, "image", true)): ?>
            <img src="<?php bloginfo('template_url'); ?>/scripts/thumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&w=25&h=25&zc=1"alt="<?php the_title(); ?>" />
        <?php else: ?>
            <img src="<?php bloginfo('template_url'); ?>/images/thumbnail.png"width="25"height="25"alt="<?php the_title(); ?>" />    
        <?php endif; ?>

      <span><?php the_title(); ?></span></a>
    </li>

  <?php endwhile; ?>

</ul>

This code above will check if you have post meta name is image, it will display the thumbnail using timthumb script. Timthumb is a small php script for cropping, zooming and resizing web images (jpg, png, gif). Perfect for use on blogs and other applications.

[smartads]

You can change the number of post will be displayed and set the condition to display number of posts in single page larger than other page because the post page is always longer than others, right?

CSS Bonus:

.widget ul {
    list-style-type:none;
    margin:5px auto 8px;
    padding:0 0 2px;
    width:auto;
}

.widget ul li {
    clear:both;
    letter-spacing:0;
    margin:0;
    padding:5px 0 0;
}

.widget ul li a {
    border-bottom:0 dotted #DDDDDD;
    color:#333333;
    font-family:Georgia,"Nimbus Roman No9 L",serif;
    font-size:11px;
    font-weight:normal;
    margin:0;
    padding:0;
    text-decoration:none;
}

.widget ul li img {
    border:3px solid #DFDFDF;
    float:left;
    margin-bottom:10px;
    margin-right:10px;
    padding:1px;
}

.widget ul li span {
    display:block;
    padding:0;
}

Conclusion

We don’t need to use any plugin for display not only such a simple list of post like that but also other simple things in WordPress. WordPress provide us WordPress Codexwhich contains a thousand of Function References. If you want to build your own WordPress theme with unique style, the first thing you need is check out how WordPress function works. Good luck, hope see more beautiful WordPress themes from the web community.

How well are you using avatar in your wordpress blog? Let see how people spice up avatar section in their wordpress. This entry provides us 10 most useful code snippets and wordpress plugins that help us control, customize our avatar in wordpress better.

Change the Default Gravatar in WordPress

add_filter( 'avatar_defaults', 'newgravatar' );

function newgravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/buildinternet-gravatar.jpg';
    $avatar_defaults[$myavatar] = "Build Internet";
    return $avatar_defaults;
}

By default, if users don’t have gravatar with their email, wordpress gives you an option that can be change the default avatar in Setting>Discussion. However, you can replace or add one more option that default avatar can be replace by your own image.
Source: Build Internet

Using Twitter avatars in comments without plug-ins

First, grab the functions file here.

Then, copy all the content of twittar.php and paste it to your functions.php file

Finally, copy and paste code line below to your comments.php file within the comment loop.

<?php twittar('45', 'default.png', '#e9e9e9', 'twitavatars', 1, 'G'); ?>

Source: WP Recipes

Automatically insert author bio on each post

Using WordPress hooks, it can be very easy to modify WordPress variables to fit your needs. In this recipe, I’m going to show you how to use hooks to automatically insert the author bio after each post.

Open your functions.php file and paste the following code. After insert these code, you can customize the css for the author bio box easily.

function get_author_bio ($content=''){  

    if(!in_category("Community News")) {

    $post_author_name=get_the_author_meta("display_name");
    $post_author_description=get_the_author_meta("description");      

    $html="<div class='clearfix' id='about_author'>\n";

    $html.="<img width='80' height='80' class='avatar' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG' alt='PG'/>\n";

    $html.="<div class='author_text'>\n";
    $html.="<h4>Author: <span>".$post_author_name."</span></h4>\n";

    $html.= $post_author_description."\n";
    $html.="</div>\n";
    $html.="<div class='clear'></div>\n";

    $html.="</div>";
    $content .= $html;

    }

    return $content;

}

Source: AEXT.NET

Checking for the Existence of a Gravatar

If you request a Gravatar image and the email you request doesn’t have an account in the Gravatar system it returns a default image to you. In some cases this might not be what you want, instead, you might want to know whether you will get back a real gravatar or if it will just be the default. Sometime, you don’t want to display avatar element instead of default avatar if users don’t have gravatar exists in your email.

WordPress Codex shows you a trick that check the header response. Return false if code response is not match with 202. Thus, you can use the Boolean value to decide display or not.

<?php

function validate_gravatar($email) {
    // Craft a potential url and test its headers     $hash = md5($email);
    $uri = 'http://www.gravatar.com/avatar/' . $hash . '?d=404';
    $headers = @get_headers($uri);
    if(!preg_match("|200|", $headers[0])) {
        $has_valid_avatar = FALSE;
    } else {
        $has_valid_avatar = TRUE;
    }
    return $has_valid_avatar;
}

?>

Source: WordPress Codex

User Avatar Photos in WordPress

WordPress has supported Gravatars for awhile, which is great, but in some cases, you want to display users avatar as their uploaded photos.

First, download and install User Photo plugin, then use code below to display their photo:

    if(function_exists('userphoto_the_author_thumbnail')) {  

        userphoto_the_author_thumbnail();

    }

Source: D’Arcy Norman dot net

Avatar Display for Logged In Users

This simple code help to display the avatar of current logged user.

 <?php
    global $current_user;

        get_currentuserinfo();

        echo get_avatar( $current_user->ID, 128 );
 ?>

Add Local Avatar

Adds local (private) avatars for your users. Maybe your users don’t want a global avatar, aren’t IT savvy enough to set a Gravatar up, simply want a private avatar for your blog, or any other reason too…

Download: Add Local Avatar

WP-Gravatar Plugin

This plugin lets you use Gravatar, MyBlogLog, OpenAvatar, Wavatar, Identicon, monsterID or Favico.ico files with your comments. But thats not all, this plugin provides you many features: gives you a Widget with your profile info and your gravatar, gives you the option to show an about the author box with posts shown on single page, let’s you show the Gravatar, OpenAvatar, Wavatar, Identicon, monsterID avatars in the Edit Comment section of your admin pages…
Download: WP-Gravatar

WP-SnapAvatar

When people comment in your blog but they don’t have avatar, such as gravatar… this plugin will allows us to take a snapshot of their website for the replacement.
Download: WP-SnapAvatar

jQuery Comment Preview

Live comment preview without page reboot. Works on jQuery.

Download: jQuery Comment Preview