On 24th of September started the first WordPress Jeopardy Game Session. For that, the whole room was divided in two teams to battle each other. The points were counted, but nobody really knows who won.

The WPJeopardy was made with WordPress features. Every answer is a post with its postmeta as questions and points. First of all, there’s a german game-pad. In future there will be some more different pads for several skills. Also, there will be a download-area with the theme and the playable pads.

The Background

First of all, the website is just a simple and clean WordPress instance. There’s a self-made theme. For the game-pad, there’s a customized template, which is very easy. We need a list of the post-categories and the posts, which are in the given category:

<?php
$x = 1;
$cat_args = array( 'parent' => 0 );
$categories = get_categories( $cat_args );
foreach ( $categories as $category ) :

	// Display headline of the category here

	$y = 1;
	$post_args = array( 'category' => $category -> term_id );
	$posts = get_posts( $post_args );
	foreach ( $posts as $post ) :
		// Display post answer, question and points here

	endforeach;
endforeach;
?>

The rest of it is simple CSS and jQuery with an onClick event and some positioning stuff. Well, in all, it’s not magic. It’s not even hard to understand how Jeopardy works.

The same I had already explained in detail in another post where the title of a post has been incorporated into this function, so there you can find additional information.

// Adds classes for custom post types to body_class() and post_class()
function fb_add_body_class( $class ) {
	$post_type = 'my_example_post_type'; // the Post Type

	if ( get_query_var('post_type') === $post_type ) { // only, if post type is active
		$class[] = $post_type;
		$class[] = 'type-' . $post_type;
	}

	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' );

Alternatively you can extend the function post_class() so you won't have the class of the custom post type directly at the body tag. Therefore I use the same function and we just address the hook of the post class.

add_filter( 'post_class', 'fb_add_body_class' );

Both template tags are used in HTML tag, as it shown on the codex pages, we have mentioned above; and here is an example for the post class:

<div <?php post_class('class-name'); ?>>

Enjoy testing and using it, if you know any improvements or have any question, please feel free and leave a comment.

Update: A small example for the custom taxonomie inside this fucntions of WordPress

function fb_add_body_class( $class ) {

	if ( ! is_tax() )
		return $class;

	$tax   = get_query_var( 'taxonomy' );
	$term  = $tax . '-' . get_query_var( 'term' );
	$class = array_merge( $classes, array( 'taxonomy-archive', $tax, $term ) );

	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' ); // or post_class as hook

Use or fork it and have an idea or small solution for your requirements.

In this article I would like to briefly explain how to get content of Custom Post Types in the loop of WordPress. This is not a complete guide, but please feel free to add tips, critics, hints in our comment area.

The screenshot is an example of the use of CPT, hereby were the Plugins Archive und Snippet created, they have different tasks and via CPT tailored to the requirements you need.

In the first case, the syntax is shown how to use the query and passes through the type of the CPT via parameters. In a template of the theme it ensures that only the CPT will be read. All other parameters of the query remain untouched.

query_posts( 'post_type=my_post_type' )

Another solution differs essentially only in style and that several CPTs are passed, wich are in an array.

global $query_string;
parse_str( $query_string, $args );
$args['post_type'] = array( 'my_post_type', 'my_second_post_type' );
query_posts( $args );

To complete the loop of WP and not to limit, the array is added to the parameter of the post_type. So only via the array array_merge the array is added to another array.

global $wp_query;
$args = array_merge( $wp_query->query, array( 'post_type' => 'my_post_type' ) );
query_posts( $args );

Furthermore you can define your own queries, especially if you want to use them in your own variables, either in your Themes or Plugins.

$args = array(
	'post_type' => 'my_post_type',
	'post_status' => 'publish',
	'posts_per_page' => -1
);

$posts = new WP_Query( $args );
if ( $posts -> have_posts() ) {
	while ( $posts -> have_posts() ) {
...
	}
}

wp_reset_query();

At the end a solution that has a particular charm that you control it via Plugin and turn it off easily while testing. Also, to implement the application in a Plugin is simple or as an extension of an existing Themes via Childtheme or Plugin. About the Hook pre_get_posts you can adjust various things of the query, including the CPT.
In the example I have via conditional tags diverse conditions implemented, so that you can see, how it responds to the output in the frontend.

// $this? - example was used in class-structures
// add custom post type to wp loop
add_filter( 'pre_get_posts', array( $this, 'add_to_query') );

// ads to query
function add_to_query( $query ) {

	if ( is_admin() || is_preview() )
		return;

	if ( ! isset( $query -> query_vars['suppress_filters'] ) )
		$query -> query_vars['suppress_filters'] = FALSE;

	// conditional tags for restrictions
	if ( is_home() || is_front_page() && ( FALSE == $query -> query_vars['suppress_filters'] ) ) {
		$query -> set( $this -> my_post_type, array( 'post', $this -> get_textdomain() ) );

	return $query;
}

For this solution I'm using the default search function - get_search_form(). If you use it on another spot as well, please pay attention to the stylesheet. Otherwise the following snippet is sufficient to implement the search field in your navigation.

This function and the call belongs into functions.php of the theme and the adjustment of the stylesheet in the according file of the theme, most of the time it is style.css.

function fb_add_search_box ( $items, $args ) {

	// only on primary menu
	if( 'primary' === $args -> theme_location )
		$items .= '<li class="menu-item menu-item-search">' . get_search_form( FALSE ) . '</li>';

	return $items;
}
add_filter( 'wp_nav_menu_items', 'fb_add_search_box', 10, 2 );

If you like to implement the search form only in a specific navigation; you just need to call the entry theme_location of the argument array. If it's the menu with the string n, then ... - an example:
if( 'primary' === $args -> theme_location )

The key of the call is defined in your theme, therefore easy to find in the backend, as you can see in the screenshot above. Have fun with it!

The following syntax must be integrated within the stylesheet. You can also create a Childtheme when the original theme should not be changed. The values have to be provided with !important since otherwise the values of WordPress will be used. So that the background is always adjusted to the size of the browser - but beware: this is not always the best solution because the images are going to change from the actual size. So it can look very distorting. The sample screenshot is as little sensitive as the clouds tolerate this and still provide a nice background picture - in contrast to the standard in which the image in the preview would be tiled, and for other images may look very ugly.

body {
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed !important;
	-o-background-size: 100% 100%, auto !important;
	-moz-background-size: 100% 100%, auto !important;
	-webkit-background-size: 100% 100%, auto !important;
	background-size: 100% 100%, auto !important;
}

This CSS is not usable in all browsers, see overview , therefore it provides only in newer browsers the expected effect. The Internet Explorer has it difficulties with it.

function fb_header_callback() {

  $background = get_background_image();
  if ( ! $background )
    return;

  if ( $background ) {
    $image = " background-image: url('$background');";

    $style  = 'background-repeat:no-repeat;';
    $style .= 'background-position:center center;';
    $style .= 'background-attachment:fixed;';
    $style .= '-o-background-size: 100% 100%, auto;';
    $style .= '-moz-background-size: 100% 100%, auto;';
    $style .= '-webkit-background-size: 100% 100%, auto;';
    $style .= 'background-size: 100% 100%, auto;';

    $style .= $image . $style;
  }
?>
<style type="text/css">
body { <?php echo trim( $style ); ?> }
</style>
<?php
}

This function must be given to the function as a callback, of course it can be adjusted. In the functions.php of the theme it should work if the background image functionality already exists, the function add_custom_background(). This needs to be expanded in the first parameter with the new function and now the default callback of WordPress will no longer be called.

	// This theme allows users to set a custom background
	add_custom_background( 'fb_header_callback' );

The style will then output via hook wp_head directly in head, rather ugly - I think, and therefore you should format it in the style sheet, since it is static anyway and can not be adjusted by the user. Equally important is, that the hook is also present in the Theme, which is also important for other Plugins or features.

Use values from the backend

The last little tip for your own adjustments. I want to show you how to get the values from the backend and use them.
The background color of the wallpaper options will be given back with the following function:

$color = get_background_color();

The image gets via:

$background = get_background_image();

And query individual settings for the style via get_theme_mod($name);:
The following little snippet gives the set values back to the Theme.

$mods = get_theme_mods();
var_dump($mods);

For the default Theme Twenty Ten it could look like this:

string 'Twenty Ten' (length=10)

array
  'background_image' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_image_thumb' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_repeat' => string 'no-repeat' (length=9)
  'background_position_x' => string 'center' (length=6)
  'background_attachment' => string 'scroll' (length=6)
  'background_color' => string '' (length=0)

Based on these values in the array you can, for example, get the value background_repeat,

$repeat = get_theme_mod( 'background_repeat' );

which gives in this example no-repeat back.

The other values can be treated similarly, a lot of possibilities and opportunities.

But whoever currently uses WordPress as a CMS and blog (like me) may now have a problem: If you look at the blog you should be able to see the normal pages in the navigation, but if you then select a page with many subpages it would be nice if the subpages were listed in the menu bar as well as listing only one entry "Blog" which brings you back to the blog page.

Conveniently, WordPress already includes everything you need to put together this idea. They are on the one hand of course the aforementioned menus, and on the other side there are Custom Fields. If you have not hidden, you can find at every post and every page an editor where you can enter meta data. Via this meta data and with the help of a small code snippet you can control what is displayed in the menu.

You can put the code snippet in your functions.php of your Theme or in a Plugin.

//Filter the arguments for the wp_nav_menu_function to include a custom menu on pages.
function nr_2010_wp_nav_menu_args($args = '')
{
	if ( is_page() ) //custom menus only on sites
	{
		global $post;

		$menu_name = get_post_meta($post->ID, 'menu_name', true);

		if( !empty($menu_name) && is_nav_menu($menu_name) )
		{
			$args['menu'] = $menu_name;
		}
	}
	return $args;
}
add_filter( 'wp_nav_menu_args', 'nr_2010_wp_nav_menu_args' );

This code puts a filter on wp_nav_menu_args, these are the parameters of the function wp_nav_menu, which the Theme uses to output the menus.

As long as we are on a page (is_page()) the custom field menu_name will be used. If it's not empty and it has a menu with this name, the paramaters of this call will be modified, so it shows the right menu.

Only one thing left: Provide the correct meta data to the pages and create the corresponding menus. The menu editor is very intuitive, it shouldn't be a problem. Just a hint: It doesn't save automatically.

/**
 * return post thumbnail inside style in head
 */
if ( !function_exists('fb_background_image') ) {

	function fb_background_image() {
		// only frontend
		if ( is_feed() || is_trackback() ) {
			return;
		}

		// default image, when no set an post thumbnail
		if ( !has_post_thumbnail($GLOBALS['post']->ID) ) {
			$style = '<style type="text/css">.banner {background-image:url(\'' . get_bloginfo('stylesheet_directory') . '/images/banner.jpg\');} </style>' . "\n\n";
		} else {
			// get post thumbnail
			$image = wp_get_attachment_image_src(
				get_post_thumbnail_id($GLOBALS['post']->ID),
				'banner' // size for image; defined via add_image_siz
			);

			$style = sprintf(
				'<style type="text/css">.banner {background-image:url(\'%s\');}</style>',
				esc_attr($image[0]),
				"\n\n"
			);
		}
		if ($style)
			echo $style;
	}

	// add functions
	add_action( 'wp_head', 'fb_background_image' );
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'banner', 980, 350, true );

}

Example Screenshots

The function

Now the function for the pagination

function fb_paging_bar( $args = array() ) {

	$defaults = array(
		'range'           => 4,
		'custom_query'    => FALSE,
		'previous_string' => __( '«««', FB_GREYFOTO_TEXTDOMAIN ),
		'next_string'     => __( '»»»', FB_GREYFOTO_TEXTDOMAIN ),
		'view_fp'         => TRUE,
		'view_lp'         => TRUE,
		'before_output'   => '<div class="postlink">',
		'after_output'    => '</div>'
	);

	$args = wp_parse_args(
		$args,
		apply_filters( 'fb_paging_bar_defaults', $defaults )
	);

	$args['range'] = (int) $args['range'] - 1;
	if ( !$args['custom_query'] )
		$args['custom_query'] = @$GLOBALS['wp_query'];
	$count = (int) $args['custom_query']->max_num_pages;
	$page  = intval( get_query_var( 'paged' ) );
	$ceil  = ceil( $args['range'] / 2 );

	if ( $count <= 1 )
		return FALSE;

	if ( !$page )
		$page = 1;

	if ( $count > $args['range'] ) {
		if ( $page <= $args['range'] ) {
			$min = 1;
			$max = $args['range'] + 1;
		} elseif ( $page >= ($count - $ceil) ) {
			$min = $count - $args['range'];
			$max = $count;
		} elseif ( $page >= $args['range'] && $page < ($count - $ceil) ) {
			$min = $page - $ceil;
			$max = $page + $ceil;
		}
	} else {
		$min = 1;
		$max = $count;
	}

	$echo = '';
	$previous = intval($page) - 1;
	$previous = esc_attr( get_pagenum_link($previous) );
	if ( $previous && (1 != $page) )
		$echo .= '<a href="' . $previous . '" title="' . __( 'previous', FB_GREYFOTO_TEXTDOMAIN) . '">' . $args['previous_string'] . '</a>';
	$firstpage = esc_attr( get_pagenum_link(1) );

	if ( $args['view_fp'] && $firstpage && (1 != $page) )
		$echo .= '<a href="' . $firstpage . '">' . __( 'First', FB_GREYFOTO_TEXTDOMAIN ) . '</a>';

	if ( !empty($min) && !empty($max) ) {
		for( $i = $min; $i <= $max; $i++ ) {
			if ($page == $i) {
				$echo .= '<span class="active">' . str_pad( (int)$i, 2, '0', STR_PAD_LEFT ) . '</span>';
			} else {
				$echo .= sprintf( '<a href="%s">%002d</a>', esc_attr( get_pagenum_link($i) ), $i );
			}
		}
	}

	if ($args['view_lp']) {
		$lastpage = esc_attr( get_pagenum_link($count) );
		if ( $lastpage && ($count != $page) ) {
			$count = str_pad( (int)$count, 2, '0', STR_PAD_LEFT );
			$echo .= '<a href="' . $lastpage . '">' . __( 'Last', FB_GREYFOTO_TEXTDOMAIN ) . '(' . $count . ')' . '</a>';
		}
	}

	$next = intval($page) + 1;
	$next = esc_attr( get_pagenum_link($next) );
	if ($next && ($count != $page) )
		$echo .= '<a href="' . $next . '" title="' . __( 'next', FB_GREYFOTO_TEXTDOMAIN) . '">' . $args['next_string'] . '</a>';

	if ( isset($echo) )
		echo $args['before_output'] . $echo . $args['after_output'];
}

For use the function inside the templates use the follow syntax:

<?php if ( function_exists('fb_paging_bar') ) fb_paging_bar(); ?>

Example for custom arguments

For custom arguments, please use the filter. Also an example for this solution.

function change_fb_paging_bar_defaults($args) {

	$args['previous_string'] = ''; // empty string
	$args['next_string'] = '';

	return $args;
}
add_filter('fb_paging_bar_defaults', 'change_fb_paging_bar_defaults');

Change Logo

In the first code example I include the favicon, a fast and simple way. Alternatively you can include a logo of your Theme, therefore the 2nd code example. Each of the following example belongs into the functions.php of the Themes.

function fb_custom_login_logo() {
	$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('url') . '/favicon.ico) no-repeat 30px center !important; } </style>';
	echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );

function fb_custom_login_logo() {
	$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('template_directory') . '/images/your-logo-image.png) no-repeat center top !important; } </style>';
	echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );

Now we adjusted the logo, but the name at the hover effect is still not the one we want. Therefore is a hook available.

Change name

We correspond with the hook and deliver with the following code snippet the name of the blog, which lies in the database. Alternatively you can query static content or your own fields.

function fb_login_headertitle() {
	return get_option('blogname');
}
add_filter( 'login_headertitle', 'fb_login_headertitle' );

Change link

Now we want to adjust the link, so a klick on the logo will send us to the frontend of the website. And again, there is a hook available.

function fb_login_headerurl() {
	return home_url();
}
add_filter( 'login_headerurl', 'fb_login_headerurl' );

Three simple possibilities which should belong in almost every Theme. So that the login page perfectly fits to the website. It looks more professional and your customer will be thankful.