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.
1 2 |
add_theme_support( 'post-thumbnails' ); add_image_size( 'portfolio-thumb', 270, 189, true ); // 270 width, 189 height |
1 |
add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"external\" ", $t);')); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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' ); |
As for the page.php, so it didn’t really work for this changelog page. I want to render the “List category posts” plugin obsolete and I don’t want to use a “tricky” CSS hack to remove a date-line in my list, as in this post. It’s not good for accessibility (The blinds should hear the date two times for each posts, and in a weird way).
1 2 3 4 5 6 7 8 9 |
<?php $args = array( 'category__in' => '3' ); $clogs = new WP_Query( $args ); while($clogs->have_posts()) : $clogs->the_post(); ?> <h3><?php the_date(); ?></h3> <?php the_content(); ?> <?php endwhile;?> |
Here comes a beautiful before and after picture of the change in the php code!
Now it’s time to the page.php file and single.php. According to WordPress Hierarchy, The posts need a single.php and the pages uses page.php. I created page.php file to show the two pages I want to be a external part of my portfolio. All the other pages is a part of index.php, and the codes pulls specific page using the loop with filter. As for the single.php file, I use it to show the projects (and my writings).
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Portolio title --> <div class="row"> <div class="span12"> <div class="title-page"> <?php while(have_posts()) : the_post();?> <h2 class="title"><?php the_title(); ?></h2> <h3 class="title-description"><?php the_subtitle(); ?></h3> </div> </div> </div> <!-- End title --> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php // Pull the custom fields from the post $pid = get_the_ID(); $vimeo_url = 0; $post_metas = get_post_meta($pid); // Creates a loop and checking if we have a // custom field with the title "vimeo_url" foreach($post_metas as $title => $post_meta) { if ( $title == 'vimeo_url') { $vimeo_url = $post_meta[0]; } } // Check if $vimeo_url is true if($vimeo_url) { // Then post the video ?> <div class="row"> <div class="span8 offset2"> <div class="flex-video widescreen vimeo"> <iframe src="http://player.vimeo.com/video/<?php echo substr($vimeo_url, -8); ?>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> </div> </div> <?php // Otherwise, show the thumbnail picture in the size 'full' } elseif (has_post_thumbnail()) { ?> <!-- Image section --> <div class="row"> <div class="span8 offset2 fameimg"> <?php the_post_thumbnail('full'); ?> </div> </div> <!-- End image --> <?php } ?> |
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php // Check about has content in custom post \\ $sample = 0; $pid = get_the_ID(); $post_metas = get_post_meta($pid); foreach($post_metas as $title => $post_meta) { // Filter away some WP's own field, subtitle and vimeo url if ( '_' == $title{0} || $title == 'wps_subtitle' || $title == 'vimeo_url') continue; // If have some, then make $sample true $sample = 1; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
if($sample) { ?> <div class="span8"> <?php // If $sample is true, show the content the_content(); ?> </div> <div class="span4"> <?php // And the custom fields $pid = get_the_ID(); $post_metas = get_post_meta($pid); foreach($post_metas as $title => $post_meta) { if ( '_' == $title{0} || $title == 'wps_subtitle' || $title == 'vimeo_url') continue; echo "<h3>" . $title . "</h3>"; echo "<p>" . $post_meta[0] . "</p>"; } ?> </div> <?php } else { ?> <div class="span12"> <?php // Or if $sample is false, only show the content the_content(); ?> </div> <?php } ?> |
My homemade template installed in WordPress. It contains of a “big” index.php with a lot wordpress loops to fetch sites and use it as a “section” in the page instead of independent sites (except of Changelog and Design). Loops are using to fetch posts and inset them as portfolio parts or writings parts.
1 2 3 4 5 |
function get_trma_header() { ?> <div> <!-- ALL THE HTML CODE HERE --> </div> <? } |
1 2 3 4 5 |
<?php $recent = new WP_Query("page_id=57"); while($recent->have_posts()) : $recent->the_post();?> <h2 class="title"><?php the_title(); ?></h2> <h3 class="title-description"><?php the_subtitle(); ?></h3> <?php the_content(); ?> <?php endwhile; ?> |
1 2 3 4 5 6 7 8 |
<?php $html = '<li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>'; $tags = get_tags(); foreach ($tags as $tag) { $html .= '<li><a href="#filter" data-option-value=".'.$tag->name.'">'.$tag->name.'</a></li>'; } echo $html; ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php $projects = new WP_Query("category_name=portfolio"); while($projects->have_posts()) : $projects->the_post(); // Check if have thumbnail image attached to the post if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full'); $tags = get_the_tags(); if ($tags) { foreach($tags as $tag) { echo ' '.$tag->name; the_post_thumbnail('portfolio-thumb'); print "\n"; } } } endwhile; ?> |
1 |
[catlist name="changelog" content=yes date=yes numberposts=0 template=div date_tag=h3] |
1 2 3 4 |
.lcp_catlist > p > a { display: none; visibility: hidden; } |