Create fast, responsive WordPress themes with modern development tools.

  • Improve your front-end skills. Learn how to work with Twig templates, Tailwind CSS, and practical CSS layout techniques.
  • Grow your skillset. Learn modern workflow tools such as Git and GitHub, NodeJS, and Gulp.
  • Ship a lightning fast, accessible WordPress Theme. Learn how to identify and remedy speed, SEO and accessibility issues.

Now is a great time to learn WordPress theme development.

WordPress is the most widely used content management system in the world, powering nearly 1/3 of all sites on the internet.

Themes are the heart of the look-and-feel of a WordPress site, and can determine how fast, accessible, and on-brand a website can be.

Creating custom themes with modern tools can help you:

  • Build your own custom blog or portfolio site.
  • Expand your skills for projects outside of WordPress.
  • Gain confidence in shipping a fully custom theme.

Stop watching old, outdated WordPress videos.

When building my own custom Wordpress blog, I had two main frustrations:

  • WordPress PHP templates are a mess of HTML and PHP, reminiscent of the mid-2000s.
  • Playing around excessively with CSS didn't lead to better designs.

Then I discovered Timber and Tailwind CSS, resulting in cleaner templates and better designs.

With Timber (and Twig) - templates went from this:


    <nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e( 'Horizontal', 'twentytwenty' ); ?>" role="navigation">
        <ul class="primary-menu reset-list-style">
            <?php
            if ( has_nav_menu( 'primary' ) ) {
                wp_nav_menu(
                    array(
                        'container'  => '',
                        'items_wrap' => '%3$s',
                        'theme_location' => 'primary',
                    )
                );
            } elseif ( ! has_nav_menu( 'expanded' ) ) {
                wp_list_pages(
                    array(
                        'match_menu_classes' => true,
                        'show_sub_menu_icons' => true,
                        'title_li' => false,
                        'walker'   => new TwentyTwenty_Walker_Page(),
                    )
                );
            }
            ?>
        </ul>
    </nav><!-- .primary-menu-wrapper -->

To this:


    {% if menuPrimary %}
        <ul class="md:flex">
        {% for item in items %}
            <li class="{{ item.classes | join(' ') }}">
                <a target="{{ item.target }}" class="text-blue-900 font-semibold block py-2 md:px-4" href="{{ item.link }}">{{ item.title }}</a>
            </li>
        {% endfor %}
        </ul>
    {% endif %}

With Tailwind CSS - I was able to achieve better designs, faster - all while reducing my CSS footprint.

Want to learn how to do all this?
Here's what's in the course:

  Module 1: Setting Up Our Build Tools
Available in days
days after you enroll
  Module 2: Site Architecture with Timber and Twig
Available in days
days after you enroll
  Module 3: Styling with Tailwind CSS
Available in days
days after you enroll
  Module 4: Performance Optimizations and Bundling
Available in days
days after you enroll
  BONUS: Customizations with ACF and Gutenberg
Available in days
days after you enroll
  BONUS: Continuous Integration with Buddy
Available in days
days after you enroll