WP Theme Development: Styles, Functions, and Basic Theme Setup

Understanding Styles and Functions in WordPress Themes

What are Stylesheets?

A stylesheet in WordPress is typically a CSS file that defines the visual styling of a theme. It controls layout, fonts, colors, spacing, and overall aesthetics. Every theme must have a style.css file located in the theme’s root folder. This file does more than just styling; it also contains important metadata about the theme.

Example of `style.css`:

/*
Theme Name: ScreenTime Theme
Theme URI: https://leaveitblank.co/
Author: Leaveitblank
Author URI: https://leaveitblank.co/
Description: A basic movie theme for WordPress.
Version: 1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Enqueuing Styles

To properly add the style.css file to the theme, you should use WordPress’s wp_enqueue_style() function. This ensures the CSS is loaded correctly and prevents issues like duplicate CSS files being loaded.

In the functions.php file:

function my_custom_theme_styles() {
    wp_enqueue_style('my-theme-styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_styles');

Here, get_stylesheet_uri() returns the URL of the theme’s style.css.

Theme Functions and `functions.php`

The functions.php file is the heart of a WordPress theme’s functionality. It’s where you define custom features, register widgets, add menus, load scripts, and more. This file acts like a plugin for the theme, extending WordPress’s functionality on the front and back ends.

Example of a simple `functions.php` file:

<?php
// Register navigation menu
function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __('Primary Menu', 'mytheme'),
    ));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
?>

Enqueuing Scripts

In addition to styles, themes also require JavaScript for enhanced functionality. Like CSS, JavaScript files should also be enqueued using the wp_enqueue_script() function.

function my_custom_theme_scripts() {
    wp_enqueue_script('theme-scripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_custom_theme_scripts');

This code adds the scripts.js file to the theme and ensures it loads in the footer (true in the wp_enqueue_script() function).

Functionality in WordPress Themes

Navigation Menus

Navigation menus allow users to customize and assign menus from the WordPress dashboard. You can register multiple menus in your theme via the register_nav_menus() function.

function my_custom_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'mytheme'),
        'footer' => __('Footer Menu', 'mytheme'),
    ));
}
add_action('after_setup_theme', 'my_custom_theme_menus');

Then, to display the menu in the theme, use:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
));

Sidebars and Widgets

Sidebars hold widgets, which provide a way for users to add content (like a search bar or recent posts) to certain areas of the theme.

To register a sidebar in functions.php:

function my_custom_theme_widgets_init() {
    register_sidebar(array(
        'name'          => __('Main Sidebar', 'mytheme'),
        'id'            => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_custom_theme_widgets_init');

Post Thumbnails (Featured Images)

Featured images (or post thumbnails) are a common requirement for themes, especially for blogs or magazine sites.

Enable post thumbnails in the theme by adding this to functions.php:

function my_custom_theme_setup() {
    add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'my_custom_theme_setup');

You can then display a featured image in templates:

if (has_post_thumbnail()) {
    the_post_thumbnail('full');
}

Custom Logo Support

To allow users to upload their custom logo:

function my_custom_theme_logo_setup() {
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ));
}
add_action('after_setup_theme', 'my_custom_theme_logo_setup');

In the header template (header.php), display the logo:

if (function_exists('the_custom_logo')) {
    the_custom_logo();
}

Theme Basics

What Makes a WordPress Theme?

A WordPress theme consists of a set of files that define the appearance and functionality of your website. At a minimum, a theme requires:

style.css: The main stylesheet.
index.php: The default template file.
functions.php: Handles theme features and functionality.

The Core Theme Files

The following files are common in most themes:

header.php: Contains the header section of the theme (e.g., <head> tag, navigation).
footer.php: Contains the footer section of the theme.

single.php: Used to display single posts.
page.php: Template for static pages.
archive.php: Displays post archives (e.g., category, tag, or date-based archives).
404.php: Displays when a page is not found.

Template Hierarchy

The WordPress template hierarchy is the system WordPress uses to determine which template file to use when displaying a page. For example, when viewing a post, WordPress will look for the following files, in this order:

single-{post-type}.php
single.php
index.php

For a category archive, it would look for:

category-{slug}.php
category.php
archive.php
index.php

Understanding the template hierarchy helps in organizing and customizing the theme.

Creating a Basic Theme from Scratch

Setting Up the Theme Folder

Create a new folder inside the /wp-content/themes/ directory (e.g., my-custom-theme).
Inside this folder, create two essential files:
- style.css
- index.php

Creating the Stylesheet

In style.css, add theme metadata and some basic styles:

/*
Theme Name: Screen Time Theme
Theme URI: http://leaveitblank.com/
Author: Leaveitblank
Description: A basic theme for movie plugin.
*/
/* A basic theme for WordPress. */
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Basic styles for the theme */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}
footer {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

Creating a Basic `functions.php` File

Create a functions.php file in the theme directory to define theme features and functionality:

<?php
function my_custom_theme_setup() {
    // Add support for title tag
    add_theme_support('title-tag');

    // Add support for custom logo
    add_theme_support('custom-logo');

    // Register navigation menu
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'mytheme'),
    ));

    // Add support for post thumbnails
    add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'my_custom_theme_setup');

// Enqueue styles and scripts
function my_custom_theme_enqueue_scripts() {
    wp_enqueue_style('my-custom-style', get_stylesheet_uri());
    wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/scripts.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_scripts');
?>

Building a Simple Template File

Create a basic index.php template file to display content:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header>
    <h1><?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'container'      => 'nav',
        'container_class'=> 'main-navigation',
    ));
    ?>
</header>

<main>
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <?php the_content(); ?>
            </article>
        <?php endwhile; ?>
    <?php else : ?>
        <p><?php _e('No posts found', 'mytheme'); ?></p>
    <?php endif; ?>
</main>

<footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Testing and Activating the Theme

Go to your WordPress dashboard and navigate to Appearance > Themes.
You should see “My Custom Theme” listed there. Click Activate to set it as your active theme.
Visit your website to see your new theme in action.

Thats all for todays notes, see you tmr.

Thank you for reading…
By ~Leaveitbalnk (Mayank Tripathi)