Theme from scratch setup in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the theme's style sheet URI in functions.php.

Wordpress

<?php
function mytheme_enqueue_styles() {
    wp_enqueue_style('mytheme-style', get_template_directory_uri() . '/[1]');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

Drag options to blanks, or click blank then click option'

Aheader.php

Bstyle.css

Cfunctions.php

Dindex.php

Attempts:

3 left

💡 Hint

Common Mistakes

Using a PHP file name instead of the CSS file.

Forgetting to add the correct path to the stylesheet.

The main stylesheet file for a WordPress theme is style.css. Using get_template_directory_uri() . '/style.css' correctly points to the style sheet.

2fill in blank

medium

Complete the code to register a navigation menu in functions.php.

Wordpress

<?php
function mytheme_setup() {
    register_nav_menus(array(
        'primary' => '[1]'
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

Drag options to blanks, or click blank then click option'

APrimary Menu

BMain Menu

CHeader Menu

DFooter Menu

Attempts:

3 left

💡 Hint

Common Mistakes

Using the menu location key instead of the label.

Leaving the label empty or unclear.

The label for the menu location can be any string, but 'Primary Menu' is a common descriptive name for the main navigation.

3fill in blank

hard

Fix the error in the code to properly load the theme's text domain for translations.

Wordpress

<?php
function mytheme_setup() {
    load_theme_textdomain('[1]', get_template_directory() . '/languages');
}
add_action('after_setup_theme', 'mytheme_setup');

Drag options to blanks, or click blank then click option'

Amytheme

BMyTheme

Ctheme

Dtextdomain

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase letters in the text domain.

Using a generic or incorrect string.

The text domain must match the theme folder name or the one defined in style.css. Usually, it is lowercase and matches the theme slug, like mytheme.

4fill in blank

hard

Fill both blanks to create a basic index.php template that loads the header and footer.

Wordpress

<?php
get_[1]();
?>

<h1>Welcome to my theme</h1>

<?php
get_[2]();
?>

Drag options to blanks, or click blank then click option'

Aheader

Bfooter

Csidebar

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using get_sidebar() instead of get_footer().

Forgetting to include either header or footer.

The get_header() function loads the header template, and get_footer() loads the footer template. These are essential parts of a WordPress theme's page structure.

5fill in blank

hard

Fill all three blanks to create a basic loop in index.php that displays post titles.

Wordpress

<?php
if (have_posts()) :
    while (have_posts()) : the_[1]();
        ?><h2><?php the_[2](); ?></h2><?php
    endwhile;
else :
    ?><p>No posts found.</p><?php
endif;
get_[3]();

Drag options to blanks, or click blank then click option'

Apost

Btitle

Cfooter

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using the_post() incorrectly spelled.

Using the_content() instead of the_title().

Forgetting to load the footer.

The loop uses the_post() to set up post data, the_title() to display the post title, and get_footer() to load the footer template.