Wonder was a short animation exercise to showcase After Effects knowledge with typography, compositing and creativity.

Reflecting on “Wonder”, I could clearly see my design style which was quite confronting. Normally I am quite a calculated person, but when I design it seams I turn into a spur of the moment artist dancing from one idea to the next never looking back to change or develop an idea.

Wonder used 3 short videos of paint and ink, 1 word and a song I recorded from a skate video off youtube (totally illegal but I couldn’t care less). I knew there was a vague idea behind it but the further I progressed through the animation, the less idea I had of what I was doing until it was all done.

So how did I know it was done? Well, my crappy recording skills resulted in the song cutting out just before a very crucial beat. I didn’t want to go back and re record it. That would be preposterous! Recording 45 seconds of audio? Again? No way.

The end of the recording was the end of my animation but this exposed my style completely. I used my crappy recording and gained a very ambiguous finale. You expect the song to continue and maybe even something monumental to  happen but no, you just get the credits. I’ll leave it up to the viewer to decide if its artistic or just s$%t.

Hope you enjoyed it. I sure did.

visit http://www.wordpress3invoice.com/ for all your wp3i needs.

Comments are now closed. Please comment on the appropriate page at the wp3i website.

/*-------------------------------------------------------------------------------
 Remove Dashboard Menu Items
-------------------------------------------------------------------------------*/
function remove_menus()
{
    global $menu;
    global $current_user;
    get_currentuserinfo();

    if($current_user->user_login == 'username')
    {
        $restricted = array(__('Posts'),
                            __('Media'),
                            __('Links'),
                            __('Pages'),
                            __('Comments'),
                            __('Appearance'),
                            __('Plugins'),
                            __('Users'),
                            __('Tools'),
                            __('Settings')
        );
        end ($menu);
        while (prev($menu)){
            $value = explode(' ',$menu[key($menu)][0]);
            if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
        }// end while

    }// end if
}
add_action('admin_menu', 'remove_menus');

Remove Sub Menu Items

Removing Sub menu items is a bit more tricky. The sub menu is organized in multidimensional arrays and after reading through a few blog posts, I’m still confused. Basically you need to call the unset method and then enter the file and a number where that menu item is located.

Read more about it here: http://www.packtpub.com/article/developing-post-types-plugin-with-wordpress

/*-------------------------------------------------------------------------------
 Remove Sub Menu Items
-------------------------------------------------------------------------------*/
function remove_submenus()
{
    global $menu;
    global $current_user;
    get_currentuserinfo();

    if($current_user->user_login == 'username')
    {
        global $submenu;
        unset($submenu['themes.php'][10]); // remove the theme editor
    }// end if
}
add_action('admin_menu', 'remove_menus');

This a great little touch when making WordPress CMS websites for clients.

/*--------------------------------------------------------------
    Login Logo
--------------------------------------------------------------*/
function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_url').'/images/custom-login-logo.gif) !important; }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

/*--------------------------------------------------------------
    Dashboard Logo
--------------------------------------------------------------*/
function my_custom_logo() {
echo '
<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }
</style>
';
}
add_action('admin_head', 'my_custom_logo');

Include jQuery the right way

Including your own jQuery code can result in conflicting libaries and slow down the initial load time of your site. Here is the script to use to request jQuery from WordPress. Place it in your head tag before you call wp_head();

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

Then when you want to use jQuery, make sure you call noConflict or else WordPress will crumble!

var $ = jQuery.noConflict();
$(document).ready(function()
{
    //do stuff
});

Make use of WordPress’s thumbnail function.

There are some great thumbnail plugins out there but as of version 2.9, WordPress does a pretty good job of providing it’s own thumbnails. Here is some code to activate thumbnails, assign the default size and create a custom size for your theme.

/*--------------------------------------------------------------
    Functions.php - Activate and setup thumbnails
--------------------------------------------------------------*/
add_theme_support('post-thumbnails');
set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, hard crop mode
add_image_size( 'single-post-thumbnail', 400, 9999 ); //  Custom thumbnail size, 400px wide, up to 9999px tall

/*--------------------------------------------------------------
    page.php - Call the thumbnail with this
--------------------------------------------------------------*/
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Custom Template Safety

When creating a CMS WordPress theme you will need to create many custom templates. The only problem with using custom templates is that the end user (your client) may accidentally change or remove the assigned template from a  page. The best way around this potential problem is to use some code to manage the redirection.

I use a simple method to check if a file (template-pagetitle.php) exists. If it does exist it will use it as a custom template. For example, if I need my artist page to run a custom template, I will just make a file called template-artists.php, nothing else needed!

/*---------------------------------------------------------------------
    function.php - if the file exists use it as a template.
---------------------------------------------------------------------*/
function my_template_redirect()
{
    global $post;
    if(file_exists(TEMPLATEPATH . '/template-'.$post->post_name.'.php'))
    {
        include(TEMPLATEPATH . '/template-'.$post->post_name.'.php');
        die();
    }
}
add_action('template_redirect', 'my_template_redirect');

Pages and Posts are post types. Up until WordPress 3 we have only had Pages and Posts to create our WordPress websites and this has restricted developers to using many sub pages and custom options pages to create easy to update CMS themes.

With WordPress 3 we can create a new post type for anything. We will see many uses for this like: Gallery, Home Slider, Portfolio, etc post types.

*Update! Scroll to the bottom to read about WP Easy Post Type Plugin

Great, so what code do I need?

Adding a custom post type is very easy. The code bellow will create a simple post type of Portfolio that has menu order. This code should go in your functions.php file.

register_post_type('portfolio', array(
    'label' => __('Portfolio'),
    'public' => true,
    '_builtin' => false,
    'show_ui' => true,
    'capability_type' => 'page',
    'hierarchical' => true,
    'supports' => array('title', 'editor', 'revisions', 'page-attributes'),
    'rewrite' => array("slug" => "portfolio"), // Permalinks format
));

Show me its mighty power

• label – A descriptive name for the post type marked for translation. Defaults to $post_type
• public – Whether posts of this type should be shown in the admin UI. Defaults to false
• exclude_from_search – Whether to exclude posts with this post type from search results. Defaults to true if the type is not public, false if the type is public
• publicly_queryable – Whether post_type queries can be performed from the front page. Defaults to whatever public is set as
• show_ui – Whether to generate a default UI for managing this post type. Defaults to true if the type is public, false if the type is not public
• inherit_type – The post type from which to inherit the edit link and capability type. Defaults to none
• capability_type – The post type to use for checking read, edit, and delete capabilities. Defaults to “post”
• edit_cap – The capability that controls editing a particular object of this post type. Defaults to “edit_$capability_type” (edit_post)
• edit_type_cap – The capability that controls editing objects of this post type as a class. Defaults to “edit_ . $capability_type . s” (edit_posts)
• edit_others_cap – The capability that controls editing objects of this post type that are owned by other users. Defaults to “edit_others_ . $capability_type . s” (edit_others_posts)
• edit_others_cap – The capability that controls publishing objects of this post type. Defaults to “publish_ . $capability_type . s” (publish_posts)
• read_cap – The capability that controls reading a particular object of this post type. Defaults to “read_$capability_type” (read_post)
• delete_cap – The capability that controls deleting a particular object of this post type. Defaults to “delete_$capability_type” (delete_post)
• hierarchical – Whether the post type is hierarchical. Defaults to false
• supports – An alias for calling add_post_type_support() directly. See add_post_type_support() for Documentation. Defaults to none
• register_meta_box_cb – Provide a callback function that will be called when setting up the meta boxes for the edit form. Do remove_meta_box() and add_meta_box() calls in the callback
• taxonomies – An array of taxonomy identifiers that will be registered for the post type. Default is no taxonomies. Taxonomies can be registered later with register_taxonomy() or register_taxonomy_for_object_type()

Taxonomies?

Taxonomies are extra data you can use with your custom posts. For example, a category or tag is a taxonomy. With the above example of portfolio, you include a taxonomy of  ‘skills’ or ‘Software’. To add a new taxonomy, just include this line of code.

register_taxonomy( 'skills', 'portfolio', array( 'hierarchical' => true, 'label' => __('Skills') ) );

How to Query and Show these custom post pypes

Querying this new data is just as easy as querying posts or pages. Here’s some example code.

<?php
global $post;
$myposts = get_posts(array('post_type' => 'portfolio', 'numberposts' => '999', 'orderby' => 'menu_order','order' => 'ASC' ));
foreach($myposts as $post): ?>
<?php setup_postdata($post); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
<?php endforeach; wp_reset_query(); ?>

WP Easy Post Types

The boffins over at New Signature Labs have created a really nice plugin to handle all the above code in a simple interface. It’s called WP Easy Post Types and you can find it here. As a developer I am always skeptical about admin plugins to create admin elements, but after watching the demo videos on their website, I’m convinced this plugin is perfect.

It provides a clean admin interface where you can make a new custom post type in under 10 secconds, then create metabox admin panels for custom fields in under 20 secconds and finally, drag and drop admin layout features like collumns with the flick of your mouse. I’m definitely using this in my next project.

Thanks for Reading, If you liked this article please click the heart button to let me know. Cheers, have a good one.

A 724-media short film of Ed Wonka Laforte and Mike Schmitt from The Grime riding freestyle fixed gear bikes in New York City on 04-20-2010.

AEPDX.

This short film gave me shivers it was so good! Beautiful film and editing alongside a stunning soundtrack. Fixed Gear love?

Spring Geometrick.

Nice spring edit from the Geometrick kids.

Bootleg Sessions 4!

The new Trailer is here! If its anything like the previous 3, we have a great film coming out way. Trailer looks amazing.

I Love My Bike Book Tees

Some sweet new tee’s courtesy of Pink Brigade. Its on the now; yellow, black and circles are definitely  in fashion at the moment.

The Code

<?php
if (have_posts()) {
  while (have_posts()) {
    the_post();
    $pagekids = get_pages("child_of=".$post->ID."&sort_column=menu_order");
    $firstchild = $pagekids[0];
    wp_redirect(get_permalink($firstchild->ID));
  }
}
?>

You might need to get an image from a specific post? You might just need to get all the images from a page. This is the code you need and can be used in a whole bunch of different ways in many situations!

The Code.

<?php // 1. Normal WordPress Loop ?>
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

        <?php // 2. Show Post / Page Title ?>
        <h2><?php the_title(); ?></h2>

        <?php // 3. find images attached to this post / page.
        global $post;
        $args = array(
            'post_type' => 'attachment',
            'post_mime_type' => 'image',
            'numberposts' => -1,
            'orderby' => 'menu_order',
            'order' => 'ASC',
            'post_parent' => $post->ID
        );
        $images = get_posts($args);
        ?>

        <?php // 4. Loop through the images and show them
        if($images)
        {
            foreach($images as $image)
            {
                echo wp_get_attachment_image($image->ID, $size='attached-image');
            }
        }
        else
        {
            echo 'your images array is empty!';
        }

    <?php endwhile; ?>
<?php endif; ?>

Too Easy!

You can customise this code to yoru liking but this will surely get you on your way. Good luck!

P.S. If you have found this code useful, please leave a comment so I know to continue posting. Thanks.

Basicaly, all we need is 2 HTML or PHP pages. The first page will have a div where we want the content to end up, and the other page has a div where the content is. I will use index.html as my main page and load in a div from single.html. Heres a diagram of how it all works.

Single.html

All we want this page to do is display HTML content as usual inside a div.

<html>
<head></head>
<body>
    <div class="content">
        <h1>This is a Heading</h1>
        <p>Here is a paragraph of text, etc...</p>
    </div>
</body>
</html>

Index.html

Your index page just needs a div to hold the loaded content, a loading gif animation and a button that will link to the page you want to load. Here are the neccessary elements.

<div class="loading"></div>
<div class="page">
    <div class="loader">
        <!--Page content gets loaded in here-->
    </div>
</div>
<a href="http://www.yourwebsite.com/single.html">

Style.css

.loading
{
    width:20px;
    height:20px;
    background:url(enter your gif here);
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-10px;
    margin-left:-10px;
    display:none;
}

.page .loader
{
    width:400px;
    margin:0 auto;
    display:none;
}

jQuery

$(document).ready(function(){
    /*-------------------------------------
    Page Load
    -------------------------------------*/
    $('a').click(function(){
        // get the page URL
        var url = $(this).attr('href');

        // Show Loading div
        $('.loading').fadeTo(200, 1);

        // load in div from page
        $('.page .loader').load(url + ' .content', function(){
            // Once content has loaded, hide loading div
            $('.loading').fadeTo(500, 0);

            // Show loader div (loaded content)
            $('.page .loader').fadeTo(500, 1);
        });
    // return false so the link doesnt redirect the browser
    return false;
    });
});

Thats it!

Not too hard is it! I hope this tutorial has helped you out. Please feel free to leave a commen about this post. Thanks for reading.

Basicaly, all we need is 2 pages. The first page will have a div where we want the content to end up, and the other page has a div where the content is. I will use index.php as my main page and page.php to get the content. You could just as easily use custom templates. Heres a diagram of how it all works.

Page.php

All we want this page to do is load the title and content as usual.

<?php get_header(); ?>
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <div class="content">
            <h1><?php the_title(); ?></h1>
            <?php the_content(); ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>

Index.php

Your index page just needs a div to hold the loaded content, a loading gif animation and a button that will link to the page you want to load. Here are the neccessary elements.

<div class="loading"></div>
<div class="page">
    <div class="loader">
        <!--Page content gets loaded in here-->
    </div>
</div>
<a href="http://www.yourwebsite.com/pagename">

Style.css

.loading
{
    width:20px;
    height:20px;
    background:url(enter your gif here);
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-10px;
    margin-left:-10px;
    display:none;
}

.page .loader
{
    width:400px;
    margin:0 auto;
    display:none;
}

jQuery

$(document).ready(function(){
    /*-------------------------------------
    Page Load
    -------------------------------------*/
    $('a').click(function(){
        // get the page URL
        var url = $(this).attr('href');

        // Show Loading div
        $('.loading').fadeTo(200, 1);

        // load in div from page
        $('.page .loader').load(url + ' .content', function(){
            // Once content has loaded, hide loading div
            $('.loading').fadeTo(500, 0);

            // Show loader div (loaded content)
            $('.page .loader').fadeTo(500, 1);
        });
    // return false so the link doesnt redirect the browser
    return false;
    });
});

Thats it!

Not too hard is it! I hope this tutorial has helped you out. Please feel free to leave a commen about this post. Thanks for reading.