Convert a One Page HTML5 Template to a WordPress Theme | Marcelo Xavier Vieira | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Convert a One Page HTML5 Template to a WordPress Theme

teacher avatar Marcelo Xavier Vieira, WordPress Theme Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (1h 40m)
    • 1. Getting to Know the Challenge (part 1)

      5:09
    • 2. Getting to Know the Challenge (part 2)

      4:00
    • 3. Installing Xampp

      6:13
    • 4. Installing WordPress

      11:16
    • 5. Turning the HTML Template Into a Working WordPress Theme

      5:35
    • 6. Enqueuing Stylesheets the Right Way

      7:53
    • 7. Enqueuing Javascript the Right Way

      8:16
    • 8. Making the Theme more Dynamic with Widgets (part 1)

      10:11
    • 9. Making the Theme more Dynamic with Widgets (part 2)

      5:56
    • 10. Making the Theme more Dynamic with Widgets (part 3)

      5:38
    • 11. Creating WordPress Menus

      10:27
    • 12. Implementing a Basic WordPress Loop (part 1)

      7:11
    • 13. Implementing a Basic WordPress Loop (part 2)

      12:19
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

630

Students

--

Projects

About This Class

Have you thought about creating a WordPress theme from a simple HTML5 template? In his 100-minute class, web developer Marcelo Vieira will guide you on how to convert a simple HTML5 template into a highly dynamic, fully functional WordPress theme.

You will learn the basic techniques used for creating a WordPress theme. In the end, you'll be able to use the same techniques to convert your own HTML5 website into a fully functional theme.

This course is not intended to be a definitive course on WordPress theme development, but it will be your first contact with the subject.

This course has been carefully designed for professionals who already have minimal knowledge of HTML, CSS, PHP and wish to take a step forward in understanding how WordPress theme works.

We will start from a simple one-page template, which will be transformed little by little into a WordPress theme. Along the way, you'll learn how to install WordPress in the right way, as well as the right way to transfer CSS and Javascript files from a template to a WordPress theme.

We will learn to include Bootstrap and make the theme responsive, keeping the original features and the visual aspect of the HTML template within WordPress.

And the most important! We will learn to make the template content highly dynamic within WordPress, from menus to text and image areas. I mean, you'll be able to create a theme that can be easily updated by you or your clients.

We will also learn how to implement a fully dynamic post list by creating a custom WordPress loop!

You'll also have access to all the files created during lessons. All of them well organized for you to review or correct your own code. 

At the end of the course, you will have learned how to create your own one-page theme, from any one-page HTML5 template, and confidently recreate a theme of your own. 

Are you ready? So, let's get started

Meet Your Teacher

Teacher Profile Image

Marcelo Xavier Vieira

WordPress Theme Developer

Teacher

Hi! I'm Marcelo and I have been working with web development since 2008, initially focusing on Joomla. Since 2012 I have been specialising in building themes with WordPress, having built dozens of websites with it.

Recently I started sending my own custom themes to the official WordPress repository (https://wordpress.org/themes/author/inbrackets/). That's why I decided to share all of my secrets with you.

I consider WordPress the perfect platform for anyone who wants to build any kind of website and learn a bit more in depth web technologies like PHP, CSS and HTML. So, I invite you to come with me in this journey. Your professional career will never be the same again.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Getting to Know the Challenge (part 1): Hello, guys. Welcome to the first lecture on the scores. My name is Marcello. I have a degree in system analysis, but I have been working as a Web designer since 2008. And with WordPress since 2000 and 12 I must confess, Simply love to view things using it. Um, author off other courses on WordPress themes both in English and Portuguese. In the scores, I'll teach you how to create a minimum viable WordPress thing. That is, in a few lessons. You learn the basics of how to create a word pressing that really works. In fact, grating The word pressing is a task that often takes some time. I usually take a few weeks to create a more complex ing with a lot of customization, but I'm going to show you how to achieve a great result in a way that a few people can do. In fact, until now I've seen just a few people teaching what I want to teach you. In the scores, we'll grab a finished HTML five template, one that you can find on many free templates websites out there and turn it into a WordPress theme. The idea is very good because you can also use the same efforts to turn any basic HTML site into a world pressing. Let's suppose your client has a basic HTML five side built with bootstrap or not any need to say translated into WordPress. How do you do it? Well, a lot of people get confused. They don't even know where to start. I'll show you from beginning to end how to do this. At the end of this course, you get a fully functional WordPress theme from a simple HTML five template and is gonna be really cool. You'll see you learn a lot from that as all that. We'll have a tremendous practical agility. Let's start by getting to know our challenge as head over to our browser and meet the HTML five template that you serve as a basis for our course. First, let me tell you that this template has been downloaded from free CSS dot com. However, to make it more suitable for the purposes of the scores, I have made some modifications. The original thing plate is a common HTML five template. It's almost a complete one page template. If you're curious, you can go ahead and download the original template by visiting the link I made available in this lecture. Okay, among the extra materials, you also find all template files that we used to create our WordPress theme. It's extremely important that you download these files okay, because they are the basis of the scores. It's a very simple template, but I'll be using its to bring to you the core concepts. Off word breast in Development has already told you this course is not meant to be the out made WordPress theme development course. It serves only as an introduction to the subject, and its aim is to teach you how to turn in HTML 5 10 place into a functional WordPress theme. So don't be disappointed if I don't get to teach you something you wanted to learn. It's because it is simply impossible to talk about all possible scenarios, so I have to choose one that was as educational as possible. So let's go. This template is very simple, but it already comes with several great effects that have been implemented by the original developer. For example, when it's crawled down the page, you see this animation effect in the menu We also have this effect when the over over each portfolio item his other effect when we click them a light box and also some other effects that I myself have implemented like this one here. When I click on a menu item, it moves slowly to the corresponding section and finally have this very stylish, responsive menu. All of these effects already incorporated into the regional template, especially Vivien the JavaScript files, so we will not need to create them from scratch. That's the idea behind this course, but what many people don't know is how to migrate all this structure here to WordPress. In this course I would did you how to keep all this features within the WordPress scene. But what will be the great advantage of having all this within WordPress? The advantage is that you can make the side much more dynamic. For example, you'll be able to add new party follow items without needing to add that the html code or change this content here too. Without that, in the HTML, if you're doing this for your client, they will love it. Well, that's all for this lesson. I'll be waiting for you to get on board with me in the rest of the course, so join me then and let's discover this new WordPress world together. 2. Getting to Know the Challenge (part 2): hello again from Marcello. It's a pleasure having you on board. Well, you already know what we're rebuilding during the scores, so I'm sure you're really excited to begin. Okay, so let's meet our challenge in detail has opened the files up and see what we get inside them. I'm going to create a temporary project by dragging the folder with the HTML template to sublime like this. And here I got all the structure of the same plate. Like any basic HTML five template. The entry point here is this html file. This is right at the root. So we open this file up to see what we have inside it right here are also see that the rest of the content is organized into folders. There is a folder for CSS files, phones, images, JavaScript and PHP. Scripts for this project will ignore the image folder and the peach before there, too. And I explain way the images will all be included into posts which will be managed by WordPress or inside widgets. In turn, the PHP scripts we have here was designed to handle the contact form, but where breast has a complete a p a for that. So this speech be script we have here will be used less us as well have to replace it with WordPress plugging, which I consider the best way to handle contact forms. So right now, I'm gonna delete this entire folder here. Okay, let's open the index dot html file. And let's see how big is our challenge. Well, what they have here is a common HTML structure inside the head portion. They have the meta tags, title tags and the links pointing to the CSS files. The creator of the stain plate has decided to call all JavaScript files at the end of the file. This is great for side performance. Thinks it makes it load faster for our future WordPress team to work. We have to be aware of that fact because our final product must be as close as possible. To what? The cat here later, you learn how to include the jobs with files to the footer using a wordpress function. Great. But, um, why am I saying all this well because in this course, we will learn how to include CSS and JavaScript files with the WordPress team the right way . If you leave everything the way it is now. Our feet will never work right? Well, let's go back to the top of the file. Here inside the body, we noticed that the template disorganized into some sections. We have the head of section where the menu is and your wreck constructors menu tude, The about me section, this larger section with the works with a jobs in total. All the items have a very similar markup, and that's great news for us. You understand why later this higher me section contact still inside the body we have the footer, and it's basically that the whole thing sounds very complicated, but I'll show you that it's not. In the next two lectures, you put together the necessary development environment for the project less install our local server and then install WordPress. If you already know how to do this, you can skip to the next lectures. Okay, if you don't know, I'll be waiting for you. Then. Until then, by 3. Installing Xampp: Hey, what's up, guys? Welcome to this lesson. Well, I'll start by saying this is an optional lecture. Its purpose is the teach you how to install a local server on your computer. So if you already know what a local server is, you already worked with it. If you already know how to install one, we can skip this lesson with no problems. So let's get started. There are several choices for installing a local server. Basically, you need not only the server, which in our case will be Apache, but you also need some applications to manage your database and the PHP language library itself. So let's head over to Exam website, which is at www dot Apache friends dot org. And here on the home page, we see this information saying that Zampa is the most popular PHP development environment. Did it? We can easily install the Apache server with Maria DB, which is equivalent to my sequel and PHP itself. This is exactly what we need. One of the advantages of example is that it is multi platform. I mean, you can stall it on any operating system. As I'm using a Mac, I'm going to download the Mac version. But if you use Windows, for example, you see that the steps for installing are not that different. By the way. In my opinion, the configuration of the Samp environment in Windows is even easier. But let's go ahead for this lesson. I'm not going to download to default VM installer. I don't know why, but the VM virtual machine version is not working on my computer. So just download the regular installer. I'm going to click here and choose another version. Now scroll down to see all options from Mac. If he used another LS. It could also choose another version here on this page, I can choose between the PHP versions as I want to use PHP seven conduce one of this options here. In my case, I'm not going to download the file again. As I have done this previously. I'm going to access my downloads folder double click the installation, foul the book like the application Aiken and click on Open and through my password. And I just proceeded with installation process Next. Next. Next, I can check this check box here next, next and out. Installation begins now. From here, I can already lounged. Application are Open it later if I want you. Um then uncheck this option here and click on finish. Now I can go ahead and fire obs imp, enter my password again. And here I have the application main screen here. It can choose to start and stop all the servers, for example, the Apache Web server or to my sequel that obey server. I can even start all that once by clicking on this button. And here I can also configure Europe at your server or my sequel. But this will be useful if you have a problem or if you want to do some more advanced configuration, We have a fully functional development environment to check. If everything is really working, I start all of the servers here at once. Go ahead and click this button start. Oh, and let's go back to our browser and type in here. Local host for slash dashboard. If you can see this green, it means that installation is working If you're not seeing it first. Jack, if the Apache server has started, it has to be green. And with the running status, you can also check if there is an error message under the application log. If there are any hours, you see them here and it can have an idea of what is happening. Okay, To access the database manager, just go to look a host forward slash PHP my admin and you see the screen here. This is very be creating your database during Star WordPress, for example. Okay, one more information before we leave for the next lesson All the projects we create owner, local server By default you have to be created inside the Zampa 80 Dogs folder. Did you find it? You can open your file manager applications. Zam 80 docks in Windows. This directory is in C. Samp 80 dogs for a project, for example, will be creating a folder called WP. They don't know All your other projects can also be created here with different names. Of course, in other to access your project, you just type in the browser the words low co host, followed by the name of the created directory, for example, local host forward slash WP great, but you understand that better in practice in the next lessons. I hope you find this lesson useful and see you in the next lesson. Until there 4. Installing WordPress: Hello, guys. In today's lesson, I'm going to explain to you how to install WordPress, especially for those of you who still don't know how to do that. Unfortunately, information available on the Internet is very vague. For example, the vast majority of tutorials don't explain to you the best practice for installing WordPress on both your local server and your Web server. So, in this lesson, on going to make a point of explaining what, in my opinion are those best practices things that I always do to install my WordPress in the best possible way? Let's get started. The first thing we're gonna do is visit the WordPress website with the song wordpress dot org. So let's go ahead and click. Download WordPress and then click this nice blue button here and saved the fire onto my computer. Okay, this is work breasts 4.8 point two. Maybe when you're doing the sector size off installing WordPress, you see another version. This WordPress. It's always releasing updates. No problem at all. Let's go ahead and open up finder and look for the fire we just downloaded. Right click Copy this file and what you based it on my local Web server folder. In my case, this folder is on my documents folder and it's called HD Docks. Let's Jack, if Apache and my sequel server Cervone otherwise it will be impossible to install WordPress . Okay, to do that, I just open my example. Control panel manager always X head over to manage servers and start all servers at once. Now, once you unzip this fire inside the folder that I'm going to create next, the name of that for the Ruby WP. Okay, but of course, yours don't need to have. The same name is mine, which is another one. How many two pays disip fire here and unzip it right here. When it's finished, we will eventually come up with a folder called WORDPRESS. But that's not what we want. Okay, since I don't want to install WordPress inside this folder, so what I'm going to do, jump into my wordpress folder, select everything. Copy those files and move everything. Command option V in the root of this WP folder. And of course, if you're using windows, you have to cut and paste. Then I'm going to delete this WordPress folder here, Since I don't need it anymore as well, and it's now empty. So this is the default installation of WordPress, and these are the installation files once we have all the installation files ready, but I'm going to do now. Well, the first thing I'm going to do is something that WordPress who asked me straight away a database. So I need to create a database for the WordPress installation to take place. That's very important. And it's actually the great advantage of having a WordPress site rather than just the simple HTML site. You have all the structure created by an entire community, a structure on which they were pressed him keeps working to ensure that it has all the security. You need to be with your website, your thing, your blackens and you'll be using this platform that has been around for years. So let's go ahead and access our PH. B. My admin, the Styx Ping local host slash PHP. My admin and steps and going to explain can be used for both a local server and for a remote Web server, since all of the steps will not be very different at all, unless for a couple of things for example, you have another Web address to access your remote Web server. A different password. Maybe the name of your server will change. It won't be local host, that is. Maybe you receive another server name from your hosting company and, of course, your user name and password. You also be different. But for the default installation off a local server, the user is normally route and password is empty. I'll just click on database and choose the name for my database here, and the name of it would be WP on the score. Learn WP. Go ahead and click here to create it. And you noticed that that obeys the new databases now showing here on this side wear and it's ready for me to use it. And I want you open a new tab on my Web browser and I can write to follow me. Look, a host slash WP, which is the folder located on the HD Docks directory. Remember, for all the files off the WordPress installations are I hit, Enter any to open for me, the home page of my WordPress installation. This is a welcome message, and before you continue own definitional in advance the value off the fields below the name off the database for have already created the user name of that database, which in other cases route the best word, which is empty. Several name, which is local host and the table prefix. Unfortunately, this little detail off the database prefix is what many tutorials on the Internet don't teach. You know, we need to change this perfects when we install WordPress. Okay, this is very important because it's not used having a website inside it. WordPress platform, however, secure it. ISS. If you don't do your part, don't you agree with me? Our first task then will be to change the prefix off the WordPress tables. So let's do it now. Go ahead and click. Let's go. We typing here the name off our database. As you know the user name of our databases route. The best word is empty and since we are using may local server, the name off the database server is local host. If you're our own remote Web server, check this information first, which are hosting company generally when you sign up for shared hosting services, this information is sent to your email and now you're going to change the database perfect , which is very important in terms of security, as I told you. But you might be asking why it's so important. Well, because by default, WordPress comes with Perfect WP. But everyone knows that even the bad guys, even hackers know that. So if you keep the perfect as WP, you've certainly lend a hand to size invaders. So let's change it here. No, it's not WP anymore. Let's call it, for example, WP Sear s which is far better than just WP You can just, of course, whatever perfect you want. He doesn't have to be the same as mine. Okay, click, submit clicking stole Let's move for the final steps off the installation process, go ahead and typing the name off our website it will be Let me think. Um, just learn WP I think of you hearing user name. I recommend that you don't use names such as at main WP test or some other weaker options. You can choose for example, you name a stronger name one that you remember easily. Okay, for example, out just my name. But again you can use whatever name you want for the password. I recommend that you accept this password here or choose a very strong password, especially in the case that you're installing WordPress Onley remote Web server for security reasons. Of course, in my case, as I am in the local server and we just type in 1234567 to make things easier, is it because it will be just a local installation? But what is important is that when you work in a production environment inside a remote server, you're always change the admin password. Don't use 1234567 Okay, this is only to make my work easier during this course, As I've chosen a very Ric best word WordPress, you asked me to confirm the use of a weak password. Here's for my email, and I can click here to prevent search engines from index in this side because I'm just creating the site yet. So I don't want search engines like Google to index that side. And let's not now and finally have install wordpress here, and we should be good to go. And here we are, where prices just installed. If I click here, log in enter my user name and my password ever jumping to the WordPress dashboard by default. You see that if I had over two appearance themes where press comes with some native things installed, the name of them are always related to the year the theme was created. So, for example, 2016 2017. So that's what I had to explain to you in this license. I see you in the next lesson until them and happy coding. 5. Turning the HTML Template Into a Working WordPress Theme: Hello, everyone. This is the first really Hands on lesson off this course so far, we have only set up the necessary environment for the project. We've installed our local server and also wordpress to begin this lesson. You should have already downloaded the HTML template files that I made available to you. If you're watching this course on skew share, you confined download link once again in one of the notes off this lecture. That's it. So the first step is to grab the Uncle Breast folder, which contains the HTML five template files, and copy the folder right into the WordPress installation directory. After the compressing the file you end up for the father called many Fall. You copy this folder to this location here, open the folder where WordPress is installed that will you be content things and paste before they're here. Now, if the axes, the WordPress dashboard appearance themes you see this message here broken themes that following things are installed but incomplete named Minnie Folio description starship is missing. This means that the theme was recognized by WordPress, but partially we still need a stash it for the theme. And here I take this opportunity to give you the first valuable information off this course . Every WordPress theme needs at least two basic files, one called index dot PHP in a 2nd 1 called Style that CSS. Whenever one of this file is missing, you see this message here. So let's fix this. I'm going to drag the folder with my WordPress installation Should supply that. Will you be content things and open my things folder. Let's rename the index dot html file and call it index dot PHP. Don't forget to do that right. And now let's create a new file at the root of the theme and call it style that CSS. In doing so, our theme is already recognized by WordPress, but there is still no valid information for it. For example, we don't have details like the name of the theme and the author to sell this. Let's type some content in our CSS file. All information will be included. Asked CSS comments. Don't worry, because that's the way it is. Let's open the comment here and this past some information Theme name. Many folio. How, Sir Marcello era This creepshow A simple theme creative for learning purposes. Version 1.0. There are other fuels you can enter here. So chance the themes, license info, the authors, your l etcetera. But for this course, that's enough. However, if you want to submit this thing to the WordPress repository, you can see a list off all required fuse in the link I left available in this lecture. Okay, he was safe. And now we have more detailed information. One thing that we still don't have is the image that represents our theme here in adamant area, just like this other themes. This is not the same show to the think, but it's very easy to solve. Just create a file called screenshot dot PNG. It must have at most travel 100 by 900 pixels and place it in the route off the scene. I already have these file at hand. I'll just face it in the correct folder, and now our famous complete we all in, each activated. Let's click here and activate theme now when they visit the home page, you hope the famous were again, but it's not quite what we expected because everything is broken. If it means back to Beijing and look at the Council tab. We see that this is due to the fact that many CSS JavaScript and image files were not found . But why? If all the references are here and the folders with the CSS, JavaScript and images are also here in the correct place? This is what we learn how to fix in the next lecture. So see you then in the next lesson. 6. Enqueuing Stylesheets the Right Way: Hey, what's up, guys? In our last lesson, we learn how to create an activator theme Inward breast. Finally, that html five templates is no longer just the template and has now become a WordPress theme. It is now part of our WordPress, but we have this problem here. When he opened the things home page, it is totally broken. When means back to decide. We saw that the problem is that word breast doesn't recognize the links for the CSS, JavaScript and image files. If you take a closer look at the code, you see that the path to this files really don't exist. Have a look at the links below. There is no such bath To fix this up. We need to understand how WordPress expects you to load your CSS and JavaScript fouls once . If I can give you is, um it's open here. The index dot PHP fell and I'll show you so again. One tip it can give you is it's not this way. Here in WordPress is different. The same thing goes for JavaScript. Also this way, it won't work either. If you want to add JavaScript or CIA says you have to know that WordPress uses a process called in queueing. Basically, it consists off adding the CSS and JavaScript files to a Q health its name in queueing. This in Q insistent works above the files in our Feen and the files off the various Plagens you can be installing in WordPress, but another for it to work, we have to call two functions in our index. That bitch be found. Let's get out all this links here and starting somewhere because later you'll need them in place. Off those links will call a native WordPress function. So inside the PHP tax, it's called the WB had function. Let's do the same thing for the job script files and call another function named WB on the score footer. No, when we save, we'll see something different in our theme. You see this bar here? It's been placed here because of those two functions. Now comes the hardest part as great a new file at the root of our theme called functions dot PHP. This file is very handy in many situations, and that's almost like a playing, but only for the thing that is currently active inside this file. Let's just open the beach Be tag. That's great. A beach Be function here and name it. Load on the score scripts in other to load our stash. It's we call another function here. WP underscore. In cute underscore style, this function accepts a series off parameters. Let's take the link from the first I'll shit of the thing to better understand how this function works. The first parameter is the idea of this file in the queue. This name must be unique and preferably should not have special characters, spaces, etcetera. The second parameter is the path for this file. If a fire is hosted somewhere on the Internet, you can simply pass the link in single quotes. In our case, as this file is inside a thing folder, we all need to use a special WordPress function that retrieves the footpath to the things directory. This function is Get on the score template underscore Directory on the score. Your I what a loaning. Let's just call it gets staying Play Director your eye. Okay, you can catch in a dysfunction with the rest of the directory address that we can copy from here a very important detail. You must insert a trailing slash before the string. Okay, this way. That's because this function doesn't return a training slash following the directory address. If we echo it out, we'll see that it really doesn't contain training slash notice. Here we have the theme path, but without the training slash, there are other arguments that could be best here, such as possible dependencies. That defile may have the version and the media type. If you want to learn more, please visit the link that I left available in this lesson, right? No for the starship to being cute, miniature passed another function called at on this court. Action in this case, this function must be called above are below this function. It doesn't matter, really, as best you parameters to it. The 1st 1 is called Hook. It's a bit complex to explain what this hooks are now, but the important thing is that whenever you want to in queues, USS or JavaScript, the hook to be used is named WP underscore in Q On the score scripts and the second parameter is the function to be hooked. In this case, we want to hook this function here, let's say, and to see if it worked, I'm gonna take a look at the source called itself and look, now we have the first time she'd loaded. But in the right way, If I click on this link now, we can see the contents of this file. It's just what we wanted. Now we can do the same for the other files. I think I have already understood the process, so I'm going to speed up video of it. I'll just copy the basic structure for this first file and said another values, nothing else can remove this here, save. And now let's take a look at our page. Excellent. You already half part of the film working. We have all the colors, all the phones used visually. The theme is very similar to the regional template, but we still have a long journey to make. For example, we don't have that coup menu effect nor that smooth transition. When you click on a menu item, that's what we're gonna be fixed in in the next lesson. So until then, by 7. Enqueuing Javascript the Right Way: Hey, guys, welcome back. In the last lesson, you learn how to correctly in Queues Stash. It's in the WordPress theme. Now we're gonna do the same with the job script files. Let's begin in the functions that speech befell. Let's take advantage of the function we created in the last lesson. She always thank you Are jobs good files? You remember that most of them are inside this folder called Js, and quite a few things will be different from what we've seen in the last lesson. The first thing that will change is the name of the function that is used to load the JavaScript files instead of W B and Q style. We use W. P and Q script. The order of the parameters is almost the same, but we must pay attention to some small details. First, let's bring here the lines of code we removed from index dot PHP. This is just to help us understand what we're doing. It's just for reference. The main concern we should have here is the order off the in cured scripts. There's a reason the Template author has included the Jake very file above all others. The reason is that all other files that band on Jake? Very that is another financial work. J. Curry must have been already loaded, another detail that these files were all taken out from the end of the index file that is, to improve performance, the author or the HTML template. One of the jobs could files to be called on Lee. After all, the site's content had already being loaded. We can do the same in WordPress Toot. So let's get started. The first detail that I would like you to consider is that WordPress already comes with Jay Query. So most of the time, in theory, there is no reason for you to make a new request for Dick Query. But in practice, JavaScript often doesn't work. The painting only version of re query you're using It may be that the native WordPress version is older, for example, and your few minutes of newer version to work. So if it's not broken, don't fix it. With that in mind, I'm gonna choose the same J quality version used by the original developer. So this will be the first file I'm gonna load using W P and Q script firstly passed an I D and pay attention. I'm gonna type a handle, but it cannot be Jake worry. I'm gonna type in J Query to, for example, The second parameter is also the fire dress. The next argument is that off dependency in this case, the value of you be just an empty array before is the version I can said it has no our type here. The version number, which is this one here the fifth and last parameter is what interest is the most. It is called in footer and it's a bullion. I mean, it can be true or false. The default value is false. But if he said it, that's true. The fire were being killed not in the head portion of the HTML, but before the bodies closing tag, which is just what we want. Okay, now that the first structure is ready, we can know the other files a scope. It is here, and let's load the next file Now. Now, as we did for CSS have to load the local files using the function gets tanked. Plate directory. Your I don't forget the training slash, right? Just a quick stop to explain the next parameter that WordPress calls dependency. If we choose to work with the native version of J. Query, the one that already comes when you start WordPress, we would have to pass a string with the value off Jake weary. When we do this, WordPress makes warmer request to its native Jake very library in the Link available. In this lesson, we can check all possible values for scripts that already included and registered by WordPress. In our case, you live this field empty because although all the script below the band Andrzej Query, the file that we want has already be included here. Okay, we're gonna set the version has no and we said this last value to True so that the script is also loaded in footer before the body closing tag. You can repeat the process to include the other Fells, so let's speed things up a bit and soon let's save first, let's look at the updated source court. Let's go to the body of the page, and he received that all scripts were included at the bottom of the page. Now let's see if all the effects are really working. He must be working now. Great all effects working notice here to menu. It's working now, and it's amazing. One less did. Before we finish this lesson, you're likely to see some conflicts happening at this point. Thus, maybe some parts of your fame will not display correctly to Jack What's happening. Simply lounge your browser's developer tool. Usually control shift I old Windows Command Option I on the Mac and click on the console tab. In this case, as I am using, the far stocks develop tradition. It seems like it's not showing the broken links for images. But if I opened Google Chrome, let's see, I'm gonna press contra option I All items in red are elements that need correction. In our case, These are just images, which will later be incorporated into WordPress posts, but you're likely to see some JavaScript related errors. In this lecture, you find the link for a document in which I'll teach you how to solve some of the most common errors. Well, I hope you're enjoying the lessons, and I'll meet you in the next one. Let's learn how to make our things more dynamic. And you them my 8. Making the Theme more Dynamic with Widgets (part 1): Hey, guys, welcome back to one more lesson so far, we already have a great result. Our challenge is to turn a simple HTML five template into a fully functional WordPress theme. Actually, the theme is already working, but our work doesn't stop here. Let's think for a moment. Let's suppose that your beauty, this thing for that client who doesn't understand anything about HTML and from time to time he asks you how he can add an extra paragraph in the section under his name. So far, the only elsewhere you can give to him is well, you need to open the index dot PHP file and add another paragraph in line 41. Okay, then your client looks at your face amazed and says dot beach beat What then? It's so great to me. Yeah, we gotta find another way. In addition to the section off the site, there are several others that could be more easily updated. For example, the about me section hire me, you contact form and the social media icons to solve this used to our press futures called widgets and widget areas, the less one also known as sidebars. Somewhere in the WordPress documentation, The team recommends that the more widget areas you can add to your think, the better your theme will become highly dynamic and easy to maintain. In our case, we change the difficulty off dealing directly with HTML code for the convenience off making changes via dashboard. But before that, let's explain what those sidebars are. Okay for this, let's switch themes for a moment. This time, I'll be working with the 2016 theme. It's just one off the native WordPress themes. You see that on the right side. We have this area here, here in this area. We have some futures. We have a search bar in the area with recent topics. Comments. The whole area is what WORDPRESS calls a sidebar or rigid area We've in that cyber. It's small Element, which has a functionality, is called a widget. We'll be learning about these two elements sidebars and widgets in this lesson and in the next one. Despite the name of this element sidebar, it can place them anywhere not just on the left or on the right side of the theme. So the first thing we're going to do is open up the functions file for this course, you're gonna register five sybers, each corresponding to an area off the theme that we want to be dynamic. Once we've created the side wars, we can add whatever regents we want. For example, here on the home page, you can add a text widget and later on we're gonna add a contact for we'll be using that region to include this text here. But in a way that anyone can make updates in the future. Let's get back to our functions file. Let's start by adding a new action. Let's pass to this action, I hope called widgets underscore in it. And let's trigger a new function on that hook. Let's call this function many folio on the score. Sidebars. Notice that dysfunction doesn't exist yet. You'll be creating it right now. No, let's go ahead and create function. So function many folio on the score, sidebars and the Vinit. Let's begin registering our first sidebar. To do this, we want to use a function called Register on the Score Sidebar. Inside that function, let's create an array and then this array, the Bassam arguments, which I'm going to explain to you one by one, the 1st 1 is called Name. This is the title that will display in the abdomen area, for example, has had over two appearance. Regent's The title is this one here. Let's separate each item of the Ravens comma and on this new line, let's pass the second argument. Vicious called I D. They a lot of attention here. Okay, because this idea must be unique as we're going to register juice. Sybers. Each idea argument needs to be different. Also avoid the use of special characters here. Our spaces. Okay, let's consider this value as a variable. This way we don't make mistakes. The next argument is description. This argument corresponds to a short description that also appears in admin area. Let's go back to the dashboard. This one here. Okay, all the arguments we passed so far would be used in the dashboard. When we are inside the widgets page, The remaining arguments refer to the display off each widget individually. The 1st 1 in this category is called before on the score rigid. Let's just type in the argument and pass the name T value for now and the next this after on the score region. Same thing Let's better 90 value. Do you understand what, therefore and need to use some visual aids? For that? Let's go back to the 2016 theme. If we inspect each widget in the sidebar, you'll notice that it has a well defined structure. Each widget is inside the rapper element, which in this case is an HTML section. Each section has its I D, and it's just as class. We also notice here that they all have a heading element. All headings are H juice style. Well, now we gather important information for the other arguments. We're gonna be using injury for the before Widgets argument the past. The HTML elements that reserve as a rapper for each sidebar, rigid for 2016 result that the section tag was chosen in our case, less passage. If with the rigid rapper class for the after widget, we just closed the HTML tag we opened above the last George Mons will be, respectively, before title and after a title for before title, the best heading tag for each sidebar widget despairs Thu tag with a class called reject title and in after title that's close out th to Dag. All right, we have all the structure of the need to register and user First cyber. Let's go over to the dashboard and activate our FEMA game. And now, if you over over the appearance menu, we have the Regents option here, too. Let's click on it. And here on the right side, we can see the side by re creative as explained to you, it got here the rigid Steidel and description. Great, isn't it? Yes, It's so cool that we're gonna create four more side birth to do this more easily. Let's just copy this entire register sidebar function. Be very careful because we need to copy that. Semi colons. You okay? And let's face everything down here after that same column. Now just need to change some values here. Let's go ahead and change the name the I D and the description of the second sidebar. The rest of the cold may look the same, but if you wish you can change both the tags and the ideas of each element. I'm going to speed up the figure a bit and create the other areas. - Let's save now. We got the other side bars here, too. Great. Well, that's it. for this lesson. In the next lesson, you continue to talk about Sybers. We still need to place the sideburns within the thing, and that's what you'll be learning how to do so. See you later. 9. Making the Theme more Dynamic with Widgets (part 2): Hey, what's up, guys? We're back here with another lesson. In the last lesson, we started building our first cyber ever. We stopped at that point. Very. Were beauty in the structure of which over five sybers notice here in the widget manager that we already have the five region areas created. However, if we added some widgets in the sidebars, nothing will happen. Let's, for example, at the text we did in the sidebar that is gonna be placed on the things home page, Les at a title and some random text here. Save now if you look at home page, nothing has changed yet. The problem is that we need to tell WordPress where our region there is to be placed. And in our case, it has to be done inside the index dot PHP file. The easiest way to do that is to exclude all of the HTML code here and then replace it with some WordPress functions. We're gonna add falling cold is is active sidebar and side princes. Let's type the I d off her first widget area. In this case, the idea is banner. What we're doing here is test if there's any active region. Insider sidebar. If it's true, let's call a function here. Dynamic sidebar. Benner That is, if there's an active region in the widget area or sidebar named banner below the contents of that side bar. Now, when we reload the page, you'll see some results. Look, we have our text widget with the title and also with the counted that we added on that widget. Now it's very easy. Let's go back to the tax region and paste there the content they had before in the index file. We can use this tax option here because what we're going to based is HTML. Later, if the end the user wants to modify this area, he or she can switch to the visual tab and add more text now reloading the page. They had the same content we had before, but it's easier to be modified and much more dynamic. I mean, anyone can use the WordPress dashboard to make changes to this area. For example, if your client wants to add one more progress here, she could do that on Lee by editing this text widget accident. Now we can do the same for the next digit areas for example for the about me section. We've got to read it areas and we're gonna use three regions. First Area is gonna have an image region in a text widget, and the second area Onley attacks widget. We need those two areas because the markup on the template file needs them. It will be one for each day of tech inside the section. First, let's cut out this image tag here, and also these h one and paragraph and let's use thes is active sidebar and dynamic sidebar functions. You can copy this example here and just changed the values. Now let's test it out. Let's include First image waited and I upload an image, and, as you can see, it worked. Now let's just and the text widget and paste the html cold. Let's save, and once again it worked perfectly. Let's now repeat the process for the next widget area. Get out the paragraph. Copy and paste. This code snippet here changed values. Let's add the tax tweeted to the area based a regional progress, and it's where you can Well, let's just take a break for now. Maybe you could use this break to try ourselves to add The next section is hiring me section here. Do you think you could do that? A hand? It can also use a text region tribute. This area. So for now, that's all. I wait for you then in the next lesson, my 10. Making the Theme more Dynamic with Widgets (part 3): Hey guys, what's up? You're back to this last lesson about rigid areas or sidebars. Our fame is much more dynamic Now. The banner about me and Hera me sections are all highly dynamic. I left this Harmony section as an exercise for you in the previous lesson. If you couldn't create that section, police take a look at the note at the beginning of this lecture. You have a link there with the solution. OK, but we still need to do the same for the contact section. So let's get started. As I mentioned earlier in the scores, this area will be created with the help of a blacking. Originally, the HTML five template used a custom PHP script. Just sand and process the form there. But this doesn't work for WordPress websites. Let's make use of a blood in cold contact Form seven, which uses the word breast AP I itself or handling and submitting from data. I think it will be much safer for us. The visual result will not look the same as the original paint late. Nothing that cannot be fixed to using just a few CSS code. But the form we worked perfectly once the site is running on any hosting server. First, let's cut out all the content off the stiff back here. Let's call the next sidebar here and now we need to Staller plugging. He had Overture plug ins at new, and we're gonna search for contact form seven. Last thing stole it activated, and I would have one more item in the dashboard menu called Contact. When you click here, you already have a buring example for but this year that it has a link that allows us to added form and a short cold. You'll be using this cold to insert a form into our region area. Click on the Edit link and here we get these four tips. I'll be showing you on Lee the 1st 1 In the first step, we can create a form itself and in the fields we want. And the coolest thing is that we can create feuds using HTML are clicking on these buttons , which make things easier and speed up from creation. I'm not going to explain every single element, even because averaging here is quite intuitive and easy to handle. Let's suppose I want to add another tax field in which the user will have to type the name of their city. So just make room for the textbooks, for example. Here, click here in text and enter the necessary data. For example, I'm gonna make this field required. Call it city. If I want a placeholder. I enter some value here on the default value field Anchalee here on this option. And if later on I wish to stall the field, I can type in I d or a class. Okay, ready. Now, just click on insert stag and to make it look the same as the other fields, I'm gonna place it inside the label tag before saving. I'm going to change the name of my farm. Two main contact form. So let's save the form and you're ready to take it to the HelpAge to do this is very easy. Discomfort the short coat and inserted in the place that we want in our case. This form you being started in the contact widget area. Let's go ahead, head over to appearance Regent's and we're gonna add a text widget in the correspondent sidebar. Now we just space the forms short gold we just created. Let's based the original HTML text we cut save, and now let's see how our theme looks like. Well, as I told you, the farm doesn't look like exactly the original contact form, but I can't guarantee it. We worked once you stand the website to a remote Web server. If you want to customize the look of which element, you can access the plug ins documentation. The link, as ever, is available for you in this lecture. You see that with a little CSS, you can customize the entire four. If you want, you can later remove or and more fuse. The greatest advantage is that you don't need to rely only on yourself skills to do that, neither your client. So let's offer this lesson. I hope you appreciate the lessons and till now and wait for you in the next one 11. Creating WordPress Menus: Hi, guys. Welcome to one more lesson. Almost every area of the theme is looking more dynamic. We started with a simple HTML template and returning it into something totally new. Okay, in other, to continue the good job, you learn how to create menus, the word breast way. For now, when we look at the next that PHP file, we see that you have many life things that cannot be changed any other way. Other than manipulating the HTML court, let's give a use each example. Let's suppose that your client asks you how he can add an external link, For example, pointing to a side that he holds. Your answer will again be somewhat shameful. Man, you need to understand its Gmail. To do this, you say, Let's put an end to this right now. Let's learn how to create a fully customizable menu within WordPress. Great in the menu in word breast is not complicated, however, responsive menus such as the one we got here. They take extra work. Basically, the steps for creating the menu are free. First we register the menu position needed for thing. Then you create a menu in the ad mean Leslie they called the registered menu at a specific location on the thing. First half them to register and menu. We go over should Functions file and call the function register. Underscore, Nev. On the score menus the open in the ray here, and that's a key value pair. The key will be an idea Fire for the menu. You can also call this. I didn't fire menu position and the value of ubi and menu description. So menu position and menu description, for example, we can pass primary as the key and any description as a value to create a second menu. Just place a comer here and create a second key value pair. For example, let's create a second mini position called Social. Okay, that's enough for us to have our to menu positions registers. Now we can move on to the second step here in the administration. You go over to appearance menus given name to the menu, and now we can assign their menus. Women you position. In this case, let's choose the first many position we created in the Functions file called Primary. For now, let's just save this menu. At this point, it still doesn't show on the theme as we still need to implement the last step. Okay, for the third step unit, you added the index that PHP file. First, let's get out the whole structure of this menu here. We'll need it later, she reckon struck the menu because the most critical point in this responsive menus the names off the classes used sequence of HTML tags used etcetera instead of the menu we're gonna call a WordPress function named WP underscore Neff on the score menu. This is a very handy function and allows for a very deep customization off any Manu structure. It accepts a lot of arguments which are responsible for all the menu customization that's creating the right here and pass um, arguments. The most important of the arguments is called thing on the score location. You can use it to pass the I didn't fire on the menu position that we want to show here. In our case, that position is called primary. If we saved this here and now, we try to include anything in the menu created in the Algemeen, you'll likely see some visual result. For example, we're gonna add this item here to the menu. And now let's look at the scene and there you have it, our menu item. So we're getting there. Now that we have something, you can recreate your original menu items. Let's delete this item here and create three custom menu items. The important thing is that we use the same items we had before. This is essential for the base. Just lie down smoothly to the correct section when we click each menu item to understand it better, let's go back to the original menu notice here that the A traf attributes of each menu is not a link like what we're used to seeing, but rather a CSS i. D. So, for example, the CSS I decode about me points your section whose idea is also about me. This way. Every time I click only about me item, the page goes directly to the about me section. This is the basic principle of a one page template, and we have to replicate this in WordPress. Is that possible? Yep, and fortunately is very easy. Let's go back to the dashboard and here in the menu. Butor. When creating our custom menus, we have to indicate this Yes. S I d in the health field. That's what I'm going to do for the three items we got. And let's test it out. Great. As you can see here, we achieve the same effect we had before. But the advantage is that your client can now create new items using the menu Butor without having to touch any file. Great. But an important detail is still missing. This menu is also responsive. But if you look at how it is now, it seems to have some problems. I noticed that the Menu Aiken is almost hidden, and when we click on it, the items that should be centered are at the top of the page. If we compare the coast of our WordPress teen with that off the original HTML template, you'll notice that this is used to the HTML markup. There are basically two differences. First, the WordPress mean you have this div here automatically generated that your is no menu doesn't have that's really making the menu design sound a little weird. Also, we have a class in the U L element called Primary Nev. But our WordPress menu doesn't have that to fix all that we have to add two more arguments to the WP Never menu function. If you look at the documentation for this function, you notice that we can use the following elements. Container it sales credit too Wrapped UL. And what you're happy with The default is a gift bag, so we just need to pass an empty value to this argument, and this deal will be excluded. And menu class the CSS class she used for the UL Element, which forms the menu. The default is the menu strength for this argument. We just need to pass the correspondence CSS class that is missing. So let's go ahead and finish that all container, empty menu glass primary That's never And that's all that safe. And now the menu is identical to the original menu, with the same futures and same behaviors. Great. Just the end. This lesson. I have a challenge for you. Notice that down here this area, corresponding to the social media icons is also a menu. Have the U L in l. I elements and live in them the anchor tax. So it's a real menu. What do I want you to do? Well, based on everything you sell in this lecture? I wanted to transfer this HTML menu here to WordPress. Look, you already have barred of the work. Don't Things already told you how to register a second menu which I called social. Remember, your job now is to do the following. You must create a new menu using menu Butor and you already know how you do it, right? Don't forget you assign it to the right me new position. Within this menu, the items will also be custom links. And here's the secret for the menu icons to display correctly in the link text. You passed the eye element off. Which menu item? This snippet of code here The euro l doesn't matter. Okay, You can pass these hashtag links right here. Then you call the menu inside this paragraph here and I think I've helped a lot. If you cannot solve the problem. The answer to this exercise isn't one off the links available in this lecture. So it's it for now. See you next time. Happy Colding 12. Implementing a Basic WordPress Loop (part 1): Hello, students. In the following two lectures, you'll be learning how to implement a basic WordPress loop, simply one of the most interesting subjects when it comes to Finn development. In this first lesson, we're gonna bring this party for your section here into life. This region here, which for now is only made up of plain HTML code. By the way, it's not even displaying in our WordPress theme to solve this problem. My best idea is to turn each item into WordPress post. The advantage would be that it can later change a lot of things, such as the title categories featured images, publication date, etcetera. Usually posts are shown on the screen with the help of an extremely important WordPress structure called the WordPress Loop. Basically, what the loop does is check if their posts in the database and if it can find posts, is to display them on screen. According to a format defined by the fin developer, there are two types of loops. The default loop and the custom loop in this lesson will be creating a custom loop. Since the default loop is most often used for Blawg listens, it's just not the case for our one page mean we don't have a block base here. Let's start by understanding why will use a loop grade this area here For this? Let's open up our index dot PHP file And here in this section you realize that we have a repeating structure. There are eight gives that have exactly the same structure and other days inside it. A link and image followed by a new tiff. With this class, overly another death and this other tax with project name and the project category or something like this, this is a perfect framework for creating the WordPress loop. We'll simply make this look repeat eight times with the very same markup, However, with each repetition each generation WordPress. If you look for a different image, a different post title and also the category to which that post belongs, this is gonna be really cool. You see, let's start by creating the structure within the boasts, there will be eight posts organized into four different categories, which are this here. First, let's create the four categories. Let's go to posts categories and at the four categories. Let's save the idea of each category somewhere else as you need this data in the next lecture to find out what the idea of each category is? I just mows over the name of each category and take a look. And the link that appears below. See listening here. Now, let's go ahead and create eight boasts and there will be two posts for each of the four categories. I'm gonna invent a new name for each post. Okay, Since all items have the same name in the original templates, I'm going to speed up the video because you certainly know how to great balls. - Okay , but an important detail is still missing. I went. Each boasts to have a unique image that represents it. Word breast call of those images post from the nails. But if you look at the prostitution, you cannot have those film nails another for your thing to support. These thumbnails have to specify this in your functions. File WordPress supports multiple futures, but for now, let's that support on Legia Postpone knows what I'm going to teach you is just a basic implementation of this function because the possibilities are unmemorable. To do this is quite easy. They only need to call a function name. Add things, support. And inside the princes it best a string like this post hyphen, some nose. Now, when reopened the post editing area, we can see that there's a place to insert the thumbnail or featured image. Great. Well, without wasting too much time, let's quickly and the images off of each of the items in the work section. Once again, I'm going to speed up the video and I'll be right back. Cooking is ready now. We have all the necessary data for our section, and everything has been stored in our database. Now we only need to create the loop that will help us display everything. But this is for the next lecture. So until there 13. Implementing a Basic WordPress Loop (part 2): Hello, friends. This is the last lecture of the course. We are learning to create a minimal, viable theme in WordPress. For this, you're using the nature Gmail five template downloaded from a free template website, and you're turning it into a WordPress theme. So far, we have been able to migrate almost everything into WordPress. We just need to replicate this section here to continue own less learned how to create a custom Luke live in WordPress. Unfortunately, explaining the subject in detail is a rather complex desk. Sometimes you cannot find this topic explained in detail, even in a more complete course, since the possibilities are huge. So let's try to learn the basics. We're trying to solve the practical problem that we have at hand. Let's go back to our index. That's PHP file here in this section, which is the last one for us to complete the thing. Our intention is to replace these ate Eves here with just one this day if we were living a loop eight times, so we will have the same results as the original HTML template, but with last Defour's So let's get started. The first thing we're gonna do is remove all this year. Actually, I'm gonna just leave one of these dips and use it as a reference. I'm going to open the peach pit side here, and I'm going to create a variable here called Work This variable. Receive a new instance of a class called WP Query. The weepy query is a super powerful class within WordPress. Basically, it allows us to create a copy off the defaults WordPress loop so we can view with it the way we want. For example, it can create a loop with the exact number of posts we want as fellas, they accept categories. We want things that we cannot dio by using the D fourth loop. There are a myriad of combinations of arguments that we can use to search for literally every type of information WordPress stores in the database For a more complete view off those arguments are live a link to you, right? Okay. To limit what we want to fetch from the database. Let's create an array here above, and it's best to following arguments to it boasts for Bates eight, that is, we want eight posts from the database category. Underscore, underscore in notice we get, shoot underscores here. Okay, let's create an array here and inside. It's less past the ideas off all the categories we created earlier, as I wrote down all the numbers I just passed in here, each one separated by a comma and now just past disarray inside the creepy query. So far we have created a variable that we contain information like the amount of posts we want in a list of categories. But currently that variable does nothing. The first thing we have to do before starting the loop is to check if this variable hold some value. I mean some value fetched from the database. To do this, we create beneath else block within the East Command. Let's check if the variable is bringing in any posts. To do this, we use a method from the WP query class called Half Posts. Then if work half both if work has some post, let's run the loop and bring in the posts. If it doesn't, we do nothing or reconnected. Now's command here, saying something like, um, there are no post to display at the time, Okay, if we have posts and we know that our eight boasts in the WordPress database. Let's run a while. Loop in here while work half boasts, they simply show the posts. Work the post now to finish out. Let's firm at the presentation off reach post inside the loop. For this, I have to follow this 80 mile mark up here to make it easier. I'm gonna make a breaking the peach beside here. And we started right here and here inside. I can ride html code more easily. I'm going to copy this entire mark up here and I'm going to replace Onley the fuels. I want to be different within a slow pitch oration. The first field I want to be different is the post image and the this information both to place here in the eighth graf attribute. And here in the stores attributes of the image tag, however, in both cases are only need the URL off the image for this. I'm gonna use the thumb now of which post to bring on Lee the euro l off the family unassociated with the post in the current lip repetition, I remove this court here open PHP and color function named the Post Fund. Now your hell There is also a function called the Post from now, but it brings along with it. Ah, full image tag. Not just the u R l, which is what we need at the moment. Less saved is here and see what he got. Great. You already have at least a images for each field. Difficult here. We can already open the light box. Awesome. Now, only two project name, which is the post title and the category are missing for the post title we call the title. Now, if you want to show only the category name, that will be a bit more complicated. It shouldn't be, but I'm afraid that will take an extra work. I'm going to replace this name here with the code snippets that I have already set aside. And after a basin it I'm gonna explain how it works. Okay? Here you're using a PHP loop called for each. This kind of flu creates a list of items that we can eat right through bringing to us one value at time. In our case, it takes the value returned by the gas. The category function is a list with several categories. Passes the contents to the category variable. This allows us to then display only the category of the post within the current loop repetition. That small s how it works now to finish out every time you view the custom loop using that will be query. We need to do some sort of clean up. This is done after the loop has completely finished running here after the end. While isn't a function cold WP reset post data that is extremely important. Never forget that. Okay, ready that dome we want to save and I'll finally we get to look that we wanted so much from the beginning. Look at this. Fantastic, Excellent, Awesome. In fact, the only thing missing is the logo. But let's solve this in a very quick way. Let's add another support to the theme called Custom Logo. Now, when it had over two appearance customize site identity, we can upload their logo. This is among all files off the region awaits email template To display the logo in the correct place. We have to find out where in the index dot PHP file logo is being called. It's here, and we replace all this link here with a function named the custom logo. That's it. No list as it out. And there it is. We finally achieve our initial goal in just the fuel essence and live in a few hours to We took an HTML five stand plate and migrated it into WordPress. Now we have a minimal, viable WordPress theme on hand. Based on this, you already have much of the knowledge you need to do the same thing with other rates, email templates or even with your HTML CSS and JavaScript Onley website. That's amazing. Ofcourse, the purpose off this course was just to show you how to create a really functional WordPress thing in the fastest possible way. There are ways and more ways to create a WordPress theme. More complex themes require you to know how to use other tools that were press provides, and you think about creating more complete things that can even be sold later. Their sister a great way to go. So what I wanted in this quick horse was to show you just a few of these tools, the most basic ones. But if I were you, I wouldn't stop here. If you like. Wordpress, you surely be surprised by the huge range of possibilities it still has to offer. For example, guestimation one of the jewels to have the thin customizer, which allows you to create custom fields for your theme, allowing it to become even more dynamic. And if you think about rating things that have more than one page, you must know that it's also possible within WordPress, the whole process is the little different door. So that's it, folks. Thank you very, very much. For your attention. You can download all the codes used in a lectures as well as the database and the complete projects files by accessing the link that is in the notes showing up all in your screen. One more thing Before ago, as you noticed, this course is fully protect based, so it's part of your skill share experience. You may be interested in sharing with us your final results, so go ahead, click on your projects, click on this button below and share what you many distribute. Following this course anchor is used to follow along the lessons and post your own version of the theme we created so far. With your own touch and modifications, you may as well, get your own existence html five website or that's one from your clients and try to convert it into a WordPress thing. Wish. I think it's an amazing idea. I'm looking forward to see the projects. You'll be beautiful with help off the scores. So don't be shy. Don't be lazy and click here and share your final results with us. So if I go now, thank you, and I'm at your disposal to answer any questions.