rtCamp notes, day 23 of undefined

WordPress Themes

Themes are the main front-end design giving elements -> They hold the template and design files for the WordPress website.

Themes are like plugins, they come in a zip package and can be installed in a similar way.

Themes vs Plugins

Themes -> They hold the template and design structure mainly, while they can also include functionality but it is not recommended to add functionality inside the themes because if a user changes/switches the theme the functionality would also be lost,

So for the functionality part, plugins should be preferred and used.

Which are loaded first?

Plugins are loaded before themes,

Reference :

Added echo statement in both plugin and theme code, plugin one was loaded first.

Required Structure

While plugins require you to have a php file with the plugin header information.

Themes require you to have index.php and style.css files inside a theme directory. And themes can only be created inside a directory, not like plugin having just a php file in the plugins folder, they must have a folder inside the themes folder.

• index.php -> It holds the main template data for the theme
• style.css -> It holds the main design data for the theme.

Functions

You may also require to interact with other wordpress data ( using hooks ), this cannot be put up in index.php directly, for that we can take advantage of the functions.php file

functions.php acts just like any plugin file, you can add functionality in this file, though functions.php does not require headers like any other plugin and it won't look like a plugin in plugins,

Activation / Deactivation hooks in Themes?

Themes do not have activation/deactivation hooks like plugins, but there is still a way we can try to achieve that functionality.

We can register our activation function to a different hook after_switch_theme -> this fires when the user has switched to our theme

add_action( 'after_switch_theme', 'after_switch_theme_hook' );
function after_switch_theme_hook( $old_theme_name ) {
	/**
	 * Works when our theme is activated.
	 * Works as activation hook
	 */
	$file = fopen( __DIR__ . '/theme.log', 'a+' );
	fwrite( $file, 'After Switch theme hook called, Previous theme name : ' . $old_theme_name . PHP_EOL );
	fclose( $file );
}

So the hook after_switch_theme can be used as a activation hook to initialise theme files and funcationalities.

Same thing can be done for the deactivation, the hook switch_theme can be used to perform deactivation functions as this hook is fired when the user switches from our theme to some other theme

add_action( 'switch_theme', 'switch_theme_hook' );

function switch_theme_hook( $new ) {
	/**
	 * Works when theme is switched from our theme to some other theme.
	 * Works as deactivation hook
	 */
	$file = fopen( __DIR__ . '/theme.log', 'a+' );
	fwrite( $file, 'Switch theme hook called, NEW : ' . $new . PHP_EOL );
	fclose( $file );
}

Also, functions.php is called after plugin files, so if you try to define a function with the same name in both functions.php and your plugin files, it would cause an error of already defined as functions.php is used to add functionality.

Template Hierarchy

Whenever someone loads a wordpress site, template hierarchy checks which file should be used to display the page, this is known as Template Hierarchy

This totally happens behind the scenes within seconds,

For example loading a front page

WordPress looks for different pages first for loading the front page, and uses the one that is found first,

front-page.php -> home.php -> index.php

If no page is found for a specified page, wordpress will always use index.php which will always be there as it is a required file for the theme.

For example 404 page

404.php -> index.php

WordPress first looks for 404.php and if it is not found wordpress would switch to index.php

Adding predefined features to theme

We can enable some predefined functionalities for our themes with the function add_theme_support(),

A quick example for it would be to add menus support for our theme,

add_theme_support( 'menus' );

add_theme_support( 'custom-header' );

These will enable menus and header option in appearance for our theme.