CODING your own WordPress Themes

0_AIO_WP_Theme

Welocome to this intro to develop your own WordPress themes.

In order to get this done, we´ll need to setup a local environment so we can “play” without damaging a live installation.

Step by Step guide to create a LOCAL WordPress site with XAMPP

Download XAMPP https://www.apachefriends.org/download.html

Install on your PC (run as admin if using Windows)

Hit Next

Select what to Install.

Leave it like that or select MINIMUM: ApacheMySQLPHP and phpMyAdmin.

Select Folder to Install

Just informs you about Bitnami products

Ready to install

Installing

Installation ok

Running XAMPP for the first time

Select Language

XAMPP control Panel. Just select to START Apache and MySQL

It should run ok like the picture, if not you should choose another ports to run them  instead of 80.443 and 3306.

Creating DB for WordPress

Before installing WordPress locally (either a new installation or the migration of a WordPress to your local server), you need to create a new database. We are going to use phpMyAdmin, which is the tool that manages the MySQL databases on our local server.

We can do this by clicking the ADMIN button or by entering the URL in our browser

We´ll see this

There, to the left, the default databases

To create a NEW database, just click NEW/Nueva; enter the name you wish and utf8_general_ci in the collation/cotejamiento Tab.

And then Click Create/Crear.

Done!

You´ll see it to the LEFT

NOTE: User= root, NO password. You´ll need this later.

Installing WordPress

Download WordPress from the official site https://wordpress.org/download/

Go to C:\xampp\htdocs\

Create the WordPress Dir where you are going to host the site, in my case I will call it wptheme1

Copy the wordpress.rar downloaded from WordPress site in that Dir.

Extract it (it will create a WordPress Folder)

Ok, now let´s install WordPress, just in case you get lost in some step, remember we NEED a databse created (in previous steps), but we´ll do it again for you to refresh this knowledge.

Go to http://localhost/phpmyadmin/index.php

To create a NEW database, just click NEW/Nueva; enter the name you wish and utf8_general_ci in the collation

And then Click Create.

Done!

You´ll see it to the LEFT

Now, go to the Local Path where you have unzipped the WordPress files, in my case http://localhost/wptheme1/wordpress/

and you´ll be redirected to the WordPress initial installation

It will guide you through the WordPress usual installation, select language, then enter the database name (just go to your phpMyadmin if you don´t remember the name, in my case, it will be wptheme1)

Remember that the user is root and it has NO password, you can leave the rest as it (Database Host = localhost and Table Prefix = Wp)

If you did not make any typo, then you´ll receive thsi message

So, let´s hit RUN INSTALLATION and you´ll be prompted to enter some data

Just input the desired Site Title, Username, Password and email (a real one where you´ll receive the credentials)

After hitting Install WordPress you´ll get a success message

Now you must Log In

Now we are in; we have a “fresh” WP installation where to create our own theme

Creating our first Theme

The time has come!

Let´s move to our WordPress folder ->wpcontent-> themes

You´ll find a few default themes, in my case they are 2017, 2019 and 2020

Now, to check this we just log into our WordPress site, we go to Appearance->themes and we´ll find the same

Ok, now to créate our own theme, we must add a new folder with the name we wish to give to our theme, In my example it will be smalltheme

Well, for WordPress to detect our theme, we just need TWO files to put into the theme folder; styles.css, and index.html -> BUT named index.php instead of .html so WordPress can handle it. It is not mandatory but we should have a screenshot.png

With screenshot.png (MUST have this name, otherwise WP will not recognize it, and it should be 880px x 660px or 1200px x 900px) will show an image in Appearance->themes so we can easily find our theme.

Index.html (from now on index.php) will need a minimum of content so it can work

Styles.css will handle our theme styling and it also has some minimum requirements to work properly.

So, to populate the stylesheet open your preferred code editor and paste this code

/*
Theme Name: Small Theme
Theme URI: https://freelancerwriter.com
Author: webdevtest
Author URI: https://freelancerwriter.com
Description: The small theme for my WP site 2020
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smalltheme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

These details will automatically create the theme details section in the Appearance > Themes screen of WordPress. The theme name is the only line you must include in the comments, but it’s a good idea to fill everything out.

Note that the text domain must match the name of the folder (in this case, smalltheme) exactly. It’s best practice to follow convention.

Theme URI:-> the URL from where to download the theme, if we have not a place from where to download it, just put your site URL

Now let´s create index.php , just copy and paste this in your code editor and save it

<!DOCTYPE html>
<html>
<head>
  <title>Basic template</title>
</head>
<body>

  <div id="site-header">
    <h1>Welcome to my site</h1>
    <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>
  </div>
    
</body>
</html>

Now we should have 3 files within our new WordPress theme folder; style.css, index.php and screenshot.png

And if we check our WP we´ll find that in Appearance->themes we have our brand new one ready to use

If we hover our theme image, we can click on Theme Details and it will show us the text we put in our style.css file

Note that we can also have a Live preview or install our theme, let´s check it with a live preview

Ok, not a wonderfull-responsive site yet, but we have created and uploaded our own theme into WordPress.

Now we can have a closer look at how WordPress works.

How Templates Work

WordPress themes work using template files. By doing so, It uses fewer files for a website to run when compared with regular HTML.

Why? Let´s take a closer look at this statement.

If you have an HTML site, you would need a file for each article you publish. Each file would contain the header of the site, the sidebar, and the footer. Note that this information is the same for each file. The only difference will be the content of the article itself.

And, how can we tell WordPress to use just one header, one widget and one footer for ALL instances of our site? Well, WordPress uses PHP to fetch things from the database and then to output them as HTML.

Since PHP is processed on the server, we are saving file space. Instead of having multiple, repeated files separately, we can use just one file, detect the page we’re on, and ask PHP to replace placeholders with the actual title of the post and the content.

Here’s some piece of code to show you how this works:

  <div id="article">
    <h1 class="article-title"><?php the_title() ?></h1>
    <div class="article-content"><?php the_content() ?></div>
    <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div>
  </div>

We have nothing hard-coded in the article area. Instead of having an actual title, there is a function – the_title() –  which is responsible for outputting the title. These functions detect which post is currently requested (based on the URL) and look up the appropriate information needed in the database. So we created a file for each and every article, but we only needed one file to do this

Moreover, a file that manages a single post could look like this:

	<?php get_header() ?>
	

	<div id="article">
	  <h1 class="article-title"><?php the_title() ?></h1>
	  <div class="article-content"><?php the_content() ?></div>
	  <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div>
	</div>
	

	<?php get_sidebar() ?>
	

	<?php get_footer() ?>

We´ll reuse the header and footer as well. Reusable code is what makes server-side coding so helpful and efficient.

How Themes Work

Ok, to create our WP site well need some template files in our theme to create it. The question is: what files we need to create for which page?

By the way, this info is ruled by the WordPress template hierarchy.

Template files

So far we understand that WordPress themes are made up of template files. -> PHP files that contain:

We use template files to modify the layout and design of some parts of your site. For example, we should use the header.php template to create a header, (we´ll come back to this later, due to this one and some more template files are templates partials).

When someone visits a page on our website, WordPress “calls” a template based on the request.

We must understand that the type of content that is displayed in by the template file is determined by the Post Type associated with the template file.  

But, wait a minute; why do we have template files and template hierarchy? It is a bit hard to figure out.

Well, as we explained before, with the template files we modify our WP theme, and with the template hierarchy, we are sure that Wp will handle which template file it will load based on the type of request we perform (and it will also check if the template exists in the theme).

Finally the server will parse the PHP in the template and it will return plain HTML to the visitor.

The most critical template file is -> index.php, which is a kind of “can handle everything” template.

If a given template can not be found in the template hierarchy, it will finally go to index.php who will have “an answer” to the request. We´ve seen before that in order to have our own theme up and running, we just need: style.css, index.php, and (optional) screenshot.png but we´ll surely need to include numerous templates in our theme to display different content types.

Ok, back again to which template files could we need to get our custom WP theme, here some of them

  • index.php: the main template file. It is required in all themes.
  • style.css: the main stylesheet. It is required in all themes and contains the information header for your theme.
  • home.php: this is the front page by default. If we do not set WP to use a static front page, this template is used to show our latest posts.
  • header.php: it will usually contain our site’s document type, meta information, links to stylesheets and scripts, and more.
  • singular.php: ok, this is a nice one; it is used for posts if single.php not found, it is used for pages if page.php is not found. Finally, if singular.php is not found…guess what? yes, index.php is called.
  • single.php: it is used when a visitor requests a single post.
  • single-{post-type}.php : this one is used when someone requests a single post from a custom post type. For example, single-codingtools.php would be used for displaying single posts from a custom post type named codingtools. If a specific query template for the custom post type is not present, we´ll use index.php as usual.
  • page.php: it is used when visitors request individual pages, which are a built-in template.

Template partials 

We mentioned them before. A template partial is a piece of a template that is included as a part of another template, such as a site footer, header, or sidebar. Of course, they can be embedded in multiple templates to speed up and simplify our theme creation.

Some well-know template partials::

  • header.php -> the site’s header
  • footer.php -> the footer
  • sidebar.php -> the sidebar

Ok, the above template files are special-case in WordPress and apply to just one portion of a page, We can create any number of template partials and include them in other template files.

They are called “partials” because they can “fit” within any other template files (you can have a home page with a footer and a header, a Blog page with a header, a footer and a sidebar, and so).

Let´s keep building our custom theme

Ok, so far we have our site up and running, with a nice image and index.php and style.css within, here the screenshot after activating the theme (remember, to activate it just go to Appearance-> Themes, and activate it)

activate_theme

And here the theme running

site-running

Well, it seems we have a very basic one. Let´s fix it.

We´ll start creating an HTML frame for this theme, meaning a way to get all…ordered, set, clean. With this frame, we´ll discover that we can easily (and must) use the template partials (header.php and footer.php right now). These pieces of code will be shared by ALL our WP pages.

By the way. Remember that an HTML site uses an index.html, BUT in WordPress, we DO NOT HAVE an index.html but an index.php

Let´s recall our index.php

<!DOCTYPE html>
<html>
<head>
  <title>Basic template</title>
</head>
<body>

  <div id="site-header">
    <h1>Welcome to my site</h1>
    <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>
  </div>
    
</body>
</html>

Ok, no big deal, it seems to me plain-old HTML so far, but…how can we add/use the template files and template partials that we learned just a few moments ago?

We are going to find it out right now, furthermore, we need to understand how to “embed” PHP in our code. How can I have HTML AND PHP “living” together?

No more questions, let´s find the answers by editing our awesome theme.

Let’s create a header.php file. Within that file, we’ll paste the beginning of our HTML code, (we must “cut” our index.php):

Note: remember to add the header.php file within our theme directory

So we´ll get this header.php

<!DOCTYPE html>
<html>
<head>
  <title>Basic template</title>
 </head>
<body>
<div id="site-header">
    <h1>Welcome to my site</h1>    
    <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>
  </div>

And this is what is left from our index.php WITH this code (<?php get_header();?>) added right into the top

<?php get_header();?>

       
</body>
</html>

And if we refresh our page…what happens??

It seems that nothing happened, in fact, that´s right because we called the header (<?php get_header();?>) and the WP backend parses our code to deliver the result to our front-end without us knowing what happened (as users). WP just made its magic and delivered the result.

That´s the “magic” of using files templates to speed-up and organize our WP sites.

Ok, now we can create our footer.php file by “cutting” the end of our index.php so we get the “closing HTML tags” of body and html.

</body>
</html>

and we call the footer from index.php

<?php get_header();?>

    
<?php get_footer();?>

Ok, I understand, you don{t believe me, I get it, so let´s add something to the end of our footer to check if it is working

<div>
    <h2>Powered by freelancerwriter</h2>
</div>

</body>
</html>

Well, let´s refresh the page

Perfect! It seems we have a footer…nice

Maybe we should need a sidebar right? So let’s do it

Please take a look at w3schools aside info if you don´t know the HTML <aside> tag

We need to create…yes..you guessed, ANOTHER file named….yes!…sidebar.php with some sample code inside

<aside id="sidebar">
				
    <div class="widget">
        <h3 class="widget-title">Widget de texto</h3>
        <div class="widget-content">
            <p>Here we put some text to check if our sidebar works fine. Hey! I am a sidebar text!</p>
        </div>
    </div>

And we must call this file from our index.php as usual

<?php get_sidebar();?>

so our index.php looks like this so far

<?php get_header();?>

<?php get_sidebar();?>
  
<?php get_footer();?>

and the page like this NOTE that the sidebar is not showing yet to the left or right, we´ll take care of this now

Functions.php

Now we need to create our functions.php file which will be a kind of…core file where we´ll put almost all our PHP code.

The first thing we´ll do is to call the stylesheet that is currently unused, it is just there to make the theme works, but it is not styling it yet.

Adding Stylesheet

In order to load the styleshhet, we need to create a function first to call it within our functions.php file.

<?php

function app_load_styles() {
}
?>

Next, we must link this function to a WordPress action (add_action) and the action will be wp_enque_scripts followed by the function name we just created to link to that function

add_action('wp_enqueue_scripts' , 'app_load_styles');

ok, we have the function and the action, but we need the content. We´ll use wp_register_style() to add our stylesheet (we must name it and point where to find the stylesheet -> get_stylesheet()), then we must tell if this stylesheet relies on another stylesheet, if not, leave blank. Then we indicate the version and finally where to apply; (screen, print, all)

Now we have registered our style but is not yet loaded. To load it we need to make a new enqueue (wp_enqueue_style(‘main_style’))

We have this so far

<?php

function app_load_styles() {

    wp_register_style('theme-style', get_stylesheet_uri(), '', '1.0', 'all');
    wp_enqueue_style('theme-style');
}
add_action('wp_enqueue_scripts', 'app_load_styles');

?>

If we refresh the page nothing happens; Why? because we must add a call in our header file like this

<?php wp_head() ?>;

Where? well, we put this line here

<!DOCTYPE html>
<html>

<head>
  <title>Basic template</title>

<?php wp_head(); ?>

</head>
<body>
<div id="site-header">
    <h1>Welcome to my site</h1>    
    <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>
  </div>

By the way, we can also do it in the footer right now

With this two functions we tell WP where to load scripts or code (within header and footer)

Ok, let´s add some CSS to our style.css to check if it all works

body {
  background-color: #ff5050;
}


#sidebar {
  width: 35%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}

Save the file, refresh the page and we have now…

It works!!

Dynamic Header & Footer

Ok, when updating our header.php we could replace the HTML lang tag

<html lang="en">

with a PHP function so it takes our installed WP language version.

<html <?php language_attributes();  ?>>

Just put that line just before the <head>

Now, let´s do the same with this code

<meta charset="UTF-8">

to this, using the “bloginfo” funtion that brings the info we request, en this case “charset”

<meta charset=<?php bloginfo('charset'); ?>>

we can do the same with

  <title>Basic template</title>

to

  <title><?php wp_title(); ?></title>

but we can add some properties to this

  <title><?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?></title>

ok, what we add here;

‘ | ‘-> is just a separator, I can choose whatever I like

true-> to show it

right-> display it to the right

php bloginfo(‘name’)-> to retrieve pou WP name

now if we refresh and hover our site´s tab, it will show the WP name

Ok, now let´s modify a bit our <body> so we can keep adding dynamic functionality

<body>
<div id="main-container">

  <header>
    <h1 class='site-title'>Welcome to my site</h1>
    <h2 class='site-description'>This is just a test site no PHP function yet</h2>
    
  </header>
  
    <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>
  
</div>

So, let´s fix the site-title and site-description

<h1 class='site-title'><?php bloginfo('name'); ?></h1>
<h2 class='site-description'><?php bloginfo('description') ?></h2>

works perfect, just to check let´s find the name and desscription within WP dashboard

Now let´s do the same with the footer

we have this code

<footer id='main-footer'>

    <div class=¿footer-copyright>
        &copy; 2020 freelancerwriter

    </div>

    <div>
        <h2>Powered by freelancerwriter</h2>
    </div>

</footer>
<?php wp_footer(); ?>

</body>
</html>

showing us this

Just let´s do it the right way; get copyright Year and site name dynamically

&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>

Well, let´s fix the menu list with something useful

 <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>

Let´s use another WP function to call our real pages

<?php wp_list_pages(); ?>

We have our Pages LISTED, but maybe we don´t want it like that. So to delete that PAGES element on top we just pass a parameter as nothing, this is “”title_li=”

<?php wp_list_pages('title_li='); ?>

Working with the Sidebar and Widgets

Beforestarting, let´s check what we have in our WP Appearance Menu

Well, it seems we have no Widgets at all, let´s fix it

Now we are gonna make the sidebar to receive our custom widgets from WordPress.

Ok, as usual let´s open functions.php and let´s create a new function within

We give it a name, let´s say app_register_sidebar

function app_register_sidebar() {

}

and then we bind this function to a WP action, and this action will be widgets_init, so when WP begins

initialize the widgets, it will also register the areas we are creating to use dynamic widgets.
add_action('widgets_init', 'app_register_sidebar');

so, within this function function app_register_sidebar() we are gonna use another function; register_sidebar . This function creates dynamic areas for WordPress to insert widgets .

function app_register_sidebar() {
    register.sidebar(array{

    )};
}

Within this function we are giving it some arguments in the form of an array, and the arguments will be:

A name for this sidebar

        'name' => 'sidebar-principal'

Well, here some insights; our themes should be able to translate, so we are using some functions to allow this to be done. Why? because maybe someone has WP installed with some language and our theme is created in a different one so if would be nice to be able to install any theme without worrying about languages right? WP can handle it for us.

And to allow that some pieces of our theme to be translated, we must use two functions; __ and _E

yes

__ (underscore underscore)

_e (underscore e)

Now, our name is “sidebar-principal, Spanish right? so for WordPress to “see” our text as one that can be translated. we must add the “__” function but pass as parameters the name (first) and the Text Domain as the second (text Domain is within our stylesheet.css)

        'name' => __('sidebar-principal', 'smalltheme'),

So in order to let you know WP that this text can be translated, we add __

‘name’ => __’sidebar-principal’

Now, sometimes we need WordPress to not only know that a text can be translated (__), BUT to show (print on screen) the text, so we need (_e), this way WP not only detects it is a text to transñlate but it also prints it

        'name' => _e('sidebar-principal', 'smalltheme'),

But now, in this example, we are using it as an argument so we need (__)

Now the second parameter is the ID to identify this very sidebar (NOTE; it is an ID, no need to translate)

  'id' => 'main_sidebar',

The third parameter will de a description, we also need it to translate

        'description' => __('Este es el sidebar principal', 'smalltheme')
,

The next argument will be “before_widget”: this parameter sets the element that goes BEFORE every Widget , in this case we´ll use a <div> and we´ll set an ID too. This ID will be %1$s, this tells WP to load the right identifier for the Widget that we are uploading, The nest is a CLASS (this is the same class that we have defined within our sidebar.php function)

    <div class="widget">

and after the class we need to define another one telling WP the kind of widget we are loading, similar to the previous one (%1$s) BUT now we have %2$s

here this line of code

        'before_widget' => '<div id="%1$s" class= "widget", "%2$s">',

now, we must add another parameter to this array; AFTER widget

Of course, this tells WP what goes after the widget. So we should close the <div> tag that goes before every widget

        'after_widget' => '</div>',

easy right? now our next parameter will be “before_title”

If we look at our sidebar snippet we see that we have <h3> tag with some class, just copy that and paste it within our array

        'before_title'=> '<h3 class="widget-title">',

and our last parameter will be closing the <h3> tag

        'after_title'=>' </h3>',

Here the full code so far

<?php

function app_load_styles() {

    wp_register_style('theme-style', get_stylesheet_uri(), '', '1.0', 'all');
    wp_enqueue_style('theme-style');
}
add_action('wp_enqueue_scripts', 'app_load_styles');

function app_register_sidebar() {
    register_sidebar(array(
        'name' => __('sidebar-principal', 'smalltheme'),
        'id' => 'main_sidebar',
        'description' => __('Este es el sidebar principal', 'smalltheme'),
        'before_widget' => '<div id="%1$s" class= "widget", "%2$s">',
        'after_widget' => '</div>',
        'before_title'=> '<h3 class="widget-title">',
        'after_title'=>' </h3>',
        
    ));
    
}
add_action('widgets_init', 'app_register_sidebar');

?>

ok, let´s save our functions.php code, refresh the page and check the Appearance Menu again

it works!! we have Menu and widgets activated! And within Widgets menu our parameters are being followed.(Headline and Description)

Ok, let´s check if this works by adding some widget, maybe a Text Widget?

Let´s add the headline and some description to see if it works

Let´s refresh the oage and!!!

Nothing happens? Why??

ok, just to check if you were paying attention, remember that our sidebar.php is still “plain”, not dynamic,

<aside id="sidebar">
				
    <div class="widget">
        <h3 class="widget-title">Widget de texto</h3>
        <div class="widget-content">
            <p>Here we put some text to check if our sidebar works fine. Hey! I am a sidebar text!</p>
        </div>
    </div>
</aside>

let´s tell it to work as a WP one

<aside id="sidebar">

    <?php if(is_active_sidebar('main_sidebar')){
        dynamic_sidebar('main_sidebar');


    }
				
    ?>
</aside>

Now let´s try again adding some text widget

save, done, erfresh page…and

it works!!!! just let´s add some more widgets to try

it works fine!

Ok, just add some code to avoid a blank sidebar in case we have no main_sidebar or no widget at all

<aside id="sidebar">

    <?php if(is_active_sidebar('main_sidebar')){
        dynamic_sidebar('main_sidebar');
    } else {?>
        <div class='widget'>
            <h3 class='widget-title'><?php _e('Buscar', 'smalltheme'); ?></h3>

            <?php get_search_form();?>
        </div>
    <?php    } 			
    ?>
</aside>

let´s remove the sidebar widgets to check if the code works (it should add a search form if no widget at all)

it works perfect!

If we add some widgets, it removes the search form and just puts the ones we added

WordPress Loop

Ok, let´s add some posts to test the WP Loop

Once done let´s go to index.php

To bring content to our current page, we must use the WordPress Loop, this is just a piece of code that tells WP to bring the content to the current place.

now within our index.php, under get_header we add these lines of code

<?php if(have_posts()) : while(have_posts()): the_post();  ?>

with this first line we check IF there is some content (have_posts), if so, WHILE exists content (have_posts) it loads the posts

Now we must end the loops

<?php endwhile; endif; ?>

well, we have an almost empty index.php so far

<?php get_header();?>

<?php if(have_posts()) : while(have_posts()): the_post();  ?>

<?php endwhile; endif; ?>

<?php get_sidebar();?>
  
<?php get_footer();?>

We need to put something between the loop we just created in order to get it shown in our page. Let´s try some basic HTML to display a Post

<article class="post resume">
	<header class="post-title">
		<h2><a href="">Here goes the Post Title</a></h2>
		<small class="meta">December 28, 2020 &bull; <a      href="">Category</a></small>
	</header>
		<div class="post-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<a href="" class="readmore">Read More &rarr;</a>
		</div>
</article>	

so this is the whole index.php so far

<?php get_header();?>

<?php if(have_posts()) : while(have_posts()): the_post();  ?>

    <article class="post resume">
		<header class="post-title">
			<h2><a href="">Here goes the Post Title</a></h2>
			<small class="meta">December 28, 2020 &bull; <a href="">Category</a></small>
		</header>
		    <div class="post-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<a href="" class="readmore">Read More &rarr;</a>
		</div>
	</article>	

<?php endwhile; endif; ?>

<?php get_sidebar();?>
  
<?php get_footer();?>

If we save and run this we get

Well, it seems that the LOOP works, this is, it detects some content (the article we just put within; the_post) it repeats the contentn (the_post) but this is not good, I mean, we need to display OUR own posts (the ones that we created a moment ago, and the ones we´ll create from now on). This is; we need to add content DYNAMICALLY

Let´s do it

This HTML “framework” is not the best one, but we have something to work with (<div>, <header>, <h2>) so let´s modify just the parts we need to load dynamically, then we can style it.

The first thing we want is to load our posts; the ones we had written and the ones we´ll write from now on, so we just call a couple of WP function like this:

First let´s call the post´s titles

from this

			<h2><a href="">Here goes the Post Title</a></h2>

to this

			<h2><a href=""><?php the_title(); ?></a></h2>

we save it, refresh the page and…

Fine! it “brings” the right titles for every post, and the title points to a link <a href=””>. That link should point to the post content

So we go from this

<h2><a href=""><?php the_title(); ?></a></h2>

to this

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

Now if we refresh and click the Title it will open the post content

but the post content is still the same for all posts, let´s call them dynamically by loading the excerp

From this

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

to this

<?php the_excerpt(); ?>

Perfect! we have every post with its title nd leading to the right permalink

Then we can change the “Read More” to be a text that lead us to the permalink (note that right now it just do nothing )

from this

                <a href="" class="readmore">Read More &rarr;</a>

to this

    <a href="<?php the_permalink(); ?>" class="readmore">Read More &rarr;</a>

Now we could set the time to show not a fixed one but the right one

from this

            <small class=”meta”>December 28, 2020 &bull; <a href=””>Category</a></small>

to this

<small class="meta"><?php the_time(); ?> &bull; <a href="">Category</a></small>

ok, maybe we can show the date, not only the time calling a WP function OPTION

			<small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <a href="">Category</a></small>

We can also show the right category for each post

from this

			<small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <a href="">Category</a></small>

to this

			<small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <?php the_category(); ?></small>

I can also pass a parameter to define the separator between categories, let´s try it

			<small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <?php the_category(', '); ?></small>

It works! now we have categories comma separated

The last thing we need to do is to make the text Read More translatable

So we go from this 
Read More &rarr;

to this

<?php _e('Read More &rarr;', 'smalltheme'); ?>

Ok, let´s check out the code so far

<?php get_header();?>

<?php if(have_posts()) : while(have_posts()): the_post();  ?>

    <article class="post resume">
		<header class="post-title">
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			<small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <?php the_category(', '); ?></small>
		</header>
		    <div class="post-content">
                        <?php the_excerpt(); ?>
                        <a href="<?php the_permalink(); ?>" class="readmore"><?php _e('Read More &rarr;', 'smalltheme'); ?></a>
		    </div>
    </article>	

<?php endwhile; endif; ?>

<?php get_sidebar();?>
  
<?php get_footer();?>

Now we need to deal with a situtation; what happens if there is no post to display? If the IF detects that there is no content to loop? We could show something to tell the visitor that there is nothing yet

We must copy the code, from <artcle> to </artcle>, and paste it below the previous code with some minor tweaks

Ok, so we add and ELSE to the WHILE statement so we can handle this situation

So we go from this

<?php endwhile; endif; ?>

to this

<?php endwhile; else: ?>

<?php endif; ?>

Now we just need to paste the code between <article> and </article> and make some changes

<?php endwhile; else: ?>

        <article class="post resume">
            <header class="post-title">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <?php the_category(', '); ?></small>
            </header>
                <div class="post-content">
                    <?php the_excerpt(); ?>
                    <a href="<?php the_permalink(); ?>" class="readmore"><?php _e('Read More &rarr;', 'smalltheme'); ?></a>
                </div>
        </article>


<?php endif; ?>

Now we just remove the link to the title and instead of putting a headline we just put a text like “No posts yet” from this

 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

to this

<h2><?php _e('There is no Post yet', 'smalltheme'); ?></h2>

we don´t have categories or date so we can remove this whole line

<small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <?php the_category(', '); ?></small>

we don´t need “Read More”, so we can delete that line too

<a href="<?php the_permalink(); ?>" class="readmore"><?php _e('Read More &rarr;', 'smalltheme'); ?></a>

we just need another translatable paragraph replacing the “excerpt “telling that there is no content available for this page

from this

    <div class="post-content">
        <?php the_excerpt(); ?>
    </div>

to this that also adds a search form so the visitor can look for another content

    <div class="post-content">
        <p><?php _e('We have no content to display yet, try later', 'smalltheme'); ?></p>
        <?php get_search_form(); ?>

    </div>

Now, to check if it is working, we just make a search asking for some content that we DO NOT have, like the image

and we should get the ELSE content

awesome! it works

´By the way, you may notice some symbols within the code, like &rarr or &bull, here the explanation

https://www.toptal.com/designers/htmlarrows/

Links to an older and recent post

Let´s start adding some code to have the OLDER and RECENT posts links to navigate our Blog

    <div class="posts-nav">
	    <a href="" >&larr; Older</a>
	    <a href="" >Recents &rarr;</a>
    </div>

we´ll put this within index.php like this

<?php get_header();?>

<?php if(have_posts()) : while(have_posts()): the_post();  ?>

    <article class="post resume">
		<header class="post-title">
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			<small class="meta"><?php the_time(get_option('date_format')); ?> &bull; <?php the_category(', '); ?></small>
		</header>
		    <div class="post-content">
                <?php the_excerpt(); ?>
                <a href="<?php the_permalink(); ?>" class="readmore"><?php _e('Read More &rarr;', 'smalltheme'); ?></a>
		    </div>
    </article>	
<?php endwhile; else: ?>

    <article class="post resume">
            <header class="post-title">
                <h2><?php _e('There is no Post yet', 'smalltheme'); ?></h2>
            </header>
                <div class="post-content">
                    <p><?php _e('We have no content to display yet, try later', 'smalltheme'); ?></p>
                    <?php get_search_form(); ?>
                </div>
    </article>


<?php endif; ?>

    <div class="posts-nav">
	    <a href="" >&larr; Older</a>
	    <a href="" >Recents &rarr;</a>
    </div>


<?php get_sidebar();?>
<?php get_footer();?>

To check this we need to show a few posts so the links appear, let´s do it like the image

Now if we refresh the page we should see them linking to no-place yet

Let´s make them dynamic:

First let´s check if there is a post, if not, there should be no OLDER or RECENTS links

<?php if (get_next_posts_link() || get_previous_posts_link() ) { ?>

and then we add the code to make it dynamic

<div class="posts-nav">
        
        <?php  next_posts_link(__('&larr; Older', 'smalltheme')); ?>
        <?php  previous_posts_link(__(' Recents &rarr;', 'smalltheme')); ?>
	    
</div>

<?php } ?>

All together

<?php if (get_next_posts_link() || get_previous_posts_link() ) { ?>

<div class="posts-nav">
        
        <?php  next_posts_link(__('&larr; Older', 'smalltheme')); ?>
        <?php  previous_posts_link(__(' Recents &rarr;', 'smalltheme')); ?>
	    
</div>

<?php } ?>

and the result

if we are in the main page, we have NO Recent posts because we are loading the last ones, so it is ok it appears just the OLDER link

If we click it it should lead us to those posts (in fact, I have only one to display right now)

It is ok, it shows that older post AND the RECENTS posts , so it is workin fine!

Single.php What is this?

If we click the Read More or the Title of the post, it will show us the full post, BUT it is loading it from index.php.

If we want this info to show in a different way, we must use a template -> single.php

Note: if there is NO post, WordPress will look for the loop within index.php to show something, if THERE IS a póst or some posts, WordPress will look for single.php to display the posts

Here some basic template to show you how to do it (long code so we use another code editor to show it, no worries)

NOTE: this code already has the header, footer and sodebar dynamic (highligted)

<?php get_header(); ?>
			
			<section id="main-content">
				
				
				<article class="post">
					<header class="post-title">
						<h1>Here goes our Post Title</h1>
						<small class="meta">Marzo 22, 2014 • <a href="">Categoría</a></small>
					</header>
					<div class="post-content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
				</article>	<!-- article -->
				
				<div id="comments-area">
				
					<h3>We have some comments</h3>
					
					<ol id="comments-list">
						
						<li id="" class="comment">
							<article class="comment-body">
								<footer class="comment-meta">
									<div class="comment-author vcard">
										<img alt='' src='http://placehold.it/32x32' class='avatar' />
										<b class="fn"><a href='' rel='external nofollow' class='url'>Juan Pérez</a></b>
										<span class="says">dice:</span>
									</div><!-- .comment-author -->
								
									<div class="comment-metadata">
										<a href="">
											<time>Here the time, but still fixed, not dynamic</time>
										</a>
									</div><!-- .comment-metadata -->
								
								</footer><!-- .comment-meta -->
								
								<div class="comment-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								</div><!-- .comment-content -->
								
								<div class="reply">
									<a class="comment-reply-link" href="">Reply</a>	
								</div><!-- .reply -->
							</article><!-- .comment-body -->
						</li><!-- #comment-## -->
						
						<li id="" class="comment">
							<article class="comment-body">
								<footer class="comment-meta">
									<div class="comment-author vcard">
										<img alt='' src='http://placehold.it/32x32' class='avatar' />
										<b class="fn"><a href='' rel='external nofollow' class='url'>Juan Pérez</a></b>
										<span class="says">dice:</span>
									</div><!-- .comment-author -->
								
									<div class="comment-metadata">
										<a href="">
											<time>Here the time, but still fixed, not dynamic</time>
										</a>
									</div><!-- .comment-metadata -->
								
								</footer><!-- .comment-meta -->
								
								<div class="comment-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								</div><!-- .comment-content -->
								
								<div class="reply">
									<a class="comment-reply-link" href="">Reply</a>	
								</div><!-- .reply -->
							</article><!-- .comment-body -->
							
							
							
							<ul class="children">
								<li id="" class="comment">
									<article class="comment-body">
										<footer class="comment-meta">
											<div class="comment-author vcard">
												<img alt='' src='http://placehold.it/32x32' class='avatar' />
												<b class="fn"><a href='' rel='external nofollow' class='url'>Juan Pérez</a></b>
												<span class="says">says:</span>
											</div><!-- .comment-author -->
										
											<div class="comment-metadata">
												<a href="">
													<time>time stamp not dynamic yet</time>
												</a>
											</div><!-- .comment-metadata -->
										
										</footer><!-- .comment-meta -->
										
										<div class="comment-content">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
										</div><!-- .comment-content -->
										
										<div class="reply">
											<a class="comment-reply-link" href="">Reply</a>	
										</div><!-- .reply -->
									</article><!-- .comment-body -->
								</li><!-- #comment-## -->
							</ul><!-- /#comments-list -->
							
							
						</li><!-- #comment-## -->
					</ol><!-- /#comments-list -->
					
					
					<div id="respond" class="comment-respond">
						<h3 id="reply-title" class="comment-reply-title">Leave a reply</h3>
						
						<form action="" id="commentform" class="comment-form">
							
							<p class="comment-notes">We donot share your email address, mandatory fields marked <span class="required">*</span></p>
							
							<p class="comment-form-author">
								<label for="author">Name <span class="required">*</span></label>
								<input id="author" name="author" type="text" />
							</p>
							
							<p class="comment-form-email">
								<label for="email">Correo email <span class="required">*</span></label>
								<input id="email" name="email" type="email" />
							</p>
							
							<p class="comment-form-url">
								<label for="url">Web</label>
								<input id="url" name="url" type="url" value="" size="30" />
							</p>
							
							<p class="comment-form-comment">
								<label for="comment">comment</label>
								<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
							</p>
							
							<p class="form-allowed-tags">you can use the following tgas and attributes <abbr title="HyperText Markup Language">HTML</abbr>:  <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code></p>								
							<p class="form-submit">
								<input name="submit" type="submit" id="submit" value="Publicar comentario" />
							</p>
						
						</form>
					
					</div><!-- #respond -->
				
				</div><!-- #comments-area -->
				
				
			</section><!-- /#main-content -->
			
			
<?php get_sidebar(); ?>
				

<?php get_footer(); ?>

If we save and reload the page we´ll see that it gets header, footer and sidebar dynamically but the content is still static; see the image

Ok, let´s fix it

First, we´ll create the WP loop, and bear in mind that we DO NOT need content to show in case we have no post yet because we are here (single.php), because THERE IS a post at least, or several, if not, WP would go to index.php

Notice how we removed the <header> and <p> stactic content and replaced with dynamic ones (highligted)

We´llalso remove the<header> with our function (we can copy it from index.php)

Here the code so far with the loop and header dynamically generated (highlighted)

<?php get_header(); ?>
			
			<section id="main-content">
				
				<?php if (have_posts()) : while (have_posts()) : the_post() ; ?>
				
				<article class="post">

					<header class="post-title">
						<h1><?php the_title(); ?></h1>
						<small class="meta"><?php the_time(get_option('date_format')); ?> • <?php the_category(', '); ?></small>
					
					</header>

					<div class="post-content">

					<?php the_content(); ?>

					</div>

				</article>	<!-- article -->
				
				<?php endwhile; endif; ?>

				<div id="comments-area">
				
					<h3>We have some comments</h3>
					
					<ol id="comments-list">
						
						<li id="" class="comment">
							<article class="comment-body">
								<footer class="comment-meta">
									<div class="comment-author vcard">
										<img alt='' src='http://placehold.it/32x32' class='avatar' />
										<b class="fn"><a href='' rel='external nofollow' class='url'>Juan Pérez</a></b>
										<span class="says">dice:</span>
									</div><!-- .comment-author -->
								
									<div class="comment-metadata">
										<a href="">
											<time>Here the time, but still fixed, not dynamic</time>
										</a>
									</div><!-- .comment-metadata -->
								
								</footer><!-- .comment-meta -->
								
								<div class="comment-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								</div><!-- .comment-content -->
								
								<div class="reply">
									<a class="comment-reply-link" href="">Reply</a>	
								</div><!-- .reply -->
							</article><!-- .comment-body -->
						</li><!-- #comment-## -->
						
						<li id="" class="comment">
							<article class="comment-body">
								<footer class="comment-meta">
									<div class="comment-author vcard">
										<img alt='' src='http://placehold.it/32x32' class='avatar' />
										<b class="fn"><a href='' rel='external nofollow' class='url'>Juan Pérez</a></b>
										<span class="says">dice:</span>
									</div><!-- .comment-author -->
								
									<div class="comment-metadata">
										<a href="">
											<time>Here the time, but still fixed, not dynamic</time>
										</a>
									</div><!-- .comment-metadata -->
								
								</footer><!-- .comment-meta -->
								
								<div class="comment-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								</div><!-- .comment-content -->
								
								<div class="reply">
									<a class="comment-reply-link" href="">Reply</a>	
								</div><!-- .reply -->
							</article><!-- .comment-body -->
							
							
							
							<ul class="children">
								<li id="" class="comment">
									<article class="comment-body">
										<footer class="comment-meta">
											<div class="comment-author vcard">
												<img alt='' src='http://placehold.it/32x32' class='avatar' />
												<b class="fn"><a href='' rel='external nofollow' class='url'>Juan Pérez</a></b>
												<span class="says">says:</span>
											</div><!-- .comment-author -->
										
											<div class="comment-metadata">
												<a href="">
													<time>time stamp not dynamic yet</time>
												</a>
											</div><!-- .comment-metadata -->
										
										</footer><!-- .comment-meta -->
										
										<div class="comment-content">
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
										</div><!-- .comment-content -->
										
										<div class="reply">
											<a class="comment-reply-link" href="">Reply</a>	
										</div><!-- .reply -->
									</article><!-- .comment-body -->
								</li><!-- #comment-## -->
							</ul><!-- /#comments-list -->
							
							
						</li><!-- #comment-## -->
					</ol><!-- /#comments-list -->
					
					
					<div id="respond" class="comment-respond">
						<h3 id="reply-title" class="comment-reply-title">Leave a reply</h3>
						
						<form action="" id="commentform" class="comment-form">
							
							<p class="comment-notes">We donot share your email address, mandatory fields marked <span class="required">*</span></p>
							
							<p class="comment-form-author">
								<label for="author">Name <span class="required">*</span></label>
								<input id="author" name="author" type="text" />
							</p>
							
							<p class="comment-form-email">
								<label for="email">Correo email <span class="required">*</span></label>
								<input id="email" name="email" type="email" />
							</p>
							
							<p class="comment-form-url">
								<label for="url">Web</label>
								<input id="url" name="url" type="url" value="" size="30" />
							</p>
							
							<p class="comment-form-comment">
								<label for="comment">comment</label>
								<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
							</p>
							
							<p class="form-allowed-tags">you can use the following tgas and attributes <abbr title="HyperText Markup Language">HTML</abbr>:  <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code></p>								
							<p class="form-submit">
								<input name="submit" type="submit" id="submit" value="Publicar comentario" />
							</p>
						
						</form>
					
					</div><!-- #respond -->
				
				</div><!-- #comments-area -->
				
				
			</section><!-- /#main-content -->
			
			
<?php get_sidebar(); ?>
				

<?php get_footer(); ?>

Now,let´s check this by adding some text to the post to see if it is updated

Save and refresh the page…

and let´s click the Test Post 3

Perfect! It loads the content,the Title,the date and thelatest changes.

Showing comments

Right now we have static comments, let´smake them dynamic too

Let´s start deleting ALL code within <div id=”comments-area”>; lines 27 to 155

and now we´lladda WPfunction called            <?php  comments_template (); ?> 

that will load thecomments AND the form to add a new comment

so our code will look like this (highlidted comments function)

<?php get_header(); ?>
			
			<section id="main-content">
				
				<?php if (have_posts()) : while (have_posts()) : the_post() ; ?>
				
				<article class="post">

					<header class="post-title">
						<h1><?php the_title(); ?></h1>
						<small class="meta"><?php the_time(get_option('date_format')); ?> • <?php the_category(', '); ?></small>
					
					</header>

					<div class="post-content">

					<?php the_content(); ?>

					</div>

				</article>	<!-- article -->
				
				<?php endwhile; endif; ?>

				<div id="comments-area">
				
					<?php  comments_template (); ?>	

				</div><!-- #comments-area -->
				
				
			</section><!-- /#main-content -->
			
			
<?php get_sidebar(); ?>
				

<?php get_footer(); ?>

if we save and refresh the page, it will show the form to add text (NOTE,I am LOGGED,so it will ONLY show comment-text field)

But if I log out

it will ask for all fields

WodrPress offers this template,but just in case that in the future it stops supporting comments,let´s create a template for our theme

We´ll start as usual by creating a new file -> comments.php

with this starting code inside

<h3><?php comments_number(); ?></h3>

and we can set some values here

1 – the text to show if there is no comments yet

2 – text to show when there is ONE comment

3 – text to show when there is;MORE than one comment to show

<h3><?php comments_number(
    'No comments yet',
    'There is one comment',
    'There are % comments'
); ?></h3>

we open again PHP tags and start adding some functions

<?phpwp_list_comments();paginate_comments_links();comment_form();?>

so, the full code is like this

<h3><?php comments_number(
    'No comments yet',
    'There is one comment',
    'There are % comments'
); ?></h3>

<?php
wp_list_comments();
paginate_comments_links();
comment_form();
?>

Now, WordPress will look for a comments.php to load, if none found, it will load the WP default comments template (as we did it a few lines before). But now we have our own template so WP will use this one

Let´s check how it works by adding 3 comments

It works fine showing all 3 comments.Now let´s pick a post WITHOUT comments yet to check what happens

Perfect! it shows the message we putin our code

<h3><?php comments_number(
    'No comments yet',
    'There is one comment',
    'There are % comments'
); ?></h3>

<?php wp_list_comments();
paginate_comments_links();
comment_form();
?>

Perfect! Just let´s make these text translatables (adding __) just in case

<h3><?php comments_number(
    __('No comments yet', 'smalltheme'),
    __('There is one comment', 'smalltheme'),
    __('There are % comments', 'smalltheme')
); ?></h3>

<?php wp_list_comments();
paginate_comments_links();
comment_form();
?>


Important Note: we can set WordPress to show us any error when developing, so let´s activate this function

let´s find wp-config.php ,open it and change this value

define( ‘WP_DEBUG’, false );

to this

define( ‘WP_DEBUG’, true );


Creating Page Templates

So far, we can show a post template, but we still have no page template, that´s why WP takes index.php as a default page info

Let´s start by creating a page.php file with some sample code to work with within our theme folder as usual

<?php get_header(); ?>

            <section id='main-content'>

            <?php if (have_posts()) : while (have_posts()) : the_post() ; ?>
				
				<article class="post">
					<header class="post-title">
						<h1><?php the_title(); ?></h1>
					</header>
					<div class="post-content">

					<?php the_content(); ?>

					</div>

				</article>	<!-- article -->
				
				<?php endwhile; endif; ?>
                                				
			</section><!-- /#main-content -->
			
			
	<?php get_sidebar(); ?>
				
<?php get_footer(); ?>

it looks very similar to single.php, BUT we have no comments here,just in case we want comments let´s add these lines

<?php get_header(); ?>

            <section id='main-content'>

            <?php if (have_posts()) : while (have_posts()) : the_post() ; ?>
				
				<article class="post">
					<header class="post-title">
						<h1><?php the_title(); ?></h1>
					</header>
					<div class="post-content">

					<?php the_content(); ?>

					</div>

				</article>	<!-- article -->
				
                <?php endwhile; endif; ?>
                
            <div id="comments-area">
				
                <?php  comments_template (); ?>	

            </div>
                                				
			</section><!-- /#main-content -->
			
			
	<?php get_sidebar(); ?>
				
<?php get_footer(); ?>

Ok,let´s edit the Main page and add some text,

save and refresh to check if the changes are shown

It works perfect; header,footer, sidebar and content are dynamic

Building another page template with NO sidebar (Fullwidth)

WordPress allows us to create several templates to display our pages (fullwidth, left-sidebar, right-sidebar and so). This way EVERY page can have a DIFFERENT template to display. These templates will be different from page.php

Let’s add a new page-template and discover how to select it from our page editor.

Yes, you guessed it, we must create a new php file, let´s call it page-template-fullwidht.php

In this case, it will be very similar to page.php, BUT without sidebar (we want fullwidth) and WITHOUT the comments section.

Here our very simplefullwidth page template

<?php get_header(); ?>

            <section id='main-content'>

            <?php if (have_posts()) : while (have_posts()) : the_post() ; ?>
				
				<article class="post">
					<header class="post-title">
						<h1><?php the_title(); ?></h1>
					</header>
					<div class="post-content">

					<?php the_content(); ?>

					</div>

				</article>	<!-- article -->
				
                <?php endwhile; endif; ?>
                
			
<?php get_footer(); ?>

Now if we go to any page to edit, we do not have the way to select another template why?

Because we need WP to identify it as a template, so we must add a line to our code

At the very beginning of our page-template-fullwidth.php file, we add a comment with the name we want to give to this template

<?php 
/*
template name: Fullwidth
*/
?>

and now we can select which page template use

If we save and refresh the page, we´ll get a fullwidth one with no side bar and no comments

Ok, we are done!

I hope you to have enjoyed this lecture, of course, it is a simple intro to WordPress dev, but it all starts by creating, practicing, and doing. DO NOT stop here, just start creating new templates, pages, plugins, or anything EVERY single day. This is no read-and-forget,you MUST keep practicing every day

Resources

Underscores -> creates WP files for you to edit MUST TRY

.

Leave a Reply

Your email address will not be published. Required fields are marked *