Get Developing with Tidy Templates

Developing with Tidy Templates is easy, to get you started we’ll show you how to set up a very simple MVC (without the M, WordPress handles that for you) application.

We’ll skip the WordPress install and just assume it’s already set up and running. Use this modified copy of the TwentySixteen theme found on github. You’ll also need a copy of the Tidy Template plugin too.

Moving the templates

By default, WordPress only looks at the theme root for template files, this can get messy so let’s clean it up and move the templates over to their own folder. In your theme root, create folder “templates” (note: name it whatever you want really).

Open the wp-config.php file and create a constant called “WP_TEMPLATE_DIRECTORY” and set its value to “templates”

define(‘WP_TEMPLATE_DIRECTORY’, ‘templates’);

Screen Shot 2016-04-04 at 3.05.21 PM

Now take all the templates files and move them to the new “templates” folder.  Finally, create a new index.php file in the root of the theme folder and add the following code:

if( function_exists(‘tidyt_template’))
tidyt_template();

 

your application should now look like this:

Screen Shot 2016-05-23 at 4.59.40 PM

 

A couple things to remember

You’ll need to use the same template names as you would in a standard WordPress install, Tidy Templates just moves the location of the templates.

You will also need to use some new template tags in place of the default WordPress tags:

  • get_header() => tidyt_get_header()
  • get_footer() =>tidyt_get_footer()
  • get_sidebar() => tidyt_get_sidebar()
  • get_template_part() => tidyt_get_template_part()
  • comments_template() => tidyt_comments_template()
  • get_search_form() => tidyt_get_search_form()

Don’t worry, the work exactly the same as the default template tags and accept the same arguments. Click here for an example.

What’s next?

So right now, this is essentially a normal WordPress install, we’ve just cleaned things up a bit and placed the templates into their own folder.  Next we’ll add views to our new theme to separate our logic and presentation

Continue on to part 3.