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

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 *