WordPress 2.8.2 Released to Fix Possible Exploit (Security Patch)

Not long ago WordPress released its version 2.8.1, but there has been another update. WordPress 2.8.2 was released today as a security patch to fix the possible exploit.

WordPress 2.8.2 fixes an XSS vulnerability. Comment author URLs were not fully sanitized when displayed in the admin. This could be exploited to redirect you away from the admin to another site, as said on WordPress Official Blog.

It is strongly recommend that you upgrade your WordPress either automatically from your WordPress admin panel, or download WordPress 2.8.2.

15+ Plugins to Unleash the Invincible Power of jQuery and WordPress

jQuery, one of the best things that happened to programming. jQuery is fast and concise yet it is able to produce mind blowing animations and interactions. On the other hand, we have WordPress, which is known best for its customization. When customized, it can ultimately power any type of website. In this post we are going to combine these two powerful elements by the use of the plugins below to create effects that will rock your WordPress site.

1. J Post Slider

J Post Slider

This plugin will rotate latest posts from blog, presented with selected image, post headline, and optional post excerpt. One post can have one J Post Slider, image for this animation. This is a feature rich plugin which let you set up how many post to rotate, which posts you want to show, animation speed, and much more.

2. Live Blogroll

Live Blogroll

Live Blogroll will make your blogroll livelier. It will show a number of ‘recent posts’ for each link in your Blogroll using Ajax. When the user hovers the mouse above the link, RSS feed from the site is automatically discovered and a number of recent posts is shown dynamically in a box. Live Blogroll uses internal caching for feed discovery and WordPress caching for RSS feeds to make sure everything is smooth. The looks of the hover box are fully customizable with CSS, and the position is editable in the options.

3. GD Star Rating Plugin

GD Star Rating

GD Star Rating features full rating and review support that will allow you to integrate ratings into comments, posts, and pages. You can also display Rating and Review aggregation data such as stats on your sidebar and tons of more feature.

4. WP Wall

WP Wall

WP Wall allows readers to add a quick comment about the blog as a whol. The comment will appear in the sidebar immediately, without reloading the page. All comments are internally handled by WordPress so that means you have normal comment moderation, SPAM protection and new comment notification.

5. jQuery Light Box

jQuery Light Box

This plugin makes the smaller image larger on the page and overlay it on the content with the description text.

6. jQuery Comment Preview

Comment Preview

This plugin allows your users to preview their comments without refreshing the page by using the html editor which is their comment field.

7. Insights

Insights

Insights is a powerful tool to write your blog posts. It increases productivity and the quality of your posts by using dynamic AJAX interface. This interface loads the relevant information about your post in seconds. Insights performs following functions: Interlink your posts, Insert Flickr images, Insert Youtube

videos, Search Wikipedia, Search Google, Insert a Google Map and more.

8. Slimbox 2

Slimbox

More powerful clone of jQuery Light Box plugin. It slides out the image to overlay above the content when clicked.

9. WordPress Sidebar Turned Apple-Flashy

WordPress Sidebar Turned Apple-Flashy

This tutorial show you how to create an Accordion plugin in jQuery UI to get the sidebar like the Apple Startpage. It also lets you control whether to show or hide the sidebar.

10. Comment Form Validation via jQuery

Comment Form Validation via jQuery

Sometimes it frustrates the user when a page reloads just to show them a validation error because most of the time their data gets lost also. This tutorial will help you use jQuery, to make an instant on-page validation for your comment form.

11. Snazzy Archives

Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. Your archive page will never be boring again!

12. My Page Order

My Page Order

My Page Order allows you to set the order of pages through a drag and drop interface. The default method of setting the order page by page involves alot of codes, and it can get hectic when you have alot of pages. jQuery is used for a smooth drag and drop effect. This plugin, also lets you organize categories, and blogroll links.

13. Shockingly Big IE6 Warning

Shockingly Big IE6 Warning

The Shockingly Big IE6 Warning is a plugin that shows a warning message alerting the user why is bad to use IE6, the security risk and the bad compatibility of Web Standards. There are multiple different ways you can show the error to the user through this plugin. Best to use this if your site is not compatible with IE6.

14. Lively WordPress login via jQuery

Lively WordPress login via jQuery

A creative use of jQuery lightbox to simplify the process of client login.

15. WP-Imagefit

Rather than relying on a CSS or HTML-driven approach to resize large or wide images, WP-Imagefit relies on Javascript to proportionately resize images based on the width of the containing column.

16. jQuery Carousel

jQuery Carousel

This tutorial was suggested in the comment, and it is a great plugin to display your recent posts in a carousel fashion.

How to Limit the Number of Archive Months Displayed in WordPress?

If you visit some blogs, their sidebar is filled with archive months. There are some people who like to have archive links in the sidebar because they want their user to browse easily, and there are some who just want to show how old their blog really is. But to the majority of the users, having 26 months listed in the sidebar is a waste of space. Therefore we will show you how to limit the number of archive months displayed in WordPress.

In most themes, you will see the code in sidebar.php to be some what like this:

<h2>Archives</h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>

These codes are the default ones that come with many theme. It works out perfectly fine for the first few months, but as your blog gets older, it becomes a clutter in the sidebar. So you should change it to the following codes:

<h2>Archives</h2>
<ul>
<?php wp_get_archives(‘type=monthly&limit=6’); ?>
</ul>

You can change the number 6 to the number of your choice. This is a perfect compromise for those who want to help users browse few older months, but not have clutter. In our next tutorials we will show you how you can make yourself a custom Archive page for WordPress.

Installing WordPress on a Local Server Environment

As you might already know you need a web host to be able to install WordPress. In this tutorial however, we’ll learn how to install WordPress locally. Having a local installation of WordPress allows us to quickly test any plugin or theme without having to worry if it’ll work on your live site or not. It is also a great way of working on your theme development while you’re on the road, as you won’t be needing an Internet connection.

Before we begin installing Worpress on our computer, make sure that you already have a local web server set up.

We have created a video tutorial for you guys to follow, so you can setup a local server environment for either PC, Mac, or Linux.

Setting up a Local Server Environment for Windows

Setting up a Local Server Environment for Mac OS X

Setting up a Local Server Environment for Linux

Once you have installed a local server on your computer by following one of the tutorials above, you are now ready to install WordPress in that local server. Follow the video tutorial below:

Installing WordPress into a Local Server

Congratulations, Now you should have WordPress installed in your local server.

14 Truly Artistic WordPress Header Designs

WordPress designs are often overlooked, and so are some of the web designers. But the truth is that there are a lot of WordPress designs that are worthy of the same attention as other art works receive in galleries. Below we have highlighted 14 truly artistic WordPress header designs that will make you look twice and want to stare at it for hours.

While we have tried to interpret what is going on in the design, only the artist can give us the real meaning. We are welcoming all artists, if they see this post, please post a comment with a mini description, and we will add it in this post.

1. Ma.tt

Ma.tt

This is the blog of WordPress Founder, Matt Mullenweg. Matt has a very attractive header design for his WordPress. It is one of the most creative headers we have seen to be used on a WordPress blog. The grunge text style, with perfect colors and lighting effects make this header outstanding.

2. Web Designer Wall

Web Designer Wall

This design by Nick La has received hundreds of positive reviews, and it is ultimately one of the best rated blog designs on the web. Nick has done an amazing job in displaying the true colors which are eye friendly, along with the perfect positioning of the logo.

3. Web Designer Depot

Web Designer Depot

Walter Apai, the guy behind WDD has done an astonishing job with the header design which brings life to the site as a whole. The interactive header design shows the expert art touches which a user can just stare at for hours.

Correction: Walter has informed us that the design was done by Radim Malinic

4. Ayaka Ito

Ayakaito

Ayaka Ito is a media designer who have really shown the creative touch on his blog. There is so much that is going on in the header, that it almost make a mind wonder what was the artist thinking.

5. Deborah Cavenaugh

Deborah Cavenaugh

This site’s header has a lot going on. It shows the true form of water color type art on a WordPress header. Would be curious to know what Deborah was thinking when this site was designed.

6. N.Design Studio

N.Design Studio

This site is also a production of Nick La who is known for his artistic designs. This header has very eye friendly color, and perfect logo placement. Although it is questioning what the birds are doing there, but whatever it is, it looks magnificent.

7. Jason Bradbury

Jason Bradbury

Jason has a very interactive header on his website. The effective use of javascript and displays of images assures that he is really into gadgets like the website suggests. Header gives off a good first impression, a bit slow to load on occasions, nonetheless it is an amazing piece of artwork.

8. Ozon3

Ozon3

The designers of ozone has shown a very vivid header which even though does not look like has a lot going on, it does. The beautiful use of color, and the greenery effect makes this header a creative piece of art.

9. Amour Chaleur

Amour Chaleur

After reading this site, it gives us the description of the name, Amour Chaleur. It is a French word for love and warmth. The designer make sure to convey that message through this welcoming header design. The scenery in the header just makes one want to stare at it for hours.

10. Carbon Sugar

Carbon Sugar

The header design on Carbon Sugar shows that the author of this site is a hard worker which is indicated by the coffee. There is a ruler, paper, and other real life objects. This sort of theme is becoming rather common now in WordPress Blogs as there are quite a few that are using the coffee cup style.

11. That Indie Dude

That Indie Dude

The header of this site tells the user what this site is about and makes it clear in a very creative way. The picture you see at the top is a cartoon character of the owner Alex Linebrink. He says in the about page to be indie, you have to be independent, and you have to be original. We can assure you Alex that you are doing a good job with your goal. Very creative piece of work.

12. Cult Foo

Cult Foo

Cult Foo has a very colorful header with a lot of art work. The birds are picking up the pixels like its a piece of mail. It is hard to understand what message the designer is trying to convey.

13. Basmati Tree

Basmati Tree

The header of this site is not very colorful, as it is using the grunge style. It just makes one wonder what is this piece of art trying to convey. What message is it sending out there. From the looks of the site it is a design blog, but from the looks of header, you can’t really tell that.

14. J.R.Velasco

J. R. Velasco

Velasco has created a true master piece art work. People can stare at it and argue about what is the message this art is trying to convey, and still won’t come up with the conclusion.

Sources

Without these resourceful sites, we would not be able to make this collection.

If you want your site to get the same exposure, consider submitting it to the following galleries because most designer magazines, or sites like ours browse them to make our lists.

How to Add a Retweet Button on Your Blog

Twitter has seen exponential growth in the past year which is the reason why more and more bloggers are now sharing their stories on twitter. If you haven’t seen one of the cool Retweet buttons on some of most famous blogs, then you are missing out.

In this article, we will show you how to add a Retweet Button in all of your posts, so your audience can Tweet your stories with one click.

There are two ways to add this button in your site. First is through the WordPress Plugin called Tweetmeme

Upload the plugin into /wp-content/plugins/ directory.

Activate it, and then visit the settings page.

You can change the RT @tweetmeme which is default to RT @yourusername. In our case it would be RT @mywordpresstricks.

This plugin also allows you to choose the location of the button placement. Top Right Corner, Top Left Corner, and so on.

The second way is to do it by placing the codes in your templates file of your choosing at the location that you desire.

For the Large Button:

<script type=”text/javascript”>
tweetmeme_source = ‘mywordpresstricks’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”> </script>

For the Compact Button:

<script type=’text/javascript’>
tweetmeme_style = “compact”;
tweetmeme_source = ‘mywordpresstricks’;
</script>

Remember to change mywordpresstricks to your twitter name. Now you have a Retweet button on your posts. You are on your way to getting more exposure.

WordPress Theme Cheat Sheet for Beginners

There are many codes to memorize just to modify a WordPress theme, so it helps to have a mini cheat sheet if you are looking to make minor changes or even developing your own theme. This is why we have decided to list a few codes that you can probably use for reference when editing themes. Bookmarking this page, or print this article and paste it on your desk.

Basic Template Files

Below is the list of basic files that every theme should have.

  • style.css
  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php
  • page.php
  • comments.php
  • 404.php
  • functions.php
  • archive.php
  • searchform.php
  • search.php

Codes in Header.php

These codes are mostly seen in header.php although some of these might be seen throughout your template files. Codes like Location of Site’s Theme Files are used to call for image URLs all over the template, same goes with the exact url of the site code. But most of these codes will be found in your header.php file.

<?php bloginfo(‘name’); ?> – Title of the Blog, or Blog Name

<?php wp_title(); ?> – Title of a Specific Page

<?php bloginfo(‘url’); ?> – Exact URL for the Site

<?php bloginfo(‘description’); ?> – Site’s Description

<?php bloginfo(‘template_url’); ?> – Location of Site’s Theme File

<?php bloginfo(‘stylesheet_url’); ?> – Link to the Style.css location

<?php bloginfo(‘rss2_url’); ?> – RSS Feed URL for the Site

<?php bloginfo(‘pingback_url’); ?> – Pingback URL for the site

<?php bloginfo(‘version’); ?> – WordPress Version Number

Codes for Other Template Files

Codes below will be seen across all template files such as single.php, index.php, page.php and so on. Its really easy to call on these codes to make your theme dynamic when coding it.

<?php get_header(); ?> – Displays Header.php file content

<?php get_footer(); ?> – Displays Footer.php file content

<?php get_sidebar(); ?> – Displays Sidebar.php file content

<?php comments_template(); ?> – Displays Comment.php file content

<?php the_content(); ?> – Displays the Content of the Post

<?php the_excerpt(); ?> – Displays the excerpt that is used in Posts

<?php the_title(); ?> – Title of the Specific Post

<?php the_permalink() ?> – Link of the Specific Post

<?php the_category(‘, ‘) ?> – Category of a Specific Post

<?php the_author(); ?> – Author of the Specific Post

<?php the_ID(); ?> – ID of a Specific Post

<?php edit_post_link(); ?> – Edit link for a Post

<?php next_post_link(‘ %link ‘) ?> – URL of the Next Page

<?php previous_post_link(‘%link’) ?> – URL of the Previous Page

<?php get_links_list(); ?> – Lists all links in Blogroll

<?php wp_list_pages(); ?> – Lists all Pages

<?php wp_get_archives() ?> – List Archive for the Site

<?php wp_list_cats(); ?> – Lists all Categories

<?php get_calendar(); ?> – Displays the Built in Calendar

<?php wp_register(); ?> – Displays Register Link

<?php wp_loginout(); ?> – Displays Login/Logout Link only to Registered Users

Hopefully this has helped you guys. Please spread it around by sharing it with your friends. Bookmark this page to delicious and tweet it.

How to Display Raw Codes in Your WordPress Blog Posts

WordPress while being a great software sometimes have its shortcomings. One of them is that it executes every code that you insert in your blogpost. While that is an excellent feature, it sometimes become a problem for those users who are writing a tutorial that requires them to give their users the HTML or PHP code in the post for their audiences to copy and paste. For example if you want to show your audience, how to italicize a text in WordPress, you will ask them to use <em>, but if you put it like that then it will end up italicizing a text, and not showing your users the code.

In this article we will show you how to display raw codes in your WordPress blog posts, so your users can not only see it, but copy and paste it if necessary.

First thing you need to do is write the code, the way you would normally write it. For example if we ask you guys to link to us and give you a code, it should look like:

<a href=”http://www.mywordpresstricks.com” target=”_blank”>MyWordPressTricks</a>

Then you will need to head over to one of the tools on the web that can encode the HTML tags such as Postable or HTML Encoder. Paste your code in their input box and encode it, or in other words make it friendly. Once you encode, your code should look something like:

&lt ;a href=”http://www.mywordpresstricks.com&quot ; target=&quot ;_blank&quot ;&gt ;MyWordPressTricks&lt ;/a&gt ;

If you don’t use these tools that are mentioned above and post the tag normally, WordPress will execute your code:

MyWordPressTricks

You may surround the codes with a <code> tag to have a more noticeable css styling, or any other css class of your choosing.

Now you can display Raw Codes in Your WordPress Blog Posts.

How to Change the Default Gravatar on WordPress

Implementation of Gravatar is an uprising trend that is being seen on many WordPress Blogs. More and more blogs are following the trend by incorporating the gravatar. Not only bloggers, but theme designers are also focusing on making the best comment box for their WordPress themes and implementing gravatar with creativity.

While bloggers may know about gravatar and have an account, there are other users who don’t have a personal gravatar, so when they post a comment on a blog, a mystery man takes over their gravatar. You probably have seen it on many blogs, on a gray background a white guy. In this article we share a way to have a custom gravatar for your blog users which you can incorporate in your blog.

Good Bye Mystery Man

As you can see in our comment box, when a user who does not have a gravatar account comments, our MyWordPressTricks logo shows up. You can do the same now. First thing you need to make sure is that your theme have gravatar enabled.

1. Open your functions.php file which is located in your themes folder.

2. Then paste the following code in there

add_filter( ‘avatar_defaults’, ‘newgravatar’ );

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo(‘template_directory’) . ‘/images/gravataricon.gif’;
$avatar_defaults[$myavatar] = “MyWordPressTricks”;
return $avatar_defaults;
}

You need to understand the variables in the code above.

‘/images/gravataricon.gif’ is the location of the image file. It must be saved under the theme folder that you are using.

Change MyWordPressTricks to the name that you want to give your Gravatar and you should be all set.

3. Upload this file

4. Login to your WordPress Admin Panel and click on Settings > Discussion

Gravatar Settings

Your gravatar now show up like the picture above displays. Select it and save changes, and you are all set.

Now you should be able to change your gravatar in no time.

How to Display Recent Posts From A Specific Category In WordPress

For advance users who want to display recent posts from a specific category, we have this article specially for you. Beginner users will most likely not use this. This tutorial is mostly used in creating magazine style themes.

01 <?php
02 $catquery = new WP_Query( 'cat=3&posts_per_page=10' );
03 while($catquery->have_posts()) : $catquery->the_post();
04 ?>
05 <ul>
06 <li><h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
07
08 <ul><li><?php the_content(); ?></li>
09 </ul>
10 </li>
11 </ul>
12 <?php endwhile; ?>

At the top where it says showpost= change the number to how many posts you want to display, and cat=3 is the id of the category, so change the ID of the category to pick which category will you be displaying.

The news style format where it displays recent news from each category is accomplished using the code above.