leverage the WordPress API to define our own custom meta boxes for attaching a document (such as a PDF) to our WordPress pages.

The Specials Board theme includes .seestyle files for all programming languages that Coda supports out of the box. Not just Ruby, PHP, XHTML, CSS and the others referenced in the demo screencaps, but ASP, Python, Smarty, Action Script, Java and all the others.

The WordPress Theme Files Execution Hierarchy

First create a functions.php for your child theme and add

// Show Wp-PageNavi when it's active function twentyeleven_child_content_nav( $nav_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <?php /* add wp-pagenavi support for posts */ ?> <?php if(function_exists('wp_pagenavi') ) : ?> <?php wp_pagenavi(); ?> <br /> <?php else: ?> <nav id="<?php echo $nav_id; ?>"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3> <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div> </nav><!-- #nav-above --> <?php endif; ?> <?php endif; }

Next copy index.php to your child theme folder and change line 31 to
<?php twentyeleven_child_content_nav( 'nav-below' ); ?>

If wp-pagenavi is installed it will show it, if it isn’t, it’ll show the default next/previous

Target: Click on the entry titles from homepage, then load the content without AJAX refreshing, and display the SlideDown effect with jQuery.

HTML Structure:

<div class="post-home">
    <div class="post-title"><h2>title</h2></div>
    <div class="post-content"><p>content</p>
</div>

In functions.php, add:

function ajax_post(){
    if( isset($_GET['action'])&& $_GET['action'] == 'ajax_post'){
        $ariticle_id=$_GET['id'];
        query_posts("p=$ariticle_id");the_post();the_content();
        die();
    }else{
        return;
    }
}
add_action('init', 'ajax_post');

Then we can display the content of id=123 entry using links like http://YOU-DOMAIN.COM/?action=ajax_post&id=123.

The jQuery AJAX code:

$('#postlist .post-home .post-title').click(function() { //The event of clicking on titles
    if($(this).next().html()=="" || $(this).next().is(":hidden")){ //If the entry has no content or is 'display:none', implement following code
 
    var postId=$(this).parent().attr("id").replace(/^post-(.*)$/,'$1'); //Get entry ID
    var postContent=$(this).next();
    $.ajax({
        url:"?action=ajax_post&id="+postId,
        success:function(data){
            $('#postlist .post-home .post-content').slideUp(500);
            postContent.html(data).slideDown(500);
        }
    });
    return false;
    }else{ //Or, implement following code
        $(this).children().children().text('LOADING......'); /change title
        window.location = $(this).children().children().attr('href'); //Open article link
    }
});

What this tutorial will cover:

1. Organizing folders.
2. Adding jQuery to your site.
3. Including a new script (js) file.
4. Adding a loop handler php file (loop.php or loopHandler.php).
5. Copying loop from main index file to our loop handler.
6. Cleaning up the loop.
7. Including wp-load.php (it’s what makes this whole thing work well)
8. Storing GET data as variables in our handler.
9. Using wp-query.
10. Using jQuery, create our AJAX call function.
11. Success!
12. Displaying data on page scroll.
13. Adding a loader gif.

It’s better when developers create a meta box that can show which information is needed and give some explanations to users. In this tutorial, we’ll see how to creating a better meta box in WordPress post editing page.

Creating meta boxes is a crucial part of WordPress theme/plugin development. It’s a way to add an appealing editor to the post screen and avoids forcing users to rely on custom fields. If you’ve ever created a custom post type in WordPress, you’ve probably wanted to add some sort of additional data to it. Sure, you could use custom fields, but that’s ugly. Getting started with custom meta boxes is easy, so let’s dive in!

We’ll focus on user specific data, so what we’ll see is:

1. How to add extra registration fields
2. How to add and remove profile fields
3. Export the user data
4. Bulk export users data
5. Create a web history of the user