How to use Modaal with WordPress

Modaal is an accessible dialog window library for all humans that makes it easy to create “pop-ups”, or modal windows with jQuery. In this post I’m going to show you how to use this in WordPress.

Here are the steps to getting started:

  1. Head over to GitHub and download or fork a copy of the source code.
  2. Copy over the CSS from the dist folder into your own style.css file, or include it using the wp_enqueue_style() function.
  3. Make sure your theme is using at least jQuery 1.11.2 or higher.
  4. Include the JS from the dist folder using the wp_enqueue_script() Make sure you include this script after you include jQuery.

The next few steps depend on how you want to use the plugin. Below are a few examples. You’ll need to put similar code into the ‘text’ tab of the editor.

Continue reading How to use Modaal with WordPress

Create a progress bar using nanobar js

Nanobar is a small js plugin that can be used to create dynamic progress bars. In this post I’ll show you how to use the js and set up a simple progress bar.


Nanobar has a few options that allow you to customize your progress bar:

  • classname: will add the given class to the div containing the bar element
  • id: will add a class to the div containing the bar element
  • target: this is where the progress bar will be placed. If not set, the bar will be added to the top of your page.

Continue reading Create a progress bar using nanobar js

Title tag theme support in WordPress 4.1

Handling the title tag in WordPress 4.1 is easier than ever.

Tag tags are important for a few reasons. They are the document title for a web page and they also have a significant impact on SEO.

With this line of code pasted into your theme’s functions.php file you can ensure that your blog or website will properly display it’s title tag.



For backwards compatibility you should use the code below. It’s taken from Automattic’s own starter theme, underscores.


if ( version_compare( $GLOBALS['wp_version'], '4.1', '<' ) ) :
	 * Filters wp_title to print a neat tag based on what is being viewed.
	 * @param string $title Default title text for current view.
	 * @param string $sep Optional separator.
	 * @return string The filtered title.
	function _s_wp_title( $title, $sep ) {
		if ( is_feed() ) {
			return $title;
		global $page, $paged;
		// Add the blog name
		$title .= get_bloginfo( 'name', 'display' );
		// Add the blog description for the home/front page.
		$site_description = get_bloginfo( 'description', 'display' );
		if ( $site_description && ( is_home() || is_front_page() ) ) {
			$title .= " $sep $site_description";
		// Add a page number if necessary:
		if ( ( $paged >= 2 || $page >= 2 ) && ! is_404() ) {
			$title .= " $sep " . sprintf( __( 'Page %s', '_s' ), max( $paged, $page ) );
		return $title;
	add_filter( 'wp_title', '_s_wp_title', 10, 2 );
	 * Title shim for sites older than WordPress 4.1.
	 * @link
	 * @todo Remove this function when WordPress 4.3 is released.
	function _s_render_title() {
		?><!--?php wp_title( '|', true, 'right' ); ?-->
	add_action( 'wp_head', '_s_render_title' );

See it in action!