Create footer.php for original theme

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


To create footer.php


WordPress 5.5.1
XAMPP 7.4.10


* 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 class="theme-credits">
					<?php echo '|Theme by <a href=""> Nako </a>' ?>
	<div class="scroll-to-top" onclick="location.href='#'">
		<span class="material-icons">navigation</span>
<?php wp_footer(); ?>


enqueue scripts
add_action( 'wp_enqueue_scripts', 'techblog_scripts' );
function techblog_scripts() {
	//add icon with Google Material Icons
	wp_enqueue_style( 'google-mateial-style', "", null);



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.


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.

From Google Material Icons page

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

wp_enqueue_style( 'google-mateial-style', "", null);

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


Change the style