TROELS MADSEN

Changelog

My “subtle” changes

24. november 2013

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.

23. november 2013

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).

New file created: page-14.php. As for the Template Hierarchy, WordPress would seek for a ID-specific page before a generalized page.php. Therefore the Changelog page would use page-14.php instead of page.php.

Instead of the default the_content(); function in the loop in page-14.php, I used

<?php

$args = array(

'category__in' => '3'

);

$clogs = new WP_Query( $args );

while($clogs->have_posts()) : $clogs->the_post(); ?>

<?php the_content(); ?>

<?php endwhile;?>

To filter the posts to only use the posts which is in the category ID ‘3’ and show the_date in <h3> tags and then, show the_content. No the_title(); function is used.

Here comes a beautiful before and after picture of the change in the php code!

22. november 2013

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).

Page.php and single.php need a title and subtitle. They is easy added using the default loop:

<?php while(have_posts()) : the_post();?>

</div>

As to all external pages and posts, I wanted to have a header image as visual support. It’s added using the thumbnail for the page or post. But to some of the posts I have a video, I wanted to place in the site to show my project. To accomplish it, I created a if-else php statement to check if the video exist, and if it exists, then use it. Otherwise it should place the thumbnail image.

<?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>

<?php

// Otherwise, show the thumbnail picture in the size 'full'

} elseif (has_post_thumbnail()) { ?>

<?php the_post_thumbnail('full'); ?>

</div>

<?php } ?>

The vimeo_url should look like this: “https://vimeo.com/77412869” – and I only need the last 8 digit to make a embedded video link as such: “http://player.vimeo.com/video/77412869”. Therefore I use the substr(); code to only select the last 8 digit and reuse it.

To the content, I need to evaluate about the post or page has some custom fields, I want to add. It is to provide some extra information as which programming code or which CMS I am using to the specific project. To make it, I must make a $post_metas loop very same as this in the video_url:

<?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;

}

Then I want to make a if-else statement to either show the content WITH meta information (spilt the content in 2 columns) or the content WITHOUT meta information (one single column).

if($sample) { ?>

<?php

// If $sample is true, show the content

the_content(); ?>

</div>

<?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 { ?>

<?php

// Or if $sample is false, only show the content

the_content(); ?>

</div>

<?php

}

21. november 2013

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.

It’s only the main site which need the video, then I’ve made a function in function.php with:

1
2
3
4
5

function get_trma_header() { ?>
<div>

</div>
<? }

and then I pull it to index.php using get_trma_header();

To fetch pages from WordPress and use it as a section, I used the code (in index.php)

<?php $recent = new WP_Query("page_id=57"); while($recent->have_posts()) : $recent->the_post();?>

<?php the_content(); ?>

<?php endwhile; ?>

It creates a loop, and only looks for a page with the ID ’57’ and fetch the title, subtitle (by using the plugin) and the content, and show it in the section.

I chose to use the categories to separate the posts in difference places in the site: Portfolio to the portfolio-section, Changelogs to the changelog-site and so on. In portfolio I am using tags to separate the projects in difference “sub-categories” as School, Web and Video. I used a php loop in the nav-bar in portfolio section to fetch all tags and show them (index.php)

<?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;

and then I post all portfolio posts which have an image by using a wordpress loop (By checking if they have a image attached to the post or not):

<?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;

5. november 2013

Installed plugin WP Subtitle for adding a extra sub-title to all pages. I want to add a good textual pep, and a subtitle to the appropriate titles would help a lot. Basically all what the plugin did, is to add a new meta-information to the post and a text box, which I can write the title in the backend.
In the theme files I made, I added a line of code: <h3 class="title-description"><?php the_subtitle(); ?></h3> To fetch the subtitle and show it as a heading (h3) below the main title (h2).

22. oktober 2013

Disable comments and delete al spam-comments for my posts (In the settings panel in Dashboard). I hates comments and spams. Portfolios don’t need the part of interaction, because the visitors only need to watch my works and not comments them.
Continued to work with the template.

8. oktober 2013

New page created: About me
Worked further with my template as described in the design page. It will be converted to a WordPress template soon.

24. september 2013

New page: Changelog
New page: Design
Install Plugin: “List category posts”
Place the shortcode mentioned below in the page “Changelog”
(To create a list of all my posts with the category “changelog”, ordered by date, so I better can get a overview of the changes I made to the portfolio. I prefer not putting them aside each other in the same page, but create separately posts for each time I made changes in the blog)

1

[catlist name="changelog" content=yes date=yes numberposts=0 template=div date_tag=h3]
Remove the titles of the changelogs using CSS.
(Cause the titles is needless. We only need the dates and the contents)

1
2
3
4

.lcp_catlist > p > a {
display: none;
visibility: hidden;
}

3. september 2013

WordPress installed
Deleted all the default pages and posts