#1 wp-theme-basics

WordPress Theme Tutorial for Beginners

Beginner WordPress Theme Tutorial (10 Modules)

Module 1: Theme Setup

Create a folder in wp-content/themes/ called mytheme and add style.css and index.php.

/*
Theme Name: MyTheme
Author: Your Name
Description: A beginner WordPress theme
Version: 1.0
*/

<?php
// index.php
get_header();
if (have_posts()) : 
    while (have_posts()) : the_post();
        the_title('<h2>', '</h2>');
        the_content();
    endwhile; 
endif;
get_footer();
?>

Module 2: Adding style.css

Write basic CSS to style your theme.

body {
    font-family: Arial, sans-serif;
    background: #f9f9f9;
    color: #333;
}
h2 { color: #0073aa; }

Module 3: functions.php

Enqueue styles and scripts.

<?php
function mytheme_scripts() {
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());
    wp_enqueue_script('mytheme-main', get_template_directory_uri() . '/main.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'mytheme_scripts');
?>

Module 4: main.js

Add basic JavaScript functionality.

document.addEventListener('DOMContentLoaded', () => {
    console.log('MyTheme is ready!');
});

Module 5: Header & Footer

Create header.php and footer.php.

<!-- header.php -->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header><h1><?php bloginfo('name'); ?></h1></header>

<!-- footer.php -->
<footer><p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p></footer>
<?php wp_footer(); ?>
</body>
</html>

Module 6: single.php

Display single posts.

<?php
get_header();
if (have_posts()) : while (have_posts()) : the_post();
    the_title('<h2>', '</h2>');
    the_content();
endwhile; endif;
get_footer();
?>

Module 7: page.php

Display pages.

<?php
get_header();
if (have_posts()) : while (have_posts()) : the_post();
    the_title('<h2>', '</h2>');
    the_content();
endwhile; endif;
get_footer();
?>

Module 8: front-page.php

Custom homepage template.

<?php
get_header();
echo '<h2>Welcome to MyTheme</h2>';
if (have_posts()) : while (have_posts()) : the_post();
    the_content();
endwhile; endif;
get_footer();
?>

Module 9: Sidebar (Optional)

Create sidebar.php and register widget area.

<?php
if (is_active_sidebar('main-sidebar')) :
    dynamic_sidebar('main-sidebar');
endif;
?>

Module 10: Activating Theme

Go to WordPress Admin > Appearance > Themes > Activate MyTheme.

Comments

Post a Comment