Sunday, 16 September 2018 00:42

Dynamic responsive alternating grid squares


  • Bootstrap 4 to create the grid columns
  • Flexbox to create the perfect responsibe squares that contain content
  • Wordpress plugin: Advanced Custom Fields to create a repeater field. The repeater field creates a pair of squares (an image square, and a text square). The repeater field contains sub fields for the various elements of the content (background image, heading, text, link etc)

Code over here

Published in Blog

Use the following snippet to display the URL of a custom post types taxonomy term. Just replace the word position with the name of the taxonomy.

$terms = wp_get_post_terms($post->ID, 'position');
foreach ($terms as $term) {
echo get_term_link($term);

Published in Blog

To display the results of a Toolset Types checkbox field, use the following in your PHP template:

$checkbox_value = types_render_field( "my_checkbox_field", array( "separator" => ", " ) );
echo $checkbox_value;

Taking it a step further, we can create conditionals based on values collected. In the following example I have four values:

$blacktown = types_render_field( "localities", array( "option" => "0" ) );
$carlingford = types_render_field( "localities", array( "option" => "1" ) );
$emerton = types_render_field( "localities", array( "option" => "2" ) );
$penrith = types_render_field( "localities", array( "option" => "3" ) );

if ($blacktown) {
// do something
if ($carlingford) {
// do something
if ($emerton) {
// do something
if ($penrith) {
// do something

Published in Blog
Friday, 23 February 2018 10:51

Using the WordPress wp_tag_cloud() Function

We all know that tags are a vital part of WordPress taxonomies, which are a way of grouping things together. Tags are created on the fly while creating posts and help us to locate similar posts linked by particular tags. Generally in a WordPress blog, different tags are grouped inside a tag cloud, and the size of each tag determines the frequency of its assignments to posts. Here we shall look into the correct usage of the wp_tag_cloud() function, which is responsible for all these tag clouds.

This is the main built-in function to display the tags associated with your recent posts, within the tag cloud.

The WordPress Codex wp_tag_cloud() page has a clear explanation of all the parameters of this function, but still let's quickly discuss the important ones.

  • 'smallest' – This parameter is of type integer and specifies the minimum text size of the tag in the cloud
  • 'largest' – This parameter is of type integer and specifies the maximum text size of the tag in the cloud
  • 'number' – This parameter specifies the total number of tags to be displayed in the cloud. You can specify it as '0' if you want all of them to be displayed
  • 'format' – This parameter specifies the format of the cloud display. It can be any of 'flat', 'list', or 'array'
  • 'separator' – This parameter specifies the separator within the tags in the cloud
  • 'topic_count_text_callback' – This parameter shows the number of posts associated with each Tag through a tooltip
  • 'taxonomy' – This parameter specifies the type of WordPress taxonomy which can be used within the tag cloud. Here the default is the 'post_tags' but you can use a custom taxonomy as well

These parameters play a key role in customizing the tag cloud.

WordPress has a default Tag Cloud widget which can be placed in the appropriate area of the page. But without using a widget you can use the wp_tag_cloud() function to display and customize the tag cloud in your blog. You can specify the parameters in a number of ways.

Parameters separated by '&' in one simple inline string.

Parameter specification in array format.

Specifying only selected parameters, the rest are kept as default.

Return the tag cloud as an array without displaying it in the blog. This result can be used later within the PHP code.

Create a function in your functions.php file and return the wp_tag_cloud() function. Once it is defined, you can call the function anywhere within your blog.

Now let us open our sidebar.php and call the function to display the tag cloud.

Let's add some CSS styling in our style.css file to make the tag cloud look more professional.

Now it looks like this:

Similarly using the same in the footer.php of our theme.

You can make it more beautiful by adding your custom CSS styles.

By adding different parameters within the wp_tag_cloud() function in the functions.php file we can customize our tag cloud. For example, if you like to include both your tags and categories into the tag cloud or rather the taxonomy cloud then the function can be written as:

Sometimes you do not like to keep the tag cloud in your sidebar or footer and creating a separate page for it keeps your blog clean. You can do so using the following method.

At first create a custom page template in your theme folder with the wp_tag_cloud() function. Here we have named the file tagcloud.php.

Now log in to your WordPress admin and go to Pages -> Add New. Put a good title for the page and then under the Page Attributes section choose the Template as Tag Cloud and then click on Update. That's it; your tag cloud page is ready. You can style the page with your own CSS styles.

Sometimes we want our users to select tags from a scrollable box in our sidebar. To accomplish this we have to create a function in our functions.php file.

In the above function we have considered the array format of the wp_tag_cloud() function, along with that the font size has been kept the same and the list has been ordered by name in ascending order.

Now open your sidebar.php and call this function.

Let us style it with some CSS.

Finally it looks like:

Thanks for reading and please feel free to suggest some more uses of this very useful wp_tag_cloud() function.

Published in Blog

This is a super handy cheat sheet compiled by the K2 team that solves many PHP conditional statements:

Published in Blog
Monday, 30 November -0001 00:00

Modifying wordpress menu code

I've recently needed to modify the wordpress menu code so that I could insert bootstrap classes directly into it.

Add the following to the functions file:

// custom menu example @
function clean_custom_menus() {
	$menu_name = 'nav-primary'; // specify custom menu slug
	if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
		$menu = wp_get_nav_menu_object($locations[$menu_name]);
		$menu_items = wp_get_nav_menu_items($menu->term_id);

		$menu_list = '<nav>' ."\n";
		$menu_list .= "\t\t\t\t". '<ul>' ."\n";
		foreach ((array) $menu_items as $key => $menu_item) {
			$title = $menu_item->title;
			$url = $menu_item->url;
			$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
		$menu_list .= "\t\t\t\t". '</ul>' ."\n";
		$menu_list .= "\t\t\t". '</nav>' ."\n";
	} else {
		// $menu_list = '<!-- no list defined -->';
	echo $menu_list;

Make sure to replace the menu slug. To do this make sure the menu is assigned to a location on Wordpress. The menu slug is infact the location using lowercase and dashes (for example: footer-menu).

It might be necessary to create a new menu potion in the functions file using the following: 

function register_my_menu() {
register_nav_menu('journal',__( 'journal' ));
add_action( 'init', 'register_my_menu' );


To display the menu, insert the following into the theme:

<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>

More information on this function at this blog post

Published in Blog

The following solutions pertain to the excellent wordpress plug Advanced Custom Fields.

To display fields outside of teh wordpress posts loop use the following code but replace the post ID 123:

$value = get_field( "text_field", 123 );
echo $value;

More info here - and here's how to do it inside the loop.

What about repeater fields?

I'm glad you asked. Here's a PHP snippet to echo the values for a repeating field that I've called logo (just remember to change the ID 1862 to match the post or page ID):

while( have_rows('repeater', 1862) ): the_row();

Output individual fields contained with a group field

Advanced Custom Fields allows the grouping of fileds into a single group field. The following will output individual sub fields (remember to replace the post ID):

$group_field = get_field( "my_group_field", 5563 );
echo $group_field['my_sub_field'];

Published in Blog

This is a super handy snippet that will display a specific pages content. It's very usefull to display content in a module or widget area outside of the main content area.

Published in Blog
Wednesday, 12 July 2017 08:29

Display a widget title

The following is a snippet of code I used to display a widget with the ID video title after the widget (rather than before the widget).

<?php $sidebar_id = 'video';
$sidebars_widgets = wp_get_sidebars_widgets();
$widget_ids = $sidebars_widgets[$sidebar_id];
foreach( $widget_ids as $id ) {
$wdgtvar = 'widget_'._get_widget_id_base( $id );
$idvar = _get_widget_id_base( $id );
$instance = get_option( $wdgtvar );
$idbs = str_replace( $idvar.'-', '', $id );
} ?>

<section id="video">
<div class="inner">
<div class="container">
<?php dynamic_sidebar( 'video' ); ?>
<?php echo $instance[$idbs]['title']; ?>


Published in Blog

A big thankyou to Evan Herman over at Code Parrots who helped me out with the following solution to an request that I submitted. He has developed a terrific timeline plugin for Wordpress, that is very flexible and looks super jazzy.

Published in Blog
Page 1 of 4