Unknown 9:59 PM

Use Twitter Bootstrap in your WordPress Theme

WordPress is great, Bootstrap is cool, I want to use them together!

For Twitter Bootstrap to work you need to include at least three files in any of your web pages:

bootstrap.css (included with the Bootstrap download)
bootstrap.js (included with the Bootstrap download)
jquery.js

A WordPress theme needs, at a bare minimum, two files: style.css and index.php.

Download WordPress and install it. Create a new theme. Download Bootstrap and unzip it to your theme’s folder. OK.

Step one

Include bootstrap.css in your theme style.css:

@import url("bootstrap/css/bootstrap.min.css");

In fact, here’s the complete style.css:

/*
Theme Name: My New WordPress Theme
Theme URI: http://localhost
Description: WordPress Test Theme
Author: My Name Here
Author URI: http://localhost
Template:
*/

/*
 *  1. Import the Bootstrap css
 */

@import url("bootstrap/css/bootstrap.min.css");

/*
 *  Some fancy styling for Bootstrap spans
 */

.span4, .span8
{
background-color: #ade;
}

Step two

Bootstrap needs JQuery to work so link to it in your theme index.php:

<!-- 2. Bootstrap needs JQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Step three

Include bootstrap.js in index.php:

<!-- 3. Import Bootstrap.js -->
<script src="bootstrap/js/bootstrap.min.js"></script>

index.php looks like this:

<! DOCTYPE html>

<html>
<head>
<title>My New WordPress Theme</title>

<!-- The theme's style.css file -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<!-- 2. Bootstrap needs JQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- 3 .Import Bootstrap.js -->
<script src="bootstrap/js/bootstrap.min.js"></script>

<?php wp_head(); ?>
</head>
<body>

<!-- Bootstrap in action -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<p>Just to</p>
</div>
<div class="span8">
<p>see if it works</p>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">create</a></li>
<li><a href="#">a few</a></li>
<li><a href="#">stacked</a></li>
<li class="active"><a href="#">Bootstrap</a></li>
<li><a href="#">pills</a></li>
</ul>
</div>
<div class="span8">
<p>Random content here.</p>
</div>
</div>
</div>

<?php wp_footer(); ?>        
</body>
</html>

Unknown 9:58 PM

Create a Custom Action Hook Wordpress

The Codex says:

Hooks are provided by WordPress to allow your plugin to 'hook into' the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion. There are two kinds of hooks:

Actions: Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.

Filters: Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen.

Action hooks are triggered by events in WordPress and are providedby scores – and every time a hook is triggered all functions (callbacks) you or anybody else attached to it are executed automagically.

There’s no magic really. All available hooks are stored in a global variable called $wp_filter, a PHP associative array that has hook names for keys.

You hook your functions to an action using add_action() - add_action() adds your function name to the $wp_filter element with the key that is equal to the hook name you specified. If such an element does not exist it is created – added to $wp_filter.

Your functions attached to a hook are executed when you call do_action(‘action_name_here’). do_action() checks $wp_filter for ‘action_name_here’ and executes all functions attached to it, if any.

This allows you to create your own custom action hooks in two and a half easy steps, as seen below (somewhere in my theme’s functions.php):

<?php

/* a custom action hook */

/*
 * 1. Create your own custom action hook named 'the_action_hook'
 *    with just a line of code. Yes, it's that simple.
 *    
 *    The first argument to add_action() is your action hook name
 *    and the second argument is the name of the function that actually gets
 *    executed (that's 'callback function' in geek).
 *
 *    In this case you create an action hook named 'the_action_hook'
 *    and the callback function is 'the_action_callback'.
 */

add_action('the_action_hook', 'the_action_callback');

/*
 * 2. Declare the callback function. It prints a sentence.
 *    Note that there is no return value.
 */

function the_action_callback()
{
echo '<p>WordPress is nice!</p>';
}

/*
 * 3. When you call do_action() with your action hook name
 *    as the argument, all functions hooked to it with add_action()
 *    (see step 1. above) get are executed - in this case there is
 *    only one, the_action_callback(), but you can attach as many functions
 *    to your hook as you like.
 *
 *    In this step we wrap our do_action() in yet another
 *    function, the_action(). You can actually skip this step and just
 *    call do_action() from your code.
 */

function the_action()
{
do_action('the_action_hook');
}

?>

and execute them (my theme’s index.php):

<!DOCTYPE html>

<html>
<head>
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" media="all"
href="&lt;?php bloginfo( 'stylesheet_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div>
<div>
<h1><a href="&lt;?php echo esc_url( home_url( '/' ) ); ?>">
<?php blogInfo( 'name' ); ?></a></h1>
</div>
<div>
<?php if(have_posts()): while(have_posts()): the_post();?>
<h2><a href="&lt;?php the_permalink() ?>"><?php the_title() ?></a></h2>
<div>
<?php the_content(); ?>
<!-- Yay! this line should print 'WordPress is nice!'
                             after all your posts. -->
<?php the_action(); ?>
<!-- This line should also print 'WordPress is nice!'.
                             This time no wrapper function for do_action(). -->
<?php do_action('the_action_hook'); ?>
</div>
<?php endwhile; endif; ?>
<?php wp_footer(); ?>
</div>
<div>
<?php get_sidebar(); ?>
</div>
</div>
</body>
</html>

Unknown 9:53 PM

Send article to a friend by email

In order to create more traffic on your blog, it can be a good idea to let your readers send your posts to their friends by email. A few month ago, I already shown you a function to do that, here is an improved version for today.

To apply this recipe to your blog, simply paste the following function into your functions.php file, and that's all. Hard to do something simpler!

function direct_email($text="Send by email"){   
       global $post;  
        $title = htmlspecialchars($post->post_title); 
         $subject = 'Sur '.htmlspecialchars(get_bloginfo('name')).' : '.$title; 
         $body = 'I recommend this page : '.$title.'. You can read it on : '.get_permalink($post->ID);  
        $link = '<a rel="nofollow"
 href="mailto:?subject='.rawurlencode($subject).'&amp;body='.rawurlencode($body).'"
 title="'.$text.' : '.$title.'">'.$text.'</a>';
          return $link;
  }

Unknown 9:51 PM

Enable TinyMCE editor for post the_excerpt

Adding this code to the functions.php of your wordpress theme will add the TinyMCE editor to the post excerpt textarea.

function tinymce_excerpt_js(){ ?>
<script type="text/javascript">
        jQuery(document).ready( tinymce_excerpt );
            function tinymce_excerpt() {
                jQuery("#excerpt").addClass("mceEditor");
                tinyMCE.execCommand("mceAddControl", false, "excerpt");
            }
</script>
<?php }
add_action( 'admin_head-post.php', 'tinymce_excerpt_js');
add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');
function tinymce_css(){ ?>
<style type='text/css'>
            #postexcerpt .inside{margin:0;padding:0;background:#fff;}
            #postexcerpt .inside p{padding:0px 0px 5px 10px;}
            #postexcerpt #excerpteditorcontainer { border-style: solid; padding: 0; }
</style>
<?php }
add_action( 'admin_head-post.php', 'tinymce_css');
add_action( 'admin_head-post-new.php', 'tinymce_css');

Unknown 9:21 AM

Right Way Of Using WordPress Homepage Conditionals

WordPress is a terrific CMS. You can do whatever you want with it. But sometimes, you may find an issue with some basic functions. For example, you are probably using the is_front_page and is_home WordPress Homepage conditional in your themes and plugins (you can learn more about conditional functions in our Conditional Tags post). But you’re doing it wrong !

Homepage Settings

With those conditional functions, you can check if the homepage is being displayed (is_home), or if the homepage is using a static page (is_front_page). You can define such behaviour in Settings=> Reading.

In your plugin or theme, you may use this functions to display or change contents depending on user settings. But you are doing a huge mistake : you are not taking into account the static blog page. When you define a static page for your homepage, you can also define a blog page : it will replace the default WordPress homepage in order to list every post.

Long story made short : is_front_page should always be tested with and before is_home. And here’s why.

How It Works

1. Normal settings:

The default WordPress homepage lists your latest posts.

Here is the URL : website.com
is_home returns TRUE
is_front_page returns TRUE

Here, there isn’t any issue.

2. Static homepage:

The homepage is using one of your static pages.

The URL is still website.com
is_home returns FALSE
is_front_page returns TRUE

There is no issue with your static homepage : is_front_page returns true.

3. Static blog page

One of your page is listing all your post.

The URL is website.com/pagename
is_home : TRUE
is_front_page : FALSE

Here, you may have some problems : is_home is returning TRUE, but this is not your homepage : it’s a WordPress page that lists every post, like a main category archive would do.

Use Conditional Tags

When you create a plugin or a theme, you have to consider that users may use those page settings. So, every time you use is_home, you should always test is_front_page before, and you always should use conditional parameters to do so.

If you don’t, you may have problems with some users. For example, if you only test is_home to display your homepage content, there will be issues with the static homepage that will not display the right content.

Here is how to do it right :

if ( is_front_page() && is_home() ){
	// Default homepage
} elseif ( is_front_page()){
	//Static homepage
} elseif ( is_home()){
	//Blog page
} else {
	//everything else
}

This is the only (right) way to display or alter content with your homepage and your blog page.

How About You?

Did you already encounter this problem? What was your solution? I want to hear about it!

Use Twitter Bootstrap in your WordPress Theme

Create a Custom Action Hook Wordpress

Send article to a friend by email

Enable TinyMCE editor for post the_excerpt

Right Way Of Using WordPress Homepage Conditionals

Homepage Settings

How It Works

Use Conditional Tags

How About You?

Labels

Followers

Popular Posts

Labels

Popular Posts

Labels