Overview Sage starter theme, Sage’s controller and view
- 1 I. Introduce about WordPress starter theme
- 2 II. Digging deeper to Sage starter theme
- 2.1 1. Main features
- 2.2 2. Introduce about Sage’s Controller and Template
- 2.2.1 A. Sage’s Template
- 2.2.2 Sage’s views use normal WordPress Template Hierarchy. So you can extend the WordPress Template by the normal way. For example:
- 2.2.3 If you want to override template for archive page, just copy ‘index.blade.php’ content to ‘archive.blade.php’ for customizing archive page.
- 2.2.4 B. What is Sage’s Controller?
- 2.2.5 Share this:
- 2.2.6 Like this:
- 2.2.7 Related
I. Introduce about WordPress starter theme
1. What is the WordPress starter theme?
Imagine you’re looking to build a brand new car from scratch. Sounds pretty intimidating right? Now imagine that one of the best car companies in the world is giving you a free “starter” car. They’ve built the car using years of practice and experience. It’s a fully functioning car, it just doesn’t have any design or colors applied to it. You need to paint it and make some configuration choices.
A WordPress starter theme is exactly like that car. It’s a fully functional WordPress theme that just needs to be styled and configured.
2. Popular WordPress starter themes
Currently, there are two most popular WordPress starter themes:
Here are some comparisons (my personal POV):
Around February, 2012
Around January, 2011
Stars on Github
Automattic Theme Team and contributors.
Roots Team and contributors.
– Build by best WordPress theme developers (Automattic developers).
– Give you a 1000 hour head start on your theme development projects.
– Very basics.
– Highly recommended if you want to understand how a WordPress theme works.
– Easy to use.
– Well documented.
– Fit for newbie.
– Build by Laravel lovers.
– Include all modern technology stack with modern workflow (Sass, blade template, webpack, bootstrap 4,…).
– Very clean code.
– Documentation is on process (Sage 9).
– Fit for experience programmers.
II. Digging deeper to Sage starter theme
1. Main features
There are a lot of modern features which are provided by default in Sage, include:
- Sass for stylesheets
- Webpack for compiling assets, optimizing images, and concatenating and minifying files
- Browsersync for synchronized browser testing
- Laravel Blade as a templating engine
- Controller for passing data to Blade templates
- CSS framework options:
- Font Awesome (optional)
2. Introduce about Sage’s Controller and Template
If you are familiar with MVC pattern and have some experience on how to develop a website with WordPress, you will know that Wordpress itself is not architected in MVC. But you still can apply this modern architect with Sage theme.
A. Sage’s Template
Sage’s template is a list of blade template files to generate your front layout of your WordPress website.
Sage’s views use normal WordPress Template Hierarchy. So you can extend the WordPress Template by the normal way. For example:
If you want to override template for archive page, just copy ‘index.blade.php’ content to ‘archive.blade.php’ for customizing archive page.
All your website’s layout templates will be located at:
wp-content/themes/<sage theme name>/resources/views. In this folder, we will seperate template files to 3 type:
- The master layout file, usually is named
base.blade.php, is the base template of all your WordPress page. The master layout file is located in
Example of a master layout file:
- The partial layout files, such as
comment, are the parts of your WordPress page. The partial layout files is located in
Example of partial layout file (header layout file):
- The page layout files, such as
archive, are the templates which generate your WordPress page. The page layout files are located in
Example of the page layout files is
B. What is Sage’s Controller?
By default, Sage provides us Controllers for any templates, pages and post types. Purpose of these controllers is passing data to Blade Template.
Controller files follow the same hierarchy as WordPress
You can view the controller hierarchy by using the Blade directive
For example: if you call
@debug('hierarchy')inside your Front Page template, like this:
When visiting your front page, you will see something like this:
What are those files? They are the controllers which are accepted by
front-page page. You can see that all of these file names are match with the template files, which will be detected by WordPress whenever it renders layout for
front-pagepage (WordPress hierarchy).
front-page.php file will have more priority than
home.php file and so on.
Sage’s controller accept 3 different methods scope, each scope will be used to serve a specific purpose:
public: This scope will be used if you want to expose the returned to the blade views. For example:
You want to display a custom title on
front-page, follow these steps:
1. Create public function inside your controller
$custom_titlevariable inside your
3. Visit your front page, you will see something like this
public static: This scope will be used if you want to use the function within your Blade view/s. For example:
I will display a custom title on
front-pagepage, but in a different way:
protected: This scope will be used if you want to create internal controller methods. For example:
Another way to display custom title on
Thanks for reading.