Redirect feeds to a single format

Open your .htaccess file (located at the root of your WordPress install) and add the following code. Don’t forget to modify http://example.com/feed/
by your feed url, and backup your .htaccess file before editing it!

<IfModule mod_alias.c>
 RedirectMatch 301 /feed/(atom|rdf|rss|rss2)/?$ http://example.com/feed/
 RedirectMatch 301 /comments/feed/(atom|rdf|rss|rss2)/?$ http://example.com/comments/feed/
</IfModule>

Credits goes to Digging into WordPress for the cool tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Redirect feeds to a single format

Automatically redirect to current page after login

WordPress have a great function named wp_login_url(). This function displays a link to your dashboard login page. It accept one parameter: an url to redirect after the user successfully logged in. By using get_permalink() as a parameter, you’ll redirect the user to the current page.

<a href="<?php echo wp_login_url(get_permalink()); ?>" title="Login">Login to view</a>

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Automatically redirect to current page after login

Simpler WordPress login url

Open your .htaccess file (located at the root of your WordPress install) and add the following code. Remember to backup your .htaccess file before editing it!

RewriteRule ^login$ http://website.com/wp-login.php [NC,L]

Thanks to Kevin Chard for the cool tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Simpler WordPress login url

How to easily replace words in your posts

Simply put words to replace in the array on line 4. Once done, paste the code into your function.php file, save the file, and you’re done!

function replace_text_wps($text){
    $replace = array(
        // 'WORD TO REPLACE' => 'REPLACE WORD WITH THIS'
        'wordpress' => '<a href="#">wordpress</a>',
        'excerpt' => '<a href="#">excerpt</a>',
        'function' => '<a href="#">function</a>'
    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}

add_filter('the_content', 'replace_text_wps');
add_filter('the_excerpt', 'replace_text_wps');

Thanks to Kevin Chard for the cool tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

How to easily replace words in your posts

Add custom parameters into the body_class() function

Simply paste the following code into your functions.php file.

function custom_body_class($classes){
	if(is_singular()){
		$myvar = "myparam";
	} else {
		$myvar = "anotherparam";
	}

	global $post;
	array_push($classes, $myvar);
	return $classes;
}

add_filter('body_class', 'custom_body_class');

Of course, feel free to adapt the code to fit your needs. For example, a great use can be in multi-language sites: The custom parameter can be used to output the current language in the body class.

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Add custom parameters into the body_class() function

How to remove WordPress 3.1 admin bar

Paste the following piece of code into your functions.php file, save it and goodbye admin bar.

wp_deregister_script('admin-bar');
wp_deregister_style('admin-bar');
remove_action('wp_footer','wp_admin_bar_render',1000);

Thanks to Specky Boy for the tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

How to remove WordPress 3.1 admin bar

Easily create multilingual sites with WordPress

1 – Localize theme strings

Before installing a plugin on your blog, the first thing to do is to localize theme strings. PHP and the Gettext tool (which allow easy string translation) have two functions: _e() and __().

The only difference between _e() and __() is that _e() echo a string while __() is used to assign a string to a variable.

Let’s say your theme have the following code:

<div class="content">
    <h1>Welcome to my site!</h1>
    <p>I hope you'll like it.</p>
</div><!-- #content -->

What you have to do is to wrap all strings into the _e() or __() functions, as shown in the example below:

<div class="content">
    <h1><?php _e("Welcome to my site!"); ?></h1>
    <p><?php _e("I hope you'll like it."); ?></p>
</div><!-- #content -->

Once done, your string will be recognized by the WPML plugin (we’re going to install it) as translatable strings.

2 – Install and configure the WPML plugin

Now that your theme is fully localized, the next step is to install the WPML plugin, which will make our blog multilingual. Install the plugin using your WordPress dashboard, or get it here. Activate the plugin, then you’ll see a “WPML” link on your WordPress dashboard. Click on it and add at least one language.

3 – Translate theme strings

Once done, you now have to translate your theme strings in French. To do so, click on the “Theme and plugins localization” link located under the “WPML” tab. On the “Theme and plugins localization” page (See screenshot below) choose the Translate the theme by WPML option, so you’ll be able to directly provide translations in your WordPress dashboard. Though, if your prefer using a .mo file, the WPML plugin allows it as well, so feel free to choose your favorite option.

4 – Translate site content

Now, you have to translate your site/blog content. WPML provide an easy way to do it: Simply edit one of your posts or pages and have a look at the right side of the screen: you’ll see a box where you can create a translation for each of your posts and pages.

Translating your site content can take a while if your site have lots of pages, but thanks to the WPML plugin it is pretty easy to do.

5 – Translating your site menu

Right now, almost all your site is fully multilingual. Though, you still have to translate your navigation menu. To do so, simply go to “Appearance”, “Menus” and select your current menu. As you can see on the screenshot below, WPML has added some new options to allow you to create a new menu per language. How cool is that?

Right now, you should have a fully multilingual website. Hope you enjoyed this tutorial!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Easily create multilingual sites with WordPress

8 awesome new jQuery plugins to have in your toolbox

jQuery Mobile


Due to the popularity of mobile devices such as the iPhone or the BlackBerry, websites are now going mobile. jQuery Mobile is a complete framework that allow you to easily create killer mobile sites. If you want an example or a demo, just have a look to this tutorial I’ve wrote a few months ago.
And if you want me to build your mobile site, I’m your cat man. Just send me an email.

»Visit jQuery Mobile

Nivo Slider


Ah, image sliders. Nothing new about them, right? Sure, but Nivo Slider is so great that I had to write about it. This jQuery plugin allow you to create images/content slider efficiently and easily.

»Visit Nivo Slider

jCycle


jCycle is a new jQuery plugin dedicated to add smooth transitions to images. It supports 6 different transition types and is pretty easy to use. Freelancers, your clients will love it!

»Visit jCycle

Uniforms


Web forms are an essential aspect of a website, but theyr visual aspect is often neglected. Uniforms helps you to give a gorgeous look and feel to forms elements such as radio buttons or select drop downs, which are generally a pain to style using pure CSS.

»Visit Uniforms

Columnizer


Thanks to CSS3, it is now possible to display a text on X different columns easily. But as you can guess, Internet Explorer doesn’t support CSS3 yet, which means that we have to find an alternative solution to use columns on the web. Happilly, columnizer is here to help. This neat jQuery plugin will help you to render your text on columns easily.

»Visit Columnizer

Isotope


Isotope is definitely an incredible jQuery plugin which allow you to create dynamic and intelligent layouts. You can hide and reveal items with filtering, re-order them with sorting, and a lot more. Of course, Isotope allow lots of cool animations. A definitive must-see for all web developers.

»Visit Isotope

jqDnR


jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. The plugin is simple, lightweight (972 bytes) and extremely easy to implement. A great way to make your website more user-friendly.

»Visit jqDnR

jQuery Touchwipe


Do you want to create awesome images galleries for your mobile websites? If yes, then jQuery Touchwipe won’t deceive you. This plugin allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery. The plugin is only 1kb and works on Android as well.

»Visit jQuery Touchwipe

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

8 awesome new jQuery plugins to have in your toolbox

Easily display post titles with a custom length

The first thing to do is to create the function. Open your functions.php file and paste this code:

 function ODD_title($char) {
         $title = get_the_title($post->ID);
         $title = substr($title,0,$char);
         echo $title;
}

Now, you can use the function on your theme files. Just pass how many characters you want to display as a parameter. In the following exemple, only the first 20 chars of the title will be displayed:

<?php ODD_title(20); ?>

Thanks to Orange Dev Design for the tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Easily display post titles with a custom length

How to modify size of embedded videos

Simply paste the following code on your functions.php file. Don’t forget to adjust size on line 2 and 3.

function mycustom_embed_defaults($embed_size){
    $embed_size['width'] = 586; // Adjust values to your needs
    $embed_size['height'] = 500;

    return $embed_size;
}

add_filter('embed_defaults', 'mycustom_embed_defaults');

Credits goes to Shailan. Thanks for the cool tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

How to modify size of embedded videos

Change WordPress “from” email header

This recipe is pretty easy to implement: Just paste the following code into your functions.php theme:

function res_fromemail($email) {
    $wpfrom = get_option('admin_email');
    return $wpfrom;
}

function res_fromname($email){
    $wpfrom = get_option('blogname');
    return $wpfrom;
}

add_filter('wp_mail_from', 'res_fromemail');
add_filter('wp_mail_from_name', 'res_fromname');

Thanks to KeenTricks for the cool tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Change WordPress “from” email header

How to redirect your homepage to the first post

To apply this tip, paste the code below to your homepage file (Most of the time it is named index.php). Please note that you’ll receive a PHP warning if you try to display anything before the wp_redirect() function on line 10.

<?php
/*
home.php (Blog Home Page):
Redirect To First Post
*/

if (have_posts()) {
    while (have_posts()) {
        the_post();
        wp_redirect(get_permalink());
    }
}
?>

Thanks to Ashton Sanders for the tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

How to redirect your homepage to the first post

How to change WordPress editor font

Paste the following code into your theme functions.php file:

function change_editor_font(){
        echo "<style type='text/css'>
#editorcontainer textarea#content {
  font-family: Monaco, Consolas, \"Andale Mono\", \"Dejavu Sans Mono\", monospace;
  font-size:14px;
  color:#333;
}
</style>";
} add_action("admin_print_styles", "change_editor_font");

Save the file, then look at the editor :) It simple as that.

Thanks to Metin Saylan for the cool tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

How to change WordPress editor font

Killer hacks to enhance WordPress editor

Allow more HTML tags in the editor

By default, WordPress editor don’t allow html tags wich aren’t compliant with the XHTML 1.0 standard. For example, iframes will be stripped out by the editor. If for some reason you have to insert an iframe into a post or page, this can be very frustrating.

The code below will force the editor to accept more tags. Just paste it into your theme functions.php file, save it, and you’re done.

function fb_change_mce_options($initArray) {
	$ext = 'pre[id|name|class|style],iframe[align|longdesc| name|width|height|frameborder|scrolling|marginheight| marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

» Source: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

Set HTML editor as the default

I know a lot of tech-savvy persons who don’t really like WordPress “visual” editor. Personally, I don’t use it because I’m used to writing HTML, and also because WYSIWYG editors are more likely to produce bad, not valid or dirty code.

If you prefer using the HTML editor, then what about making it your blog default? Just paste the line below into your theme functions.php file, and you’re done.

add_filter('wp_default_editor', create_function('', 'return "html";'));

» Source: http://www.wprecipes.com/how-to-set-html-editor-as-the-default-in-wordpress

Set default content in WordPress editor

Do you always insert the same text on all your posts, for exemple to tell people to subscribe to your rss feed? If yes, you should definitely set up WP to have it automatically inserted in the editor.

Open your functions.php file, and paste this code. That’s all you need to do to define some default content.

add_filter( 'default_content', 'my_editor_content' );

function my_editor_content( $content ) {
	$content = "If you enjoyed this post, make sure to subscribe to my rss feed.";
	return $content;
}

» Source: http://justintadlock.com/archives/2009/04/05/how-to-preset-text-in-the-wordpress-post-editor

Add your language to spell check

By default, WordPress have an English spellchecker so you can check mistakes in your posts (Too bad it doesn’t work with grammar!). But, what if you blog in another language than English?

If you want to add another language to WordPress spellcheck, that’s actually quite easy to do. Paste the following into functions.php to add French to the spellchecker.

function fb_mce_external_languages($initArray){
	$initArray['spellchecker_languages'] = '+French=fr, English=en';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

» Source: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

Add buttons to WordPress editor

TinyMCE (The name of the WYSIWYG editor used by WordPress) have some buttons that allow you to make some text bold, insert paragraphs, and so on.
Want to insert a custom button? It’s not so hard at all. The following code show how you can do it easily. Just paste it to your functions.php file and a “Youtube” button will be displayed into your editor. Please note that this code add a button to the editor, but do not trigger any action. If you’d like to get more info about custom buttons, have a look at the source site.

function add_youtube_button() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_external_plugins', 'add_youtube_tinymce_plugin');
     add_filter('mce_buttons', 'register_youtube_button');
   }
}

add_action('init', 'add_youtube_button');

function register_youtube_button($buttons) {
   array_push($buttons, "|", "brettsyoutube");
   return $buttons;
}

function add_youtube_tinymce_plugin($plugin_array) {
   $plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
   return $plugin_array;
}

» Source: http://brettterpstra.com/adding-a-tinymce-button/

Set different editor stylesheets for different post types

Cutom post types are definitely one of the best new things added to WordPress last year. Now, you probably created some post types to display your portfolio or some code snippets. So, what about using a different stylesheet for your editor, depending on the type of the post you’re currently writing?

Just paste the following code into your functions.php file. You’ll have to adapt it a bit, depending on your post types. Don’t forget to change the stylesheets names as well.

function my_editor_style() {
    global $current_screen;
    switch ($current_screen->post_type) {
    case 'post':
        add_editor_style('editor-style-post.css');
        break;
    case 'page':
        add_editor_style('editor-style-page.css');
        break;
    case 'portfolio':
        add_editor_style('editor-style-portfolio.css');
        break;
    }
}
add_action( 'admin_head', 'my_editor_style' );

» Source: http://wpstorm.net/2010/04/editor-styles-custom-post-types-wordpress-3-0/

Display hidden buttons in TinyMCE

By default, the TinyMCE editor have buttons for most common tasks such as bold text, italic, titles, etc. But you may need other text formatting options, like, for example, horizontal rules.

To reveal hidden buttons, simply add this code to your functions.php file:

function enable_more_buttons($buttons) {
  $buttons[] = 'hr';
  $buttons[] = 'fontselect';
  $buttons[] = 'sup'; 

  // etc, etc... 

  return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");

The available buttons are: bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, charmap, visualaid, anchor, newdocument, and separator.
» Source: http://www.sycha.com/wordpress-add-hr-button-tinymce-visual-editor

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Killer hacks to enhance WordPress editor

Automatically add Twitter and Facebook buttons to your posts

Paste the code below into your functions.php file, save it, and you’re done.

function share_this($content){
    if(!is_feed() && !is_home()) {
        $content .= '<div class="share-this">
                    <a href="http://twitter.com/share"
class="twitter-share-button"
data-count="horizontal">Tweet</a>
                    <script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
                    <div class="facebook-share-button">
                        <iframe
src="http://www.facebook.com/plugins/like.php?href='.
urlencode(get_permalink($post->ID))
.'&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;colorscheme=light&amp;height=21"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px; height:21px;"
allowTransparency="true"></iframe>
                    </div>
                </div>';
    }
    return $content;
}
add_action('the_content', 'share_this');

Thanks to Dev7Studios for this awesome recipe!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Automatically add Twitter and Facebook buttons to your posts