Overview Sage starter theme, Sage’s controller and view

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):

Theme

Underscore

Sage

Created Date

Around February, 2012

Around January, 2011

Stars on Github

7996 (2017/05/12)

8891 (2017/05/12)

Developers

Automattic Theme Team and contributors.

Roots Team and contributors.

Short reviews

– 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
  • ES6 for JavaScript
  • 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:
    1. Bootstrap 4
    2. Bulma
    3. Foundation
    4. Tachyons
    5. None (blank slate)
  • 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.

Basic usages

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.

Template structure

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 app.blade.php or base.blade.php, is the base template of all your WordPress page. The master layout file is located in layouts folder.

    Example of a master layout file:

  • The partial layout files, such as header, footer, or comment, are the parts of your WordPress page. The partial layout files is located in partialsfolder.

    Example of partial layout file (header layout file):

  • The page layout files, such as index, front-page, archive, are the templates which generate your WordPress page. The page layout files are located in viewsroot folder.

    Example of the page layout files is index.blade.php file above.

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 @debug('hierarchy').
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).

The front-page.php file will have more priority than home.php file and so on.

Basic usages

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

    2. Call $custom_titlevariable inside your front-pagefile

    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 front-pagepage

Thanks for reading.

Slider: https://docs.google.com/presentation/d/1FDtZvlbuqkBQUkqvVbO2_-wxW1qqPJQW4qvgnf58mgw/edit#slide=id.g2bf1edd8ae_0_53
References: 

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: