functions.php and style.css

Summary: Learning about the two most important files in the WordPress theme which are functions.php and style.css.

functions.php

The functions.php file behaves like a WordPress plugin, adding features and functionality to a WordPress site. We can use it to call WordPress functions and to define our own functions. The same result can be produced using either a plugin or functions.php. If we are creating new features that should be available no matter what the website looks like, it is best practice to put them in a plugin.

A WordPress plugin:

• requires specific, unique header text.
• is stored in wp-content/plugins, usually in a subdirectory.
• only executes on page load when activated.
• applies to all themes and
• should have a single purpose – for example, offer search engine optimization features or help with backups.

functions.php file:

• requires no unique header text.
• is stored in theme’s subdirectory in wp-content/themes.
• executes only when in the active theme’s directory.
• applies only to that theme (if the theme is changed, the features can no longer be used) and
• can have numerous blocks of code used for many different purposes.

Navigation Menus

In classic themes, custom navigation menus allow users to edit and customize menus in the Menus admin panel, giving users a drag-and-drop interface to edit the various menus in their theme.

register_nav_menus( array(
    'primary'   => __( 'Primary Menu', 'myfirsttheme' ),
    'secondary' => __( 'Secondary Menu', 'myfirsttheme' )
) );

Post Thumbnails

Post thumbnails and featured images allow our users to choose an image to represent their post. Our theme can decide how to display them, depending on its design. For example, we may choose to display a post thumbnail with each post in an archive view.

add_theme_support( 'post-thumbnails' );

Post Formats

Post formats allow users to format their posts in different ways. This is useful for allowing bloggers to choose different formats and templates based on the content of the post. add_theme_support() is also used for Post Formats.

add_theme_support( 'post-formats',  array( 'aside', 'gallery', 'quote', 'image', 'video' ) );

Example functions.php

<?php

if ( ! isset( $content_width ) ) {
	$content_width = 800;
}

if ( ! function_exists( 'mytheme_setup' ) ) {
	function mytheme_setup() {
		load_theme_textdomain( 'mytheme', get_template_directory() . '/languages' );

		add_theme_support( 'automatic-feed-links' );

		add_theme_support( 'post-thumbnails' );

		register_nav_menus( array(
			'primary'   => __( 'Primary Menu', 'mytheme' ),
			'secondary' => __( 'Secondary Menu', 'mytheme' ),
		) );

		add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote', 'image', 'video' ) );
	}
}
add_action( 'after_setup_theme', 'mytheme_setup' );

style.css

The style.css is a stylesheet CSS file required for every WordPress theme. It controls the presentation visual design and layout of the website pages. In order for WordPress to recognize the set of theme template files as a valid theme, the style.css file needs to be located in the root directory of our theme, not a subdirectory.

/*
Theme Name: My Theme
Theme URI: https://mytheme.local
Author: b1ink0
Author URI: https://b1ink0.com
Description: My Description.
Tags: blog, one-colum
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme
*/

• Theme Name (*): Name of the theme.
• Theme URI: The URL of a public web page where users can find more information about the theme.
• Author (*): The name of the individual or organization who developed the theme. Using the Theme Author’s wordpress.org username is recommended.
• Author URI: The URL of the authoring individual or organization.
• Description (*): A short description of the theme.
• Version (*): The version of the theme, written in X.X or X.X.X format.
• Requires at least (*): The oldest main WordPress version the theme will work with, written in X.X format. Themes are only required to support the three last versions.
• Tested up to (*): The last main WordPress version the theme has been tested up to, i.e. 5.4. Write only the number, in X.X format.
• Requires PHP (*): The oldest PHP version supported, in X.X format, only the number
• License (*): The license of the theme.
• License URI (*): The URL of the theme license.
• Text Domain (*): The string used for textdomain for translation.
• Tags: Words or phrases that allow users to find the theme using the tag filter.
• Domain Path: Used so that WordPress knows where to find the translation when the theme is disabled. Defaults to /languages.