In the following example, I've added some bootstrap related CSS and JS files to the wordpress functions.php file:

 

function responsive_enqueue_scripts() {

wp_enqueue_style( 'responsive_1', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'responsive_2', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css' );
wp_enqueue_style( 'responsive_4', get_stylesheet_directory_uri() . '/responsive.css' );
wp_register_script('bootstrap_min_js', plugins_url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('bootstrap_min_js');
}

add_action( 'wp_enqueue_scripts', 'responsive_enqueue_scripts' );

Published in Blog
Thursday, 17 September 2015 08:03

Making wordpress custom page types with WP-Type

WP-Types is a really great plugin for Wordpress that creates customised page types. For instance, you might need to set up a book library, and have specific fields such as Title, Author, Publish date, Synopsis and so forth. This plugin takes all the hard work out of creating these layout - Well sort of. There is still plenty of fun coding to be done, so let's get into it. 

I'm going to set up an events page, and need the following custom fields:

  • Venue (Text input)
  • Address (Text input)
  • Date (Date picker)
  • Facebook URL (Url input)
  • Tickets URL (URL input)
  • Description (Text input with Wsyiwyg editor)

In addition to these custom fields, I'll also use some of the default wordrpress fields such as Title, and Feature image.

In Types, create a Post Type. In my case it will be called Events. Then create the custom fields. Once those are done, it's now time to code it into your wordpress template.

The following creates a loop to display anything with the slug events. Replace the word events with the slug of your post type.

<?php
$args = array('post_type' => 'event');
$query = new WP_Query($args);
while($query -> have_posts()) : $query -> the_post ();>
?>

<!-- This is where we will dial up each custom field -->

<?php endwhile; ?>

 To display each custom field, use the following inside the while loop:

<div>
<h2><?php the_title(); ?></h2>

Venue: <?php echo(types_render_field( "venue", array( 'raw' => true) )); ?><br >

Address: <?php echo(types_render_field( "address", array( 'raw' => true) )); ?><br >

Facebook: <?php echo(types_render_field( "facebook-event-page", array( 'raw' => true) )); ?><br >

Tickets: <?php echo(types_render_field( "tickets", array( 'raw' => true) )); ?><br >

</div>

To display the date, we need one extra line of code to declare the variable $timestamp, because WP-Types generates the date as a UNIX time stamp, that we can then format into whatever date format we choose. Note, $timestamp should be declared before the while loop opens - and remember to also replace the word event-date with the slug of your date field:

<?php
$args = array('post_type' => 'event');
$query = new WP_Query($args);

$timestamp = (types_render_field( "event-date", array( 'raw' => true) ));

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

Date: <?php echo gmdate("Y-m-d\TH:i:s\Z", $timestamp); ?><br >

The description field that uses a Wsyiwyg editor also operates a little differently. For this we need to set raw to false so that it displays all the paragraph formatting. My description field has the slug name brief, so change it to whatever your slug is:

Description:<br /> <?php echo(types_render_field( "brief", array( 'raw' => false) )); ?>

Ok - So everything is looking great now. Let's incorporate it into our archive, category,  and single pages. In my archive.php page, I create a conditional that checks to see if it's displaying out events custom page type. If it is true then include the path to my custom category layout, otherwise display the standard wordpress archive stuff. My archive.php file now looks like this:

<?php get_header(); ?>

<!-- checks the id of the post type -->
<?php $posttype = get_post_type( get_the_ID() ); ?>

<!-- This conditional checks to see if it's a custom page type called "events". -->
<?php if ($posttype == "event") {
include 'layouts/events/category.php';
} else { ?>
<!-- Otherwise display the standard wordpress archive layout as follows -->
<div class="container">
<section id="content" role="main">
<header class="header">
<h1 class="entry-title"><?php
if ( is_day() ) { printf( __( 'Daily Archives: %s', 'blankslate' ), get_the_time( get_option( 'date_format' ) ) ); }
elseif ( is_month() ) { printf( __( 'Monthly Archives: %s', 'blankslate' ), get_the_time( 'F Y' ) ); }
elseif ( is_year() ) { printf( __( 'Yearly Archives: %s', 'blankslate' ), get_the_time( 'Y' ) ); }
else { _e( 'Archives', 'blankslate' ); }
?></h1>
</header>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'entry' ); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</section>
</div>

<?php } ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

My custom category.php file looks like this:

<div class="container">
<section id="content" role="main">
<div class="row">
<?php
$args = array('post_type' => 'event');
$query = new WP_Query($args);
while($query -> have_posts()) : $query -> the_post ();
$timestamp = (types_render_field( "event-date", array( 'raw' => true) ));
?>
<div class="col-xs-12 col-sm-6 col-md-3">

<h2><?php the_title(); ?></h2>

Date: <?php echo gmdate("Y-m-d\TH:i:s\Z", $timestamp); ?><br >

Venue: <?php echo(types_render_field( "venue", array( 'raw' => true) )); ?><br >

Address: <?php echo(types_render_field( "address", array( 'raw' => true) )); ?><br >

Facebook: <?php echo(types_render_field( "facebook-event-page", array( 'raw' => true) )); ?><br >

Tickets: <?php echo(types_render_field( "tickets", array( 'raw' => true) )); ?><br >

Description:<br /> <?php echo(types_render_field( "brief", array( 'raw' => false) )); ?>

<a href="<?php the_permalink(); ?>">Read more</a>
</div>
<?php endwhile; ?>
</div>
</section>
</div>

Notice the Read more link at the bottom? When that is clicked it dials up the standard wordpress single.php page. I need to modify that so it checks to see if is is a post from my custom page type. So here is my single.php file that is in the root of my template folder:

<?php get_header(); ?>
<div class="container">
<section id="content" role="main">

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

<!-- Conditional to check if this post belongs to my custom page type -->
<?php if('event' == get_post_type()) { ?>
<?php include( get_stylesheet_directory() . '/layouts/events/item.php'); ?>

<?php } elseif('other_custom-post_type_here' == get_post_type()) { ?>
<!-- include another custom page type here -->

<?php } else { ?>
<!-- otherwise continue with the standard wordpress entry -->
<?php get_template_part( 'entry' ); ?>
<?php if ( ! post_password_required() ) comments_template( '', true ); ?>
<?php } ?>

<?php endwhile; endif; ?>
</section>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

I've told it to go to a custom file called item.php that I have set up in a specific directory if it is a custom page type - And that is where I'll dial up all the post fields as detailed at the top of this tutorial.

For more documentation on using the WP-Types plugin, head over to https://wp-types.com/documentation/functions

Published in Blog
Sunday, 28 June 2015 04:55

Displaying specific custom fields

There are many times I need to display a spcific custom field inside a post. An example of this is where I have set up custom fields for various social networking URL's, and need to style those URL's into icons or badges. The following shows how I have done this with four custom fields.

Published in Blog
Page 3 of 3