Podcast Episode

457 – Creating a WordPress Theme out of HTML – Part 2

Announcements

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

Easy Floating Video allows you to play your videos hosted on YouTube or Vimeo when you scroll down on a page.

Creating a WordPress Theme out of HTML – Part 2

Last week we focused on getting the home page to look like you’d like it to, by modifying the index.php file.

Now, it’s time to make it more “WordPress-y”

Create a Page

This is where the knowledge of the loop comes in.

Create page.php and use the following to create a header for the page:


<?php
/*
Template Name: My-New-Page-Template
*/
get_header(); ?>

This file needs to be saved in wp-content/themes/nameoftheme

Reserved file names:
https://www.ostraining.com/blog/wordpress/custom-page-template-wordpress/

Here’s a sample:


<?php /* Template Name: CustomPageT1 */ ?>
 
<?php get_header(); ?>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();
 
            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );
 
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
 
            // End of the loop.
        endwhile;
        ?>
 
    </main><!-- .site-main -->
 
    <?php get_sidebar( 'content-bottom' ); ?>
 
</div><!-- .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Next step, determine what other pages need to have custom templates. This in where you can define sidebars, different backgrounds, etc.

Determine what items on the home page can be edited in WordPress

If your site has a header, then you might not want that editable.

All the creation happens in the index.php file

Add plugins

Time to add the necessary plugins. If it’s an eCommerce site, products need to be added, etc.

All plugins need to be tested to make sure they are working.

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page

Full Transcript

Business Transcription is provided by GMR Transcription.

On today's episode, we are going to continue to talk about creating a WordPress theme
from an HTML template right here on Your Website Engineer Podcast episode No. 457.

Hello, and welcome to another episode of Your Website Engineer Podcast. My name is
Dustin Hartzler, and I'm excited to be here with you today because we're continuing this
conversation about creating a custom website in a custom you taking some HTML and turning it into a WordPress theme. So, we're gonna talk about that today, but first I do have a few things that I wanna share with you when it comes to news, and a plugin to share. So, let's go ahead and dive right in.

The first news piece that I have is there is a new plugin called toolbelt and it is a Jetpack-inspired plugin with a focus on speed and privacy. And it is basically an alternative to Jetpack, the plugin by automatic, and it is a new, lightweight plugin that offers collection of functionality that is commonly used in WordPress sites, like breadcrumbs or browser native, lazy loading, or portfolio custom post type, related posts with images, responsive videos, static social sharing, and more. And so, there's a link on WP Tavern talking about what it can do and what kind of the process and the project is, and it allows you to basically get a lot of the features of Jetpack, but using this plugin called a toolbelt. So, if you're interested and you're not a Jetpack user and you wanna see something that's very similar, then I would recommend checking that plugin out. You can search for toolbelt on the WordPress repository, or you can find the link in the show notes for episode No. 457.

The other website that I wanna talk about, or the other thing that I wanna share today is a top 50 WP – a new website that ranks plugin downloads by day. There's a link to this in the show notes, but it shows like how many downloads happened on a daily basis. So example is when I'm recording this, the popups by OptinMonster was downloaded 612,000 times yesterday, and the next closest one was Yoast SEO with 150,000, so like 500,000 less than the popups by OptinMonster. So, you can just see how many downloads each of these really high-name plugins are getting. And so, if that's something that's interesting to you or you just wanna see what the top 50 WordPress plugins are, I would definitely check out that site. There's a link in the show notes for that as well.

And then lastly, in the way of news, Micro.blog Adds Tumblr Cross-Posting. And so, then Micro.blog is a way to just have smaller snippets or is made for small-time blogging, which is kinda similar to how Tumblr works, and so it basically allows you to take things from Micro.blog and post them to Tumblr. So, there's an article in the show notes for that as well.

So, those are the news items that I saw this week. The other thing that I wanna share with you is the plugin for the week, and this one is called easy floating video. You may have seen this on news sites. I see this a lot, and it is a plugin that allows you to play videos hosted on YouTube or Vimeo, and when you scroll on your webpage, the video stays in the viewfinder or in the view that you can see. And so, most of the time, that really – it jumps those videos down to the lower right-hand corner or lower left-hand corner, and they continue to play. So, that way, you can read or you can browse or you can see the rest of the page without having to keep that video right in the viewport or whatnot. So, it's one – like I said, it's called easy floating video.

It's a plugin that was just recently launched. It doesn't have very many active installs and whatnot. But they do have the banner that goes across the top of the page that says it hasn't been tested with the last three releases of WordPress, and this is mainly because it – from what it looks like, it looks like the code just doesn't say that it works with WordPress 5.0 or higher. Or you know, whatever version that it's been tested with. So, that is what I wanted to share today. Don't be alarmed by that type of notification, especially since this is a brand new plugin. They're just missing that little line of code in the plugin file that says what version it's compatible with.

Moving right along to the main segment today, we're going to continue to talk about the steps of going through and making an HTML theme, making it more like a WordPress site. So, last week we talked all about going in and taking the theme, and then we stripped out, or we kind of broke up the index to HTML file. We broke those into headers and footers and sidebars if that's the sort of thing. We made sure all of the URLs – so for the CSS and the JavaScript – we made sure those were all kind of working and linking the right way. We created a new menu to make sure that that piece worked and that gives it – that was really kind of the first WordPress feel that we gave to it so you could go into the dashboard, you could create new menu items, you could move menu items around and they would all dynamically display right there on the homepage, or any page that you'd created. We’d only created the homepage at that point.

And then, we're working on trying to get the rest of the template to kind of load and make sure that it looked exactly like the template that we purchased, or maybe the template that was designed in HTML. So, that's kind of where we left things. And now this week, we're gonna talk a little bit about making it a little bit more WordPressy if you will. We wanted to make sure that the homepage is perfectly set, and then there's more pages to a website, right? You can't just have a homepage. I mean, I guess some websites are just one-pager and they just slide all the way down when you click on the different menu items, but in theory, we wanna make sure that we are creating a robust theme if you will.

And, we wanna be able to add pages. We wanna add additional content. We want to be able to add things on the back end. We wanna be able to have your customer or your client, and be able to update text and things in WordPress. Otherwise, why would we even use WordPress if we're not gonna use the functionality of WordPress? So, the first thing that we wanna do is we want to create a page.php file, and there could be multiple pages. We're just gonna start with the first one, and you need a little bit of code at the top. You need a template name, and so you give your page a template name. This could be like full width or page with sidebar. This could be main template page. You can call it whatever you want. And it's basically going to load in the header and it's gonna load in the footer, and then we've gotta add some code in the middle.

So, we need to make it WordPressy, if you will. We've got to add that functionality. So, how WordPress works is it basically will go and grab information from the WordPress database and then display it on a page. So, if we create an about page and we do this, we created the about page inside a WordPress, and we have the page.php defined, then we can put a bunch of text inside of WordPress on that about page, and then we publish it or we save it, and we look at it on the front end, and there's gonna be nothing. There's nothing gonna be there because we haven't told WordPress where to look for the information. And so, that's what the page.php file is. And I have an example in the show notes of something that you could use, but basically you want to go inside that page.php file where you have to add the – we have to get the header, so that basically pulls in all the menus and whatnot.

And then we have to do what's called starting the loop. And the loop is maybe one of the a little bit more complex, confusing things when it comes to WordPress. It's something that you kinda have to think about. And the loop works really, really well for – think of a homepage that has 10 blog posts. It's going to go and grab the information. It's going to go grab the title of the first blog of the newest blog post and then it's gonna grab maybe the date published, and then maybe an excerpt of the post, and then maybe a hyperlink to the full post itself. And then it's gonna say “oh, there's more posts. Let me go look at that again.” And then it's gonna go get the second previously published article, and then it's gonna display all that information, and then the third one. And so, the loop is basically – it's saying “if there’s posts, go get the posts.” Essentially, it's kind of in the breakdown.

Now when it comes to the page.php file, we want – the code reads a little bit different. It says “while there are posts, get the information from this post,” and so then it goes and gets the information from this particular post. So, WordPress knows that if it's loading the, let's see, the about page, it knows exactly what that page ID is, and so with that page ID, then back in the database is stored the data for the content or the excerpt, or the title or the featured image, and all this kind of stuff is tied to that post specifically. So, what happens is when you create this page, the easiest thing to do is you create this page, so you create the loop, and again that's in the show notes to show you how to do that. But then, you could just say instead of – once you are inside the loop, then you could just say “the underscore content parenthesis parenthesis semicolon.”

And that will go and grab everything that's in the main editor – in that main area inside of WordPress where you normally put all your content – that's just gonna go and grab that and then paste it right there on the page. Now, that's perfect if that's all you need to do, but occasionally you need to use the title, so that's like “the underscore title,” and that's a function – and these are all functions that are built inside a WordPress that you just have to add to your template file to display the correct information. On a page, maybe you – you probably don't need the date published on a page. You probably don't need the author on a page. You might wanna enable comments if you want to or not. It all really depends. So, you have to start pulling in the information that has been posted inside of WordPress.

And so, it's a – I'm not gonna say it's an easy process, but it is a process to figure out “okay, what kinda stuff do I wanna enter on the back end?” Maybe on pages, I just want the content. That's it. I want the title and the content. And that's a really easy page to create. And you can wrap the title tags in H4’s or H2’s or H1’s. You can have those display, and then this is where all the code really happens because then you can create “if statements” inside of these template files. So, for example, you could say “display the title.” And then, if you wanted the title to display on every page but the home page, you could say “if homepage, then do nothing else, display the title.” And then that way, you don't have this weird title that's taking place on the homepage. And so, you can do all this type of stuff.

Also with the – I guess one of the big things is you create that first page template and then you start modifying them depending on what type of templates that you need. And so, for example, if you just create a full-width page, that could be page No. 1 that you create. But maybe you need a sidebar, and so then you would create a template with a sidebar. Or maybe you want one with an orange background. Or maybe you want one that has a specific for a contact form because it's going to pull in a map or something. You can create individual pages. And I've seen this in WordPress themes. Sometimes they have two or three-page templates; other times, they have half a dozen page templates or even a dozen page templates. It all depends on what you wanna create, and it's all about looking at what your demo looks like and what kinda content is on there, and how you wanna create those.

And so, that's kinda the first piece of the puzzle today. We're gonna start working on that. We're gonna start getting other pages to work and to function properly. The other thing that we wanna do, once we have the ability to add as many pages as we want, then we also have to go back to that index.php page, that main page that we've just kind of – we kinda make it look good based on using the HTML template, but that doesn't make it editable inside of WordPress. And so, that makes it really, really challenging because there's no way to go in and for a customer or client to actually change the event. So, for an example, I'm building this website for my wife and it's for an event, and the event is coming up in November, and we're gonna do it again next year.

And so, right now, I could launch it if I wanted to with no editable features on the back end of WordPress for that homepage. So, we couldn't go in and we couldn't change the date; we couldn't change the speakers; we couldn't change anything. And that's okay if you wanted to launch that way, but it's not a good long-term strategy. And so, the next piece of the puzzle is we have to determine what pieces can be edited in WordPress? Maybe if there is a special banner or something that's always gonna be there, that can just be hard-coded into the template itself. But most of the time, you wanna go in and you want to work on this and you'd do all of this in the index.php file.

Now, this is interesting because I haven't done this yet and I'm still working on my wife’s website, but I've never done this with the block editor. You should be able to, if your website has four or five different blocks and sections on that homepage, you could create it so that you have blocks and you can do this all in blocks. I haven't quite got there yet, but you just really need to decide what needs to be editable by the customer or the person that's using the WordPress site, and which can be just left in the template and not needed to be coded. So, those are some things to think about.

And this is probably the hardest part about the whole project. Because you’ve gotta go in and you’ve gotta – you're looking at the templates that were given to you in HTML and then you're trying to recreate those in WordPress. And then “okay, now we wanna add this stuff via the sidebar.” So, now we've gotta add widgets, and then we've gotta make sure these pieces are working. So, it's a little bit cumbersome and it does take a little bit to get up and running, but that is the next thing that I wanted to share.

And then the last thing this week that we wanna do is we wanna start installing plugins. And so, whether that be a contact form plugin or maybe that's a – so that's gravity forms or ninja forms, maybe want some SEO, maybe we want any of the plugins that are out there – we need to start installing those and customizing those, and getting those all set up and ready to go.

So, those are the things that I wanna share this week. Those are the tips and the tricks and the strategies and whatnot. And next week, we're gonna continue this talk, and then kinda the final debugging, testing or launching this, rolling out to live, and all those good things. So, that's what I wanna share with you this week.

Take care, and we’ll talk again next week.