WordPress Functionality and Templates

Summary: Learning about WordPress Functionality and different Templates available.

Functionality

Widgets

A widget adds content and features to a widget area. Widget areas provide a way for users to customize their site. A widget area can appear on multiple pages or on only one page. Our theme might have just one widget area or many of them.

<?php
class Foo_Widget extends WP_Widget {
	public function __construct() {
		parent::__construct(
			'foo_widget', // Base ID
			'Foo_Widget', // Name
			array( 'description' => __( 'A Foo Widget', 'text_domain' ) ) // Args
		);
	}

	public function widget( $args, $instance ) {
		extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );
		echo $before_widget;
		if ( ! empty( $title ) ) {
			echo $before_title . $title . $after_title;
		}
		echo __( 'Hello, World!', 'text_domain' );
		echo $after_widget;
	}

	public function form( $instance ) {
		if ( isset( $instance['title'] ) ) {
			$title = $instance['title'];
		} else {
			$title = __( 'New title', 'text_domain' );
		}
		?>
		<p>
			<label for="<?php echo $this->get_field_name( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		 </p>
		<?php
	}

	public function update( $new_instance, $old_instance ) {
		$instance          = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		return $instance;
	}
} 

add_action( 'widgets_init', 'register_foo' );
function register_foo() {
	register_widget( 'Foo_Widget' );
}

Display Widget

<?php the_title(); ?>

<div class="content">
	<?php the_content(); ?>
</div><!-- .content -->

<div class="widget-section">
	<?php the_widget( 'Foo_Widget' ); ?>
</div><!-- .widget-section -->

Comments

WordPress displays comments in our theme based on the settings and code in the comments.php file within our WordPress theme.

// Get only the approved comments
$args = array(
	'status' => 'approve',
);

// The comment Query
$comments_query = new WP_Comment_Query();
$comments       = $comments_query->query( $args );

// Comment Loop
if ( $comments ) {
	foreach ( $comments as $comment ) {
		echo '<p>' . $comment->comment_content . '</p>';
	}
} else {
	echo 'No comments found.';
}

404 Page

A 404 page is important to add into our theme in case a user stumbles upon a page that doesn’t exist or hasn’t been created yet. It is also important that our 404 page gives our visitors a way to arrive at the right place.

Templates

When we are building our theme, we will use template files to affect the layout and design of different parts of our website. For example we would use a header template or template part to create a header. When someone visits a page on our website, WordPress loads a template based on the request. The type of content that is displayed by the template file is determined by the Post Type associated with the template file. The Template Hierarchy describes which template file WordPress will load based on the type of request and whether the template exists in the theme. The server then parses the code in the template and returns HTML to the visitor.

The most critical template file is the index, which is the catch-all template if a more-specific template can not be found in the template hierarchy. Although a theme only needs a index template, typically themes include numerous templates to display different content types and contexts.

Template Part

A template part is a piece of a template that is included as a part of another template, such as a site header. Template part can be embedded in multiple templates, simplifying theme creation.

header.php or header.html for generating the site’s header
footer.php or footer.html for generating the footer
sidebar.php or sidebar.html for generating the sidebar

Template Files

WordPress uses several template files to determine how different types of content are displayed on our site. These template files are part of the WordPress theme, and each one serves a specific purpose for different page types or content areas.

index.php

Purpose: The fallback template for all types of content if no other specific template is found.
Description: This file is the default template used to display a page when no other template is applicable for posts, archives, or 404 pages.

header.php

Purpose: Displays the header section of the site.
Description: Contains code for the header area, such as site logo, navigation menu, and meta tags.

footer.php

Purpose: Displays the footer section of the site.
Description: Contains code for the footer, including copyright information, navigation links, and other bottom-of-page content.

sidebar.php

Purpose: Displays the sidebar section of the site.
Description: Contains the code for sidebars, including widgets, recent posts, categories, and other elements that typically appear alongside the main content.

single.php

Purpose: Displays individual blog posts.
Description: Used to display a single post individual blog post in WordPress.

page.php

Purpose: Displays individual static pages.
Description: This template is used when displaying individual pages in WordPress.

archive.php

Purpose: Displays archive pages.
Description: Used to show lists of posts, such as by category, date, or author.

category.php

Purpose: Displays posts belonging to a specific category.
Description: This template is used when viewing a list of posts in a specific category.

tag.php

Purpose: Displays posts associated with a specific tag.
Description: This template is used when viewing posts that share a common tag.

author.php

Purpose: Displays posts written by a specific author.
Description: Used when viewing an author archive, showing all posts written by a particular author.

search.php

Purpose: Displays search results.
Description: This template is used to display the results of a search query.

404.php

Purpose: Displays a “Page Not Found” error.
Description: This template is used when WordPress cannot find the content a user is looking for.

comments.php

Purpose: Displays the comments section.
Description: Handles the display of comments on a post or page.

home.php

Purpose: Displays the blog posts index.
Description: If our homepage is set to display the latest posts, WordPress will use this template. Otherwise, it uses index.php.

front-page.php

Purpose: Displays the front page of the site.
Description: Used when a static front page is set in WordPress.

date.php

Purpose: Displays posts for a specific date.
Description: This template shows posts from a particular date a specific day, month, or year.

attachment.php

Purpose: Displays attachment pages.
Description: Used to display an individual attachment, such as images or media files, when linked directly.

image.php

Purpose: Displays image attachments.
Description: This template is specifically for displaying image attachments.

taxonomy.php

Purpose: Displays custom taxonomy archive pages.
Description: Used for displaying custom taxonomies.