TROELS MADSEN

CL 2013-11-24

Now we comes to the last php changes in my template: function.php! It contains several functions to adjust the way my template should behave.

To give possibility to have a thumbnail in template – and to specify a size for the thumbnail (for the portfolio projects in the front page), I must add the codes

1
2

add_theme_support( 'post-thumbnails' );
add_image_size( 'portfolio-thumb', 270, 189, true ); // 270 width, 189 height
I used a string to add a class="external" attribute to <a> tags in the main navigator bar – to instruct javascript to let it be a external link and not a internal “one-page” link which we can smooth scroll to (using the Waypoint.js script).

1

add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"external\" ", $t);'));

I used the function.php to list up all the css and javascript files needed for the template. It’s a good way to enqueue the scripts and styles and tell WordPress which file depends of which (a lot depends on jQuery.js – which WordPress self can provide). If a other plugin have a similar need for a certain javascript file, it could just use the newest. Easy!

function trma_scripts() {

wp_enqueue_style( 'Bootstrap', get_template_directory_uri() . '/include/css/bootstrap.min.css' );

wp_enqueue_style( 'Main Style', get_template_directory_uri() . '/include/css/main.css' );

wp_enqueue_style( 'Fancybox', get_template_directory_uri() . '/include/css/fancybox/jquery.fancybox.css' );

wp_enqueue_style( 'Font Icons', get_template_directory_uri() . '/include/css/fonts.css' );

wp_enqueue_style( 'Shortcodes', get_template_directory_uri() . '/include/css/shortcodes.css' );

wp_enqueue_style( 'Bootstrao Responsive', get_template_directory_uri() . '/include/css/bootstrap-responsive.min.css' );

wp_enqueue_style( 'Responsive', get_template_directory_uri() . '/include/css/responsive.css' );

wp_enqueue_style( 'Own Style', get_stylesheet_uri() );

wp_enqueue_script( 'Modernizr', get_template_directory_uri() . '/include/js/modernizr.js', array(), '2.5.3', false );

wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/include/js/bootstrap.min.js', array(), '2.0.0', true );

wp_enqueue_script( 'WayPoints', get_template_directory_uri() . '/include/js/waypoints.js', array('jquery'), '2.0.2', true );

wp_enqueue_script( 'Waypoints for Header', get_template_directory_uri() . '/include/js/waypoints-sticky.js', array('WayPoints'), '2.0.2', true );

wp_enqueue_script( 'Isotope Filter', get_template_directory_uri() . '/include/js/jquery.isotope.js', array('jquery'), '1.5.25', true );

wp_enqueue_script( 'Fancybox', get_template_directory_uri() . '/include/js/jquery.fancybox.pack.js', array(), '2.1.4', true );

wp_enqueue_script( 'Fancybox for Media', get_template_directory_uri() . '/include/js/jquery.fancybox-media.js', array('Fancybox'), '1.0.5', true );

wp_enqueue_script( 'Plugins', get_template_directory_uri() . '/include/js/plugins.js', array('jquery'), '', true );

wp_enqueue_script( 'Default JS', get_template_directory_uri() . '/include/js/main.js', array('WayPoints','Isotope Filter','Fancybox'), '', true );

}

add_action( 'wp_enqueue_scripts', 'trma_scripts' );

The enqueue function have a lot arguments. First is the name, second the path, third the dependencies, fourth the version of the file – and fifth and last, about the file should be placed in the footer. The style enqueue function only need the two first arguments. The add_action(); script execute the function and implement the scripts and styles in the template.