Wordpress Theme Development with Twig and Timber

Name: Wordpress Theme Development with Twig and Timber
Rating: 4.7 (138 reviews)

Easily learn to create themes in HTML style. Clean and readable code with modern approach. Even without PHP knowledge.

Highest Rated

Created byTomek Lecki

Last updated 7/2020

English

What you'll learn

Wordpress Theme Development
Twig and Timber

Course content

5 sections • 59 lectures • 10h 36m total length

About this course14:39
Basic information about this course:
Who is this course for?
Why would you use Twig & Timber?
List of contents
Course project - website
Additional information
How does this system work?10:15
How Timber and Twig work in Wordpress environment. Explanation based on templating example.
Demonstration3:37
Process of creating new Wordpress installation with Twig and Timber environment to encourage you to join this course. All the steps are going to be explain in next chapters.

About Twig and Timber7:30
Basic information about Twig and Timber and where you should search for information about it.
Instruction0:59
Twig - variables11:14
What is a variable and how to output it.
Twig - data types - string, number, boolean, null13:37
Understand data types, in first part you will learn about string, number, boolean and null.
Twig - data types - array, hash9:26
Understand data types, in second part you will learn about array and hash.
Twig - block, extends, parent - template inheritance7:49
Understand basics of template inheritance - one of the best Twig features, using tags block, extends and parent function
Twig - if statement - conditional logic9:28
Conditional logic with if tag, execute some code based on some condition.
Twig - ternary operator - conditional logic6:49
Different syntax for conditional logic - ternary operator - that you can use instead of if block.
Twig - for loop5:53
Introduction to for loop that is used to run the same code multiple times, to iterate in a sequence of items.
Twig - more about for loop9:15
More information and different usage of for loop.
Twig - macro and include - reusable templates19:47
Reusable pieces of code are another thing about templating in twig. Learn how to do it with macro and include.
Twig - more about macro16:48
More information about macro, how to set default values, call macro from the same file and special variable varargs.
Twig - templating example2:56
Quick example to practice templating and visualize the rendering process.
Twig - filters20:20
Learn how to modify the variable before outputting to the HTML.
Twig - functions11:35
Learn how to use functions with some examples.
Twig - operators17:30
Explanation about available operators (logic, math, is, in) and how to perform a test.
Twig - truthy and falsy values7:54
Understand what is a truthy and falsy value in comparison to true and false.
Twig - comments and debugging8:35
HTML and Twig comments compared and also how to use dump function for debugging.
Timber - basics18:11
How to install Timber and how it connects Twig and WordPress. Also about two template hierarchies used in this environment to render initial .twig file.
Timber - context10:06
Examples of data that you can grab from the context using post. site. and theme.
Timber - adding variables to the context16:10
Learn how to add your own variables to the context in controller file (local) and also in functions (global). Also about using Advanced Custom Fields to send data from WP backend to the .twig template.
Timber - features19:19
Few examples of different Timber features to give you an idea of how many things Timber has to offer.
Timber - starter theme12:29
How to install and use Timber Starter Theme as great starting point for you project.

Introduction3:24
Explore building a small local news site using WordPress, Timber, and Twig, with step-by-step configuration, data import, and responsive design tips, plus variations and assignments.
Configuration16:18
Configure a WordPress development environment from scratch, install WordPress locally, set up a Timber theme with Twig templates, and manage dependencies with Composer.
Bootstrap5:22
Importing data18:28
Prepare and import site data for a WordPress theme, using resources, databases, and images to build pages and custom post types like news, people, and places with featured images.
Navigation bar13:39
News - page template11:24
News - terms9:35
News - pagination11:44
News - breaking news7:17
Create a breaking news feature in a WordPress theme by using the Advanced Custom Fields plugin, adding a post field, and applying conditional Twig styling.
News - single post template - part 113:11
News - single post template - part 28:53
Archive4:52
Activate category and tag links in archive templates using Timber and Twig, rendering term-specific item lists with reusable includes and dedicated archive twig files for each category or tag.
Subheader - part 115:27
Subheader - part 24:30
Learn to display and highlight WordPress post categories and tags in a single item view using Twig and Timber, with options to use block, macro, or include.
People - page template10:42
Develop a WordPress page template with Twig and Timber to list all person posts from a custom post type, displaying thumbnail, name, and an excerpt with links to profiles.
People - person post template - part 17:10
Create a WordPress person post template with Twig and Timber to display a person's image, content, and name in a Bootstrap two-column layout, with favorite places via a relationship field.
People - person post template- part 211:25
Places - page template - part 18:52
Places - page template - part 25:24
Demonstrates a reverse query in WordPress, fetching all people (post type: person), filtering by each place in their favorite places, and displaying linked thumbnails with resize.
Home - top story and featured news13:40
Home - latest news9:48
Home - duplicated posts11:40
Home - promoted people7:58
Search form and template7:18
Footer10:59

Deployment9:45
In this lesson we are going to learn what you should remember before deploying website and how to do it.
Macro example27:11
In this lesson we are going to create more complicated macro example.
Extends - additional 3rd level11:11
Options page with ACF14:18
Learn to build a WordPress theme options page with ACF Pro or a free version workaround, expose options to Twig templates, and update site values from the backend.
Bootimber11:44
In this lesson we are going to learn what is Bootimber theme, how you can use it to develop in a more efficient way.

Requirements

Basic HTML / CSS knowledge

Description

Important: Course has been updated in July 2020. Chapter 3 and 4 are live with more information and also increased font size.

--------------------------

Default WordPress templating system has some weaknesses. I will show you how to use Twig and Timber to create themes with modern approach where template is separated from the controller, templates are clean and readable just like in HTML with some extra features.

You will learn basics about Twig and Timber and how to use it in WordPress. As the project we are going to create a website from scratch using this environment. PHP and Bootstrap knowledge is useful bot not required. The only requirement is basic knowledge about HTML and CSS to understand the code.

Additional information:

This course is more like an introduction, we are going to stay near the beginner level for most of the time. It is not a full guide covering all features of Twig or Timber.

Who this course is for:

Developers that don't know PHP and want to create Wordpress theme.
Developers that know PHP and search for better experience in creating Wordpress themes.

Wordpress Theme Development with Twig and Timber

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 29min

Environment3 lectures • 21min

Twig and Timber23 lectures • 4hr 24min

Website - Practice part25 lectures • 4hr 9min

Extra5 lectures • 1hr 14min

Requirements

Description

Who this course is for: