Revising Basic Theme

Summary: Revising topics like style.css, function.php, template hierarchy, template tags and conditional tags.

`style.css`

The style.css file is the main stylesheet for our WordPress theme. It’s where all our custom CSS goes and how we control the appearance of our website from layout to fonts, colors, and other visual aspects.

The top part of the style.css file contains a special comment block that tells WordPress about the theme.

  /*
   Theme Name: Foo Bar
   Theme URI: http://foo.com
   Author: Foo Bar
   Author URI: http://foo.com
   Description: A description of Foo Bar
   Version: 1.0
   License: GNU General Public License v2 or later
   License URI: http://www.gnu.org/licenses/gpl-2.0.html
   Text Domain: foobar
  */

`functions.php`

The functions.php file acts as a blueprint for our theme’s features and functionality. We can add new features, modify existing ones, and even use it to include additional styles and scripts.

We typically start with a setup function in functions.php where we enable theme features like post thumbnails, menus, and more.

  function foo_theme_setup() {
      add_theme_support('post-thumbnails'); 
      add_theme_support('custom-logo');
      add_theme_support('title-tag'); 
      register_nav_menus([
          'primary' => __('Primary Menu', 'foobar'),
          'footer' => __('Footer Menu', 'foobar'),
      ]);
  }
  add_action('after_setup_theme', 'foo_theme_setup');

Enqueuing Styles and Scripts: The best way to include stylesheets including style.css and JavaScript files is by using wp_enqueue_style() and wp_enqueue_script().

  function foo_enqueue_scripts() {
      wp_enqueue_style('main-stylesheet', get_stylesheet_uri());
      wp_enqueue_style('custom-css', get_template_directory_uri() . '/css/custom.css');
      wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', [], false, true);
  }
  add_action('wp_enqueue_scripts', 'foo_enqueue_scripts');

Adding Custom Widgets: We can use functions.php to register custom widget areas.

  function foo_widgets_init() {
      register_sidebar([
          'name' => __('Sidebar', 'foobar'),
          'id' => 'sidebar-1',
          'description' => __('Widgets in this area will be shown on the sidebar.', 'foobar'),
          'before_widget' => '<section class="widget">',
          'after_widget' => '</section>',
          'before_title' => '<h2 class="widget-title">',
          'after_title' => '</h2>',
      ]);
  }
  add_action('widgets_init', 'foo_widgets_init');

  function foo_egister__menus() {
      register_nav_menus([
          'header-menu' => __('Header Menu', 'foobar'),
          'footer-menu' => __('Footer Menu', 'foobar'),
      ]);
  }
  add_action('init', 'foo_my_menus');

Template Hierarchy

The WordPress Template Hierarchy determines which template files WordPress uses to display different types of content posts, pages, archives.

single.php – Displays individual posts.
page.php – Displays static pages.
archive.php – Displays lists of posts.
search.php – Displays search results.
404.php – Displays when a page is not found.

Template Parts:

We can use get_template_part() to include reusable sections of code like headers, footers across multiple templates.

  get_template_part('template-parts/content', 'single');

Template Tags

Template tags are built-in WordPress functions that are used within theme templates to retrieve and display dynamic content such as post titles, content, metadata.

the_title(): Displays the title of the current post or page.
the_content(): Displays the content of the post or page, including text, images, and any shortcodes.
the_excerpt(): Displays a short summary or excerpt of the post. Often used in archive pages or blog listings.
the_post_thumbnail(): Displays the post’s featured image (thumbnail). The size of the image can be controlled via parameters.
the_date(): Displays the publication date of the current post.
the_author(): Displays the author of the post.
the_category(): Displays the categories assigned to the post.
the_tags(): Displays the tags assigned to the post.
the_posts_pagination(): Provides pagination for archive pages or large lists of posts.
comments_template(): Includes the comments template on a single post or page.
comment_form(): Displays the WordPress comment form.

<h1><?php the_title(); ?></h1>
<div class="post-content">
    <?php the_content(); ?>
</div>
<p><?php the_excerpt(); ?></p>
<div class="post-thumbnail">
    <?php the_post_thumbnail('medium'); ?>
</div>
<span class="post-author"><?php the_author(); ?></span>

Conditional Tags

Conditional tags allow us to modify the theme’s behavior based on specific conditions, such as the type of page being viewed home page, single post, archive, user roles. They return either true or false depending on the condition, making it possible to customize template rendering.

is_home(): Returns true if the homepage is being displayed for a blog-style home.
is_front_page(): Returns true if the front page is being displayed.
is_single(): Returns true if viewing a single post.
is_page(): Returns true if viewing a specific page.
is_archive(): Returns true if viewing any archive page.
is_404(): Returns true if the current page is a 404 error page.
is_category(): Returns true if viewing a category archive.
is_tag(): Returns true if viewing a tag archive.
is_post_type_archive(): Returns true if viewing an archive for a custom post type.

<?php if (is_home()) : ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_excerpt(); ?></p>
<?php elseif (is_single()) : ?>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
<?php endif; ?>