Functions.php role in Wordpress - Mini Project: Build & Apply

Understanding the Role of functions.php in WordPress

📖 Scenario: You are creating a simple WordPress child theme. You want to add custom features and styles without changing the original theme files.

🎯 Goal: Build a functions.php file that adds a custom message and enqueues a stylesheet properly in WordPress.

📋 What You'll Learn

Create a functions.php file with a PHP opening tag

Add a function called custom_theme_setup that echoes a welcome message

Hook custom_theme_setup to the after_setup_theme action

Create a function called enqueue_custom_styles to load a CSS file named style.css

Hook enqueue_custom_styles to the wp_enqueue_scripts action

💡 Why This Matters

🌍 Real World

WordPress themes use <code>functions.php</code> to add custom features like menus, styles, scripts, and theme supports without editing core files.

💼 Career

Knowing how to use <code>functions.php</code> is essential for WordPress developers to customize themes safely and follow best practices.

1

Create the functions.php file with PHP tag

Create a file named functions.php and add the PHP opening tag <?php at the top.

Wordpress

<?php
# Your code here

Need a hint?

The functions.php file must start with <?php to write PHP code.

2

Add a function to display a welcome message

Write a function called custom_theme_setup that echoes the text 'Welcome to my custom theme!'.

Wordpress

<?php
// Define the custom_theme_setup function
# Your code here

Need a hint?

Use function custom_theme_setup() { ... } and inside it use echo to show the message.

3

Hook the welcome message function to after_setup_theme

Use add_action to hook the custom_theme_setup function to the after_setup_theme action.

Wordpress

<?php
function custom_theme_setup() {
    echo 'Welcome to my custom theme!';
}

// Hook the function to after_setup_theme
# Your code here

Need a hint?

Use add_action('after_setup_theme', 'custom_theme_setup'); to run your function at the right time.

4

Enqueue a custom stylesheet properly

Create a function called enqueue_custom_styles that uses wp_enqueue_style to load style.css from the theme directory. Then hook it to wp_enqueue_scripts.

Wordpress

<?php
function custom_theme_setup() {
    echo 'Welcome to my custom theme!';
}

add_action('after_setup_theme', 'custom_theme_setup');

// Add function to enqueue style.css
# Your code here

Need a hint?

Use wp_enqueue_style with get_stylesheet_uri() to load the main style.css file.