Create Original Theme in WordPress 3

At the last time, in “Create Original Theme in WordPress 2“, I designed pages of my original theme “techblog”. Today, I start implementing them.

GOAL

To study the name of PHP file for each page and create PHP files.

Environment

WordPress 5.5.1
XAMPP 7.4.10

The corresponding PHP files to items

I created these files.

• index.php
• page.php
• archive.php
• 404.php
• single.php
• sidebar.php
• header.php
• footer.php
• comments.php
• search.php, searchform.php

The all files are in https://github.com/s-nako/wordpressTheme/tree/main/techblog.

This is one of the simplest WordPress themes. I’ll customize it in the future.

Create search.php for original theme

This is one of the articles about project “Create Original Theme in WordPress”.

GOAL

To create search.php and searchform.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

search.php

It is easy to create search.php by copying and changing from archive.php.

<?php
/**
* The template to display search results
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
get_header(); ?>
<div class="container">
<main id="main" class="site-main">
	<div class= "main-content">
		<?php if ( have_posts() ) :?>
			<h1><?php echo esc_html__( 'Search Results for: ', 'techblog' ).'<span>'.esc_html(get_search_query()).'</span>'; ?></h1>
		<?php
			while ( have_posts() ) :
				the_post();
				get_template_part( 'content/content', 'search');
			endwhile;
				the_posts_pagination(
					array('prev_text' => '<u>Back<<</u>  ',
						'next_text' => '  <u>>>Next</u>', )
				);
		endif; ?>
	</div>
</main>
	<?php get_sidebar(); ?>
</div>
<?php
	get_footer(); ?>

Functions

get_search_query()

This function is used to get the posted search query from the search form. The definition is in wp-includes/general-template.php.

 function get_search_query( $escaped = true ) {
    $query = apply_filters( 'get_search_query', get_query_var( 's' ) );
    if ( $escaped ) {
        $query = esc_attr( $query );
    }
    return $query;
}

get_query_var( ‘s’ ) is the function to get the value of a query variable from the key ‘s’. So the input form should be named ‘s’.

get_template_part( $slug, $name = null, $args = array() )

This function is used to get template from {}-{}.php.

In my case, get the template from content/content-search.php by using get_template_part( ‘content/content’, ‘search’). But I don’t need content-search.php because the template content/content-search.php is the same as content.php.

Result

searchform.php

searchform is used as one of the widgets.

<?php
/**
* The search form template
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
?>

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<div class="search-group">
  		<label class="screen-label" for="s"><?php esc_html_e( 'Search:', 'techblog' ); ?></label><br/>
  		<span>
		<input type="text"  class="search-query" placeholder="<?php esc_attr_e('word', 'techblog;' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php esc_attr_e( 'Search for:', 'techblog' ); ?>"/>
		<button type="submit" class="search-submit" name="submit" value="<?php esc_attr_e( 'Search', 'techblog' ); ?>"><span class="material-icons">search</span></button>
		</span>
	</div>
</form>

Result

Change the style

Create comments.php for original theme

This is one of the articles about project “Create Original Theme in WordPress”.

GOAL

To create comments.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

Method

WordPress has useful function to display comment form and functions to post comments.

comments.php

<?php
/**
* The comment form for techblog.
* @package WordPress
* @subpackage Techblog
* @since Techblog 1.0
*/
if ( post_password_required() ) {
	return;
}?>
<div class="comment-area">
	<div id="comments" class="comment-main">
		<?php if ( have_comments() ) : ?>
		<h3 class="comments-title">
			<?php echo "Comments for ".get_the_title(); ?>
		</h3>
		<ol class="comment-list">
			<?php wp_list_comments(
					array(
						'style'       => 'ol',
						'short_ping'  => true,
					)
				);
			?>
		</ol>
		<?php endif;?>
		<?php if (!comments_open() && get_comments_number() != '0' && post_type_supports( get_post_type(), 'comments' ) ) :?>
			<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'techblog' ); ?></p>
		<?php endif;
			comment_form();
		?>
	</div>
</div>

Functions

post_password_required()

post_password_required() is used to protect contents (posts) with password. This function detect whether post requires password and correct password has been provided.

have_comments()

This returns true if comments are available for current WordPress query.

wp_list_comments($args = array(), $comments = null)

This function is used to displays a list of comments for current post or page. The argument array $args defines formatting options.

Reference: Parameters of wp_list_comments() in wordpress.org

comments_open()

This returns true if the current post is open for comments.

get_comments_number()

This function return string that represent the number of comments for the current post or page.

post_type_supports( $post_type, $feature )

This function checks a post type’s support for a given feature. The first argument $post_type is the post type being checked and the second one $feature is the feature being checked.

In my case, get the post type of the current post with get_post_type(), and check if it is ‘comments’.

comment_form( $args = array(), $post_id = null )

comment_form() is used to output a complete commenting form for use within a template.

This function is used to displays a list of comments for current post or page. The argument array $args defines default arguments and form fields to override. You can use it to change class and id names.

Reference: Parameters of comment_form() in wordpress.org

Result

Change the style

Create footer.php for original theme

This is one of the articles about project “Create Original Theme in WordPress”.

GOAL

To create footer.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

footer.php

<?php
/**
* The footer for techblog.
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
?>
<footer class="site-footer" role="contentinfo">
	<div class="footer-main">
		<div class="footer-info">
			<p class="footer-credits">
				<span class="footer-copyright">
					&copy;<?php echo esc_html( date_i18n('Y') );?> <a href="<?php echo esc_url(home_url());?>" rel="home"><?php bloginfo('name');?></a>
				</span>
				<span class="theme-credits">
					<?php echo '|Theme by <a href="s-nako.work"> Nako </a>' ?>
				</span>
			</p>
		</div>
	</div>
	<div class="scroll-to-top" onclick="location.href='#'">
		<span class="material-icons">navigation</span>
	</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

functions.php

/*-------------------
enqueue scripts
-------------------*/
add_action( 'wp_enqueue_scripts', 'techblog_scripts' );
function techblog_scripts() {
	//add icon with Google Material Icons
	wp_enqueue_style( 'google-mateial-style', "https://fonts.googleapis.com/icon?family=Material+Icons", null);
	//------omitted------
}

Functions

date_i18n()

This function retrieves the date in localized format, based on a sum of Unix timestamp and time zone offset in seconds.

It get format such as ‘Y-m-d H:i:s’, ‘l, F j, Y’ or ‘U’ as an argument. In this case, I’d like to retrieve year such as 2020. So I use template “Y”.

date_i18n('Y') /*output is 2020)*/

esc_html() and esc_url()

Escape functions in WordPress. Please check the article “Escape function in WordPress” for detail.

home_url()

This function retrieves the URL for the current site.

How to use icons with Google Material Icon

I used navigation icon in Google Material for the button to scroll to the top.

Search the icon , copy and paste the span tag.

Enqueue the css by using wp_enqueue_style() in functions.php

wp_enqueue_style( 'google-mateial-style', "https://fonts.googleapis.com/icon?family=Material+Icons", null);

You can use web icon service such as Font Awesome or Foundation Icon Fonts 3 in the same way.

Result

Change the style

Create header.php for original theme

This is one of the articles about project “Create Original Theme in WordPress”.

GOAL

To create header.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

What content should be contained?

These are examples of contents in the header.

• Title
• Description
• Menu

hader.php

<?php
/* *
* The Header for techblog.
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
?>

<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header">
	<a class="skip-link" href="#content"><?php esc_html_e( 'Skip to content', 'techblog' ); ?></a>
	<div class="header-main">
		<h1 class="site-title">
			<?php if (has_custom_logo()):
				the_custom_logo();
			else : ?>
				<a class="title-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr(get_bloginfo('name'));?>"><?php echo esc_html(get_bloginfo('name'));?></a>
			<?php endif; ?>
			<span class="site-description">
				<?php echo esc_html(get_bloginfo('description'));?>
			</span>
		</h1>
		<?php 
		wp_nav_menu(
			array(
				'menu'				=> '',
				'theme_location'	=> '',
				'container'			=> 'div',
				'container_class'	=> 'manubar',
				'menu_class'		=> 'nav',
				'fallback_cb'		=> 'wp_page_menu',
				'items_wrap'		=> '<ul id="%1$s" class="%2$s">%3$s</ul>',
			)
		); ?>
	</div>
</header>

functions.php

/*-------------------
enqueue scripts
-------------------*/
add_action( 'wp_enqueue_scripts', 'techblog_scripts' );
function techblog_scripts() {
	// Add main theme stylesheet
	wp_enqueue_style( 'techblog-main-style', get_stylesheet_uri(), null);
}

Functions

wp_head()htmq.com/style/font-weight.shtml

The function wp_head() should be in <head></head>. This is initially the same as do_action(‘wp_head’).

function wp_head() {
    /**
     * Prints scripts or data in the head tag on the front end.
     *
     * @since 1.5.0
     */
    do_action( 'wp_head' );
}

This function fire functions attached to the hook ‘wp_head’. For example, some functions are added to the hook ‘wp_head’ in wordpress\wp-includes\default-filters.php as below.

// Actions.
add_action( 'wp_head', '_wp_render_title_tag', 1 );
add_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_head', 'wp_resource_hints', 2 );
add_action( 'wp_head', 'feed_links', 2 );
add_action( 'wp_head', 'feed_links_extra', 3 );
add_action( 'wp_head', 'rsd_link' );
...

Please check “What is Hook in WordPress?” for details about hooks in WordPress.

body_class()

The function body_class() is displays the class names for the body element.

function body_class( $class = '' ) {
    // Separates class names with a single space, collates class names for body element.
    echo 'class="' . esc_attr( implode( ' ', get_body_class( $class ) ) ) . '"';
}

The following is an example of actual HTML output.

<body class="home blog logged-in admin-bar no-customize-support">

wp_body_open()

This function is initially the same as do_action(‘wp_body_open’).

function wp_body_open() {
    /**
     * Triggered after the opening body tag.
     *
     * @since 5.2.0
     */
    do_action( 'wp_body_open' );
}

Menu bar

wp_nav_menu(array $args = array())

wp_nav_menu() is the function to display navigation menu. the arguments list can be seen here.

How to import style.css in the header

It is recommended to use wp_enqueue_scripts instead of embedding <link rel=”stylesheet” href=”wordpress/wp-content/themes/techblog/style.css” type=”text/css”/> in header.php directly.

Add add_action( ‘wp_enqueue_scripts’, ‘<enque_function_name>‘ ); in functions.php of your theme.

add_action( 'wp_enqueue_scripts', 'techblog_scripts' );
function techblog_scripts() {
	// Add main theme stylesheet
	wp_enqueue_style( 'techblog-main-style', get_stylesheet_uri(), null);
}

Result

Change the style

Appendix

<link rel=”profile” href=”http://gmpg.org/xfn/11″>

In many WordPress themes, the link tag <link rel=”profile” href=”http://gmpg.org/xfn/11″> is contained within <head>. This tag is used for making relationship to  XMDP (Xhtml Meta Data Profiles). You don’t need include this. You can see more information in “What rel=profile is for?“.