# WORDPRESS THEME (Template)
, (*1)
The power of Composer and MVC in your Wordpress themes., (*2)
Wordpress THEME (WPT) is a development template that can be used to create modern and elegant themes. WPT comes with Composer and Lightweight MVC framework., (*3)
NOTE: Need to create a plugin? Use Wordpress PLUGIN template instead., (*4)
The following video tutorial from Wordpress PLUGIN can be applied to this theme too:
, (*5)
Requirements
Installation
WPT utilizes Composer to manage its dependencies. So, before using WPT, make sure you have Composer installed on your machine., (*6)
Step 1
Download the latest release of the software;, (*7)
Step 2
Create the folder location where your theme will reside, usually inside the themes folder of your wordpress installation:, (*8)
[WORDPRESS ROOT]
|---> [wp-content]
|---> [themes]
|---> "your-theme-name"
Step 3
Copy the content of the release version downloaded into your theme's folder, should look like this:, (*9)
[WORDPRESS ROOT]
|---> [wp-content]
|---> [themes]
|---> "your-plugin-name"
|---> [boot]
|---> [config]
|---> [controllers]
|---> [css]
|---> [js]
|---> [theme]
|---> [views]
|---> ayuco
|---> composer.json
|---> LICENSE
|---> functions.php
|---> index.php
|---> README
|---> style.css
Step 4
Open your Command Prompt
application and change directory to point to your theme's folder, where composer.json
resides., (*10)
Type the following command:, (*11)
composer install
This will install all the software dependencies of WPT., (*12)
Step 5
In order to prevent conflicts with other themes using this template, it is suggested to set a name and change its namespace., (*13)
To do this, type the following in the commando prompt:, (*14)
php ayuco setname MyNewName
Finally open style.css
and modify the information located in the first comment section:, (*15)
/*
Theme Name: [MY THEME]
Theme URI: [MY URL]
Author: [MY NAME OR COMPANY NAME]
Author URI: [MY URL]
Description: [THEME DESCRIPTION]
Version: 1.0
License: [LICENSE]
License URI: [LICENSE URL]
Tags: [TAGS SEPARATED BY COMMAS i.e. bootstrap, red, responsive]
Text Domain: [THEME DOMAIN]
Add additional description here...
*/
INSTALLATION COMPLETED!, (*16)
Updating
To update the current version of the software, in the command prompt type:, (*17)
composer update
Usage
Anything you code file that needs to be created must be located inside the theme
folder., (*18)
Main Class
WPT comes with a master class called Main.php
and which is located in the theme
folder., (*19)
This class is the bridge between Wordpress and WPT. Any Hook or filter should be declared inside this class., (*20)
Hooks and Filters
Main.php
has two methods:, (*21)
class Main extends Theme
{
/**
* Constructor.
* Declares HOOKS and FILTERS.
*/
public function init()
{
// Call public Wordpress HOOKS and FILTERS here
// --------------------------------------------
// i.e.
// add_action( 'save_post', array( &$this, 'save_post' ) );
}
/**
* Declares HOOKS and FILTERS when on admin dashboard.
*/
public function on_admin()
{
// Call public Wordpress HOOKS and FILTERS here
// --------------------------------------------
// i.e.
// add_action( 'admin_init', array( &$this, 'admin_init' ) );
}
}
init()
is where all public declarations. on_admin()
will be called only when wordpress is on admin dashboard., (*22)
In this following example a hook to modify a post content will be added to the main class., (*23)
class Main extends Theme
{
public function init()
{
add_filter( 'the_content', array( &$this, 'filter_content' ) );
}
public function on_admin()
{
}
public function filter_content( $content )
{
// YOUR CODE HERE
return $content;
}
}
Notice how the add_filter
is registering a call to the method filter_content
within Main.php
., (*24)
You can do the same with admin hooks and filters, like displaying a custom metabox in a post admin form:, (*25)
class Main extends Theme
{
public function init()
{
}
public function on_admin()
{
add_action( 'add_meta_boxes', array( &$this, 'metaboxes' ) );
}
public function metaboxes( $post_type, $post )
{
// YOUR METABOX DECALARATION HERE
}
}
Your Main.php
can be accessed by plugins or by your templates by calling the $theme
variable., (*26)
Other naming examples:, (*27)
$theme->my_function();
MVC
Lightweight MVC is a powerfull and small MVC framework that comes with WPT., (*28)
To read more about the usar of Models, Views and Controllers we recommed to visit the packages main page:, (*29)
Lightweight MVC, (*30)
Main class and MVC
Lightweight MVC engine is already integrated with Main.php
, call the engine with $this->mvc
., (*31)
In the following example, Main.php
is calling PostController
to save a post modification:, (*32)
class Main extends Theme
{
public function init()
{
}
public function on_admin()
{
add_action( 'save_post', array( &$this, 'save_post' ) );
}
public function save_post( $post_id )
{
$this->mvc->call( 'PostController@save', $post_id );
}
}
Here is where the MVC files are located within your theme:, (*33)
[THEME ROOT]
|---> [controllers]
|---> [theme]
|---> [models]
|---> [views]
Templating
You can do templates like you would normally do, the only differency is that new you have the power of MVC to take advantage of., (*34)
Functions
Using function theme_view
will let you display views inside your templates., (*35)
In the following example, a normal WP template displays banner.example
view with a parameter called limit
and with a value of 4
., (*36)
4 ) ) ?>
Sometimes you might want to add extra logic by calling the results of a controller. You can do this by calling your Main.php
class variable ($theme
)., (*37)
controller_results() ?>
Your Main.php
could look like:, (*38)
class Main extends Theme
{
public function controller_results()
{
$this->mvc->call( 'PostController@search_results' );
}
}
Full MVC
You can also use MVC to generate all your templates. Simply call the required function in the template., (*39)
/**
* This is the whole template content for index.php
*/
$theme->generate_index();
Your Main.php
could look like:, (*40)
class Main extends Theme
{
public function generate_index()
{
$this->mvc->call( 'IndexController@generate' );
}
}
Config
You can add your own config variables into config\theme.php
and access them within Main.php
, like:, (*41)
class Main extends Theme
{
public function controller_results()
{
$this->mvc->call( 'PostController@search_results' );
}
}
```php
// In config\theme.php
'myapi' => array(
'key' => 'jdsldjsfl12938nfk',
),
'url' => 'http://api.com',
class Main extends Theme
{
public function connect_api()
{
$key = $this->config->get('myapi.key');
$url = $this->config->get('url');
// MY CODE
}
}
Coding Guidelines
The coding is a mix between PSR-2 and Wordpress PHP guidelines., (*42)
License
Wordpress Theme is free software distributed under the terms of the MIT license., (*43)