Advanced WordPress Theme Development with Bootstrap 4 | Marcelo Xavier Vieira | Skillshare

Playback Speed

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

Advanced WordPress Theme Development with Bootstrap 4

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

64 Lessons (8h 41m)
    • 1. Introduction

    • 2. Installing XAMPP

    • 3. Troubleshooting Xampp on localhost (MacOSX and Linux users)

    • 4. Installing WordPress (Best Practices)

    • 5. Template Hierarchy and Template Anatomy

    • 6. Creating and activating our first WordPress theme

    • 7. Activating our first WordPress theme

    • 8. The three building blocks of a WordPress theme (part 1)

    • 9. The three building blocks of a WordPress theme (part 2)

    • 10. Enqueuing stylesheets the right way

    • 11. Ιncluding Bootstrap 4 (part 1)

    • 12. Including Bootstrap 4 (part 2)

    • 13. Creating Menus (part 1)

    • 14. Creating Menus (part 2)

    • 15. The WordPress Loop

    • 16. What are and how to use Template Pages (part 1)

    • 17. What are and how to use Template Pages (part 2)

    • 18. Adding Theme support (part 1)

    • 19. Adding theme support to Post Thumbnails

    • 20. Getting template parts

    • 21. Adding theme support to Post Formats

    • 22. Creating and adding sidebars (part 1)

    • 23. Creating and adding sidebars (part 2)

    • 24. Creating our Services Area Widget Area

    • 25. The powerful WP_Query class (part 1)

    • 26. The powerful WP_Query class (part 2)

    • 27. The powerful WP_Query class (part 3)

    • 28. The powerful WP_Query class (part 4)

    • 29. Including Permalinks

    • 30. The single.php template file

    • 31. Allowing Comments

    • 32. Search templates and forms (part 1)

    • 33. Search templates and forms (part 2)

    • 34. Search templates and forms (part 3)

    • 35. Handling pagination (part 1)

    • 36. Handling pagination (part 2)

    • 37. Creating archive, category, author and tags page (part 1)

    • 38. Creating archive, category, author and tags page (part 2)

    • 39. Including a 404 error page

    • 40. Basic SEO Techniques

    • 41. Creating a Slider with MotoPress Slider (part 1)

    • 42. Creating a Slider with MotoPress Slider (part 2)

    • 43. Creating Contact Forms with Contact Form 7

    • 44. Including a Map without Plugins

    • 45. Setting up a Social Networks plugin

    • 46. Including a Responsive Menu

    • 47. The Theme Customizer WordPress API in detail (part 1)

    • 48. The Theme Customizer WordPress API in detail (part 2)

    • 49. The Theme Customizer WordPress API in detail (part 3)

    • 50. The Theme Customizer WordPress API in detail (part 4)

    • 51. Theme Internationalization (part 1)

    • 52. Theme Internationalization (part 2)

    • 53. Theme Internationalization (part 3)

    • 54. Packing the Theme with the TGM Plugin Activation (part 1)

    • 55. Packing the Theme with the TGM Plugin Activation (part 2)

    • 56. Packing the Theme with the TGM Plugin Activation (part 3)

    • 57. Getting Our Theme Ready for Gutenberg (part 1)

    • 58. Getting Our Theme Ready for Gutenberg (part 2)

    • 59. Getting Our Theme Ready for Gutenberg (part 3)

    • 60. Getting Our Theme Ready for Gutenberg (part 4)

    • 61. Getting Our Theme Ready for Gutenberg (part 5)

    • 62. Getting Our Theme Ready for Gutenberg (part 6)

    • 63. Getting Our Theme Ready for Gutenberg (part 7)

    • 64. Migrating a WordPress Website from a Local to a Remote Web Server

  • --
  • 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.





About This Class

WordPress Theme Development is not meant to be rocket science

So, you want to learn how to create a WordPress theme, but you don’t know where and how to start. After a lot of research, you couldn’t find any decent material that can teach you exactly what you want.

Yes, I know how all that can be frustrating. I’ve been there before. That’s why I decided to share with you all I’ve been learning for seven years. Everything you want is within the 63 lectures of this complete, straight to the point class.

Imagine, earning your living as an official theme creator. Or as a freelance WordPress theme developer, working at home, being your own boss. In a month, or even sooner, that could all become a reality:

"Three weeks ago, I knew very little about WordPress. Today I am laying the finishing touches on a WordPress site for a client that they are very pleased with. This is all thanks to this course. Marcelo is an awesome, responsive teacher who was always quick to answer my questions. I can't say enough good things :)” (Walton Jones)

This is not a class with lots of projects. Yet, unlike other similar classes, there’s no lack of explanations. I'll cover all fundamental aspects of WordPress theme creation. At the end, you'll become a skilled and talented WordPress theme developer.

You’ll learn, from start to finish, how a WordPress theme works. So, say goodbye to third-party or ready-made themes. From here on, you'll become independent and ready to create any theme, or even tweak others' themes.

You won’t find such an organised and complete material anywhere else. And it’s all here for you, at your disposal. Here are some of the things you don't need anymore:

  • You don’t need to read “bloated” documentation to understand how to build themes

  • You don't need to waste time scrolling through lengthy tutorials on the web

  • You don't need to get bored searching for meaningless content on YouTube

Everything is at your fingertips in this class.

What exactly am I going to learn?

We’ll start with the very basics. You’ll learn how to install WordPress the right way, something that not everyone knows how to do (trust me!). And, step by step, we’ll delve into more complex and exciting topics, that would take you months to learn on your own.

You’ll learn things like:

  • How the basic theme structure works - from scratch

  • How to integrate the theme with Bootstrap - any version

  • The essential inner files and pages

  • The functions and the native tools that make the whole theme mechanism come to life

And more... You’ll also learn how to deal with some specialised tools and APIs, such as:

  • The Theme Customizer, an incredible tool to empower your clients and theme users. They will thank you, as you’ll give them the power to become the "real owners" of their own websites!

  • The new Gutenberg editor

  • The powerful TGM Plugin Activation. If your intention is to redistribute your work, it will help you bundle all your plugins with the theme

And, to wrap up, you’ll also learn how to localize your theme, making it ready to "speak the language” of your clients.

You’ll have access to all the files we’ll be creating along the class, so that you don’t feel lost in any way (see Projects & Resources tab). They will be your guide and help you solve the problems you’ll come across while writing code.

How is this class different?

What my students like the most is the excellent response time to their questions. You know, long waiting times can slow down your progress. So, I always try to reply within 24 hours. You can be sure you’ll never feel alone in this class.

I’m not sure if other classes have students who say things like:

“I'm almost done with my own theme, ran in to an issue, and Marcelo has responded back with very detailed, quick help. I don't know how he does it! (…) Marcelo has laid this course out well, when you come up to a snag do everything you can to research and fix it on your own, but if you can't he's there for you. That's huge for me and may be for you, too.” (Ryan Johnson)


"Marcelo has been amazing at explaining everything and has been extremely responsive when I ask questions while doing the course. I am not 100% done with the course yet but due to his diligence and quick and thorough responses I could not wait to give him a 5 star rating.” (Adnan Usman)


“Marcelo is very knowledgeable and makes the course enjoyable. He answered my questions in the forum fully and within a few hours time. Frankly, I would buy any WP course from Marcelo!” (Christopher Moldrickx)

And the list goes on…

Who’ll benefit?

Web designers, web developers, programmers and IT students will find this class a good match.

Remember, this class IS NOT for non-techies. If you already work with HTML, CSS and PHP (even with little PHP experience), you’ll feel confident in this course. All lessons are straightforward, with thorough explanations and at a comfortable pace. So, as I try not to rush on things, you’ll be able to follow the content without much problems.

People wanting to create themes for themselves or for their own clients will benefit a lot. As well as the ones wanting to sell their creations. WordPress themes are a gold mine for the ones who master the art of developing them. And this is what you’ll get in this class.

WARNING: if you don’t know how to write a single line of code, please, avoid this class. This is not a regular WordPress class and, YES, you’ll be writing a lot of code as the class moves along.

Does this class work?

Again, I’ll let my dear students answer this question:

"Love the course! I had no clue at all how to convert my HTML/CSS website to Wordpress even though I had some beginner experience in PHP. Now my website is completely converted in Wordpress and it's amazingly simple.” (Melvin Idema)

"Excellent class! The pacing of the lessons is ideal for people who have never created a Wordpress theme before, and it's very satisfying to see the example theme developing as each lesson adds a new feature. Highly recommended.” (Fen Glyph)

Remember, this is a Skillshare class, so you’ve nothing to lose in case you don’t like it. So join me right now. I can promise you this will be a journey that will change your professional career for good.

Are you ready? So, let's get started!

Meet Your Teacher

Teacher Profile Image

Marcelo Xavier Vieira

WordPress Theme Developer


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 ( 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!
  • Yes
  • Somewhat
  • Not really
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.


1. Introduction: Welcome, guys. This is our introduction lesson. My name is Marcello and that will be your instructor here on this course. Well, just to begin to scores at me, Charlie will leader about myself. I have a degree in system analysis and I worked with that development since 2000 and eight . I started my career creating websites, but using only HTML and CSS. Later, I learned how to use Djamila, which is another very good content management system. But since 2000 and 12 have been creating themes using WordPress as you know, where press is a very powerful chore. And when you master this tool, it can Butte just about any type of website. I always say that the limitation is almost always your creativity. There are several ways to beautify website using WordPress. There are people who prefer to buy a premium thing. Others use Page Bueller's in this course. We want to use this jaws. We will satisfy your curiosity and beautiful WordPress theme from scratch from the ground up. Another For this to be possible, we'll follow all the recommendations off the WordPress team itself. I'll teach you how to create custom things, and you'll be able to understand all step by step, I want you to finish this course with a very broad view off. How thing works. By the way, you notice that I'm always mentioning she words website and theme. Over time, you come to realize that although they seem the very same thing, a thing is something a bit more comprehensive. A fame is replicable and can even become a great source of income for anyone who knows how tribute it. But this course will serve both those who would like to create a simple website but with a totally customized look created in a very detailed way as zealous those who want to learn how to create things for redistribution. In this course, we will learn the basics of beauty, a word pressing later. You can decide whether you want to focus on creating custom sites or you want to go a little further by creating things that can be sold in marketplaces like thing for worst. For example, whatever decision is, the important thing is that you have a solid foundation and this is what this course wants to offer you. Now who is the scores? Aim that well It's basically for people who already have a minimal idea of how to create a website. That issue have to necessarily know at least a little weight. She amero CSS and a bit of PHP s. Well, this course is essentially focused on teaching how wordpress works. So even if I wanted to, I would not have time to teach you some notions off html CSS and PHP here, that is you must have at least a leader experience with web development. Right? Since this course is not about HTML and CSS, I must make a couple of things clear from the beginning. The fact is that many of the CSS and HTML changes will make with dinner. Thing will not be explained in detail. Off course. I will show you where these modifications have been applied. Explain why they have been applied. But I won't explain html and CSS in detail, right. For example, I will not show you how I make to change the color of an HTML Jif Tech. The real focus will be on showing the famous structure the WordPress functions used to build them the WordPress way off doing things. But all of the changes I make will be available to you in the files who have for download. You find the length to access all of the files that will be creating during the course. Then you'll be your guide to during the course. Okay, well, the basis off the course will be the layout I'm showing you right now. It's a very simple layout. It's absolutely not the most beautiful layout in the world, but it will help us understand the basics of a WordPress theme. But then you may ask me, But why didn't the teachers have too great a one page thing there so much trendy and cool? Why is it down this way and not that way? Simple? Because I believe this kind of layout here makes it possible to use most WordPress jewels, I believe, is the most completely outside for what I want to teach you. We learned how to put these elements on the page and how and where to use plug ins in this course to we will delve into more complex concepts like the thing customizer, and you learn how tribute custom fields for your clients. You learn about theme internationalization and also plug in packaging. I mean, you learn how to include all the plug ins used on your thing and make them available when a user activation theme and at the end of the course, we also learn about the new WordPress editor Gutenberg. We should be officially launched by WordPress with version five point. Oh, but I'm bringing it to you right now inside this class. So as you see, hum, bring into you topics you cannot find in all classes on WordPress. Inspiration Also, you find everything you need to follow the skills share class. Just head over to the your project, Ted, just below the videos and you find here a couple of things first. Here is your project description. It's just a task that you need to do in order to test the skills that you'll be learning during the class. It will be really, really great if you send us your task right and just below we have a couple of other additional resources. You can download all code and material for all the video essence, and they will help you find errors, typos and so on. You can download the food project you'll be building during the course if you wish. We also have a document with the frequently asked questions, and I believe the Stockman can help you a lot, too, especially if you face problems such as Thesis one. I can see this year says changes I make or this one here, too. And finally, there's also this document that can help you if you use Mac OS and find problems. Why working with Samp on local host? Also pay attention to the notes that you show up as the lessons and float. Every time I mentioned there's a link or any additional resource about any topic discussed in lesson, they will be available as a new note. Okay. All right. That's it. I hope you like the class. So see you in the next lesson. 2. 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 to 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. Firstly, why do you need a local server? A lot of people ask me this question. Well, the common practice in the web development world is that you have separate environments for production and development. Production environment will be where the work would be public, which in the case of web development, will be a hosting servers for example. Whatever the scenario is, I think it's always better to develop our solutions locally and only after it's ready. Sent everything out to a production server where your application will be available to everyone. There are some reasons for this, such as saving hosting bandwidth, avoiding unnecessary use of server memory resources, et cetera. If you don't have to worry about it, it's OK. Another reason is that it's better to fail in a development environment than in a production environment. Imagine if you install a plug-in or make an update that breaks your website. If you do this on a production server, it's done. You have to make up lost ground and as soon as possible. But if this happens on a local server, you have time to analyze any kind of error that may have occurred. So that's what we're going to do in this course. Less initially installed our local server, then WordPress on top of it. And at the end of the course, I'll teach you how to send the whole project to a remote web server of your choice. 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. Some more advanced users install all this future separately. But there's no need for that. As we can install a package that can manage the Apache server, MySQL database, and PHP. In this lesson, you'll be using one of these packages called XAMPP. Some people also pronounce it example. Just a quick note. I've noticed that currently some of my students are using other tools like local by flywheel or Docker. If you want to work with them, Go ahead. I will not be using them here, especially since you never know when these jaws will no longer be available. If you want to use them, do it at your own risk. Okay. Because I won't be able to provide support for them unfortunately. So let's head over to the XAMPP website, which is at www dot apache friends dot ORG. And here on the homepage we see this information saying that XAMPP is the most popular PHP development environment. Fit it, you can easily install the Apache server with Maria DB, which is equivalent to MySQL. Php itself. This is exactly what we did. One of the advantages of XAMPP is that it is multiplied for, I mean, you can style 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 XAMPP environment in Windows is even easier. But let's go ahead. Before we move on. There's only important information for Mac users. There are two types of installers for Mac. When will a VM Virtual Machine and other version without the VM? Now I recommend that you go ahead install the second one. I mean, the one without the virtual machine. So in order to download it, I'm going to click here on this link. Now scroll down to see our options from egg. If you use another OS, you could also choose another version here on this page. Now I can choose between the PHP versions. As I'm going to use PHP seven, I can choose one of these options here. Actually were pressed needs at least PHP seven to work correctly. So down download introversion wishes ordered and seven, okay? And 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 file, double-click the application icon, and click on open. Enter my password. And I will just proceed with the installation process. Next. Next. Next, I can uncheck this check box here. Next. Next, how the installation begins. Now from here, I can already launch the application or open it later. If I want you. I'm going to uncheck this option here and click on finish. Now can go ahead and fire up XAMPP. Enter my password again. And here I have the application main screen. Here I can choose to start and stop all the servers. For example, the Apache web server or the MySQL database server. I can even start all at once by clicking on this button. And here I can also configure the Apache server or my SQL. But this will be useful if you have a problem or if you want to do some more advanced configuration. By the way, in the next lesson, you'll learn how to make one of these settings. The next video lesson will be of great help for those of you who have difficulties installing WordPress on Mac or Linux, especially due to permission issues. For now, we have a fully functional development environment to check if everything is really working. I start all the servers here at once. Go ahead and click this button, start o. And let's go back to our browser and typing here, local host, hose ledge, dashboard. If you can't see the screen, it means that the installation is working. If you're not seeing it, first check 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 errors, you see them here. And you can have an idea of what is happening. Okay, to access the database manager, just go to localhost, forward slash PHP, my admin. And you see the screen here. This is very be creating your database to install WordPress, for example. Okay, one more information before we leave for the next lesson. All the projects recreate on our local server. By default, you have to be created inside the XAMPP HCI docs folder. To find it, you can open your file manager applications. Xampp, HCI dogs in Windows, this directory is in C. Then HE dogs for our project, for example, will be creating a folder called WP. Later on, all your other projects can also be created here with different names, of course. In other two-axis your project, you just type in the browser the word localhost, followed by the name of the create a directory, for example, localhost, forward slash WP. Great, but you understand that better in practice. In the next lesson. I hope you found this lesson useful and see you in the next lesson and show them. 3. Troubleshooting Xampp on localhost (MacOSX and Linux users): Hello gays. In the previous lecture, I told you that sometimes it's necessary to configure the Apache server if you find any problem in the way it's working. Or maybe when it's not working properly. If you are a MacOS ten or a Linux user, you certainly have promised installing WordPress duty permission issues. For example, on MacOS, you'll see this screen here. When he tried to install WordPress for the first time, it says, sorry, but I cannot write WP config that PHP file. It's a good sign to us because that means WordPress will probably not be able to write anything inside exams, HE docs folder. In the future, we may have problems downloading and installing plugins or themes. The same happens only in x machines because you won't even be able to create a folder inside the OPT lamp AT docs directory where XAMPP is installed by default. On MacOS ten, the HCI docs folder, which is inside the applications, doesn't have read and write permissions as well. So Mac users can live with that if they want. But I hate the idea. I'll have integrate the WP config file manually every time I installed WordPress. If you also run into this problem, I'll teach you how to solve it. Now, for this, I'll be using my Mac OS ten, but you'll be able to do the same on Linux, even using the very same Commands. I'll be showing you here because both Mac and Linux or Unix based operating systems again, alright, to solve this problem, the first thing we're gonna do is we're gonna change the location of the 80 docs folder. Okay? So I suggest moving THE docs folder over to the Documents directory. So let's go to that directory. And I'm gonna create a new folder over here called H docs to. It is going to have the same name, right? I'm gonna open my exams control panel. Select the Apache server, configure. Open come file. Click yes. So we're gonna make a change to the location where XAMPP looks for the application files. So instead of looking for those files in the Applications folder, it will start looking for them in the documents folder, right? The first thing I'm gonna do is look for the correct place for editing. So I want to find a line that starts with the word document root. Okay, these are the two lines and need to add it out. Let's change this path here and writing the new path for the API docs folder. In my case, the new path is users. Marcello Vieira documents. At docs. In our case, the only thing that will change is your Mac username. Again, on Linux, it may be something like home. Your user documents, 80 dogs. But if you don't know what your username is, just open up your terminal and use the command, Who am I? And you find out, okay, I'm gonna copy this and duplicate it down here. Alright? But I need to change one Murray Formation. Gonna look for a line that starts with user demon. So we need to change these two values here, user and group. The thing is that they need to reflect my own User and Group. To find out what those are. I'm going to open up my terminal. And I'm going to use the id command. And this here are the two information I need. This u here inside the parentheses of the UID and the GID fields. Next I'm going to comment out this two lines. And I'm going to repeat the fields here with the new values. First the user, and then the group. Excellent. Now I can go ahead and save the file. I'm gonna restart Apache. Otherwise the server one, apply the changes made. Okay. Now it's already working with the new settings. Most of the time, all you have to do is to restart the Apache server. But some users need to reboot the computer. I don't believe that's necessary, but you may also try to reboot your computer. Now, if you're on Mac, just move the folder with your WordPress installation or virtue its new directory are if you are only next, you need to start the installation process by creating a new folder into the New Age docs directory, right? And just to finish out, I need to give read and write permissions to the new folder. So on my Mac, I'm going to unlock this padlock. And now we'll just change the permissions here. Close the bad luck. If you're using Linux, it will variety depending on your Linux flavor, right? And now we can go back to the WordPress installation and it will work like a charm. If my solution doesn't work, you can always go back to the original settings. You will just undo all the changes we've made, right? So that's all for now. And I'll see you in the next lesson. 4. Installing WordPress (Best Practices): Hello guys. In this lesson, you're gonna learn how to install Wordpress. Unfortunately, information available on the internet is not always accurate. For example, not all tutorials explained best practices for installing WordPress on both your local server and a live server. So in this lesson, I'm going to make a point of explaining what in my opinion are those best practices. So let's get started. So the first thing we're gonna do is visit the WordPress website and wishes at Let's go ahead and click Download WordPress. Click this little button here, and save the file. Okay, this course we start with WordPress 4.8.2, but you see you will be using newer versions as we move along the lessons. Since WordPress is always releasing updates, you can of course download and use the newest ones. As I tried to keep this course always updated. I'll be including notes and new videos whenever I see there's some important update. So let's go ahead and open up our file explorer and look for the file with just downloaded, right-click, copy this file, and paste it on my local server folder. In my case, this border is here on My Documents folder and it's called 80 dogs. If you're interested, but you don't know how to change the Sam's age docs directory. Don't forget to watch the previous lecture again. By the way, let's check if both the Apache and the MySQL servers are running. Otherwise it will be impossible to install WordPress. So to do that, I'll just open my Sam's Control Panel manager OS ten. On Windows. If you're using Windows, you can click on this icon on the system tray and you open up them. Here on my Mac, I'll head over to this tab, manage servers, and start all servers at once. Now what I'm gonna do is how you uncompress this file inside a folder I'll be creating now, the name of this folder, you'll be WP, alright? But of course, you don't need to use the same name as mine. Okay? Now we need to pace the compressed file here, the zipped file, and uncompress it right here. When it's finished, we will eventually come up with a folder called WordPress, okay? But that's not what we want since I don't want to install WordPress inside this folder here. So what I'm gonna do, I'm gonna delete this zip file here because I don't need it anymore. Jumping to my WordPress folder, select everything, copy the files, and let's move everything. Paste them here at the root of this WP folder. Now I can also get rid of this WordPress folder here, since I don't need it anymore as well, and it's of course empty now. So boys and girls, this is the default installation of WordPress. And these are the installation files. Quite simple. Okay, now we have all the installation files. What do you need to do? Well, the first of the things I need after downloading installation files is a database. So let's go ahead and access our PHP. My admin, just type in localhost, forward slash PHP. My admin. Here on PHP my admin help just click on this tab databases and choose a name for my database here, the name of it will be WP, underscore learn. Wp. Just the hand, the collation used for WordPress databases, UTF-8 em before underscore, Unicode, underscore CI. Okay? In case you need to select a collation before creating the database, just choose this one, right? Go ahead and click here to create it. And you notice that the new database is now showing here on the sidebar and it's ready for me to use it. Now I'm going to open a new tab on my web browser and I can tap the following. Logo host, o slash WP. Remember that WP is the name of that folder that contains all the WordPress installation files. Just hit Enter and you see the first page of your WordPress installation. You see this welcome message. But before we move on, you need to know in advance the value for the fluids below, which are the database name. The database username, which in our case is root. Default is root ok. Its password, which is empty by default, the host name, which is local host, and the database prefix. This little detail of the database prefix is what many tutorials over there won't teach you. What do you mean herself? I mean, we need to change this prefix when we install WordPress. That's crucial in my opinion because it's no use having a site BWT with WordPress, no matter how securities, if you don't do your part. Ok, then our first task will be changed the prefix for the WordPress tables. So let's do it now. Go ahead and click. Let's go. So first name of the database. As you know, the database user is rude, the password is empty. And since we are using a local server, the name of the database server is local host. If you are on a live server, check this information with your hosting company. Because generally, when you sign up for shared hosting services, that info is our essentially our email. And now we're gonna change the database prefix, which is very important in terms of security. Has I told you earlier? But then you might be asking yourself, why is that so impersonal? Explain. By default, WordPress comes with this prefix here. Wp. But everyone knows that the default WordPress prefix is WP. Even the hackers know there. So if you keep the prefix as WP, you lend a hand to invaders. Changing the database prefix is also a good idea if you want to run multiple WordPress installations using only one database. So let's change it here. Now it's not WP anymore. Let's call it WPC are AES, for example, which is a lot better than just WP. You can choose. Of course, whatever prefix you want. It doesn't have to be the same as mine. Okay, click on submit, round Install. Now let's move for the final part of the installation process. I'll go ahead and type in the name of our website. It will be, for example, learn WP. Here under username, I recommend that you don't use names such as admin, WP, test, et cetera. You can choose your own name or any other strong username on that you can remember easily. For example, I'll choose my name. But again, you can use whatever name you want, okay? For the password, I recommend that you accept this password here or choose a very strong the passwords, especially in the case you are installing WordPress on a remote web server, a live web server for security reasons, of course, in my case, as I am in a local server, we'll just type in 1234567 to make things easier, even because it will be just a local installation. But be aware that when you work in a production environment in your life server, you're always changed the admin password. Don't use 1234567. Okay? This is only to make my work easier during the course. And as I am choosing a very weak password WordPress, you asked me to confirm the use of a weak password, my e-mail. And I can click here to prevent search engines from indexing the side. So I don't want search engines like Google, for example, to index that site right now. You can always change that later if you want. Finally, just click on install WordPress. And we should be good to go. And here we are. Wordpress is just installed. If I click here on login, enter my username and my password, I would jump into the WordPress dashboard. By default, you'll see that under Appearance, Themes, press ships with a couple of native themes. The name of them is always related to the year the theme was created. What we're going to learn in this course is to stop depending on this native WordPress themes or any other ready-made thing. You'll be learning how to create your own theme and be able to customize it throughout the course. Why do you think of it? So that's what I had to explain to you in this lesson. I'll be back in the next one and we'll begin to understand how WordPress thing works on the inside. So I see you in the next lesson. Until then guys. 5. Template Hierarchy and Template Anatomy: Hello everyone, welcome to another lesson. So in this lesson we are going to talk about the anatomy of a WordPress theme. We will understand how we're pressing is made up what files, directories, and what are the rules that you have to follow the gradient thing. Despite the fact that this video has a lot of theory, I highly recommend that you follow it until the end. Okay? It's very important. Before you start, you must already have Wordpress installed. If you're not ready yet, please take a look at the previous lesson came. For this course, I will be using Sublime Text three as my code editor, but of course you can use your favorite editor instead. To begin this lesson, I'll be showing you how WordPress installation is organized. You remember that we install WordPress in a folder called WP. So if you open that folder, we have three other folders. The root of the installation, this WP admin is Other1 WP Content. And WP includes. We also have several other files that are also part of the Wordpress environment. But forget about the now came, since we'll be talking about them later in this course. The themes themselves are within this WP Content folder. And if you open up that folder, we'll find another one called things. Inside WP Content. We also have the plugins folder, but let's stick with the themes folder for now. If you open this folder up, we'll see that WordPress erratic comes with at least three things installed. And they are always related to the year in which they are produced. The last one here would be the 2017 thing because I'm creating this course in 2017. Let's go ahead and open up this folder. Inside it, look, there is a new folder structure. Again, a folder for the CSS files. And this one here can be used for including our own functions. If you want to do that. A folder for files in JavaScript and other files here as well. And I think you may be wondering, but Marcello, There are so many files in so many folders. Manager create all of these files and all of these folders if I want to customer pressing. Well, not exactly. In fact, in theory, we only need two files for a WordPress thing to work. Index.html and style.css. Just to be clear, since the beginning, index.js PHP is the entry point of our fin. And style.css is responsible for telling WordPress What is the name of the theme, the alpha, the theme, and the description of the thing. And of course, we can use it to write CSS. But we'll see all that in detail in the next couple of lessons. Of course, if you create a theme with just these two files, it will be two minimal. And we don't want them. Let's imagine that you want the content of a contact page, which displays when you click on the Menu link corresponding to it. We went that page to be different from the content of a homepage. For example, if you're a FEM has only the index.html file. Your contact page will be identical to that homepage. Surely, that's not what we want, is it? Of course not. That's why we have these other files here. Each one of them will specialize in a part of the WordPress site. For example, the single dot PHP file will help us create the single view of a single post. On the other hand, the page dot PHP file is used to display a static page, which in this case is different from a post, which were breast understands as having, say, a more dynamic content than a static page. And there yet several other files that will get, you know, during the course. Another important file is this one called screenshot dot PNG. This file is just the cropped image of her thing and is used to represent it in the admin. So here in the admin, if you head over to Appearance and click on themes, we see that for everything there is an image. Those images come from a file called screenshot dot PNG. Okay, one more information. One interesting thing that you'll notice is that think files such as index that page B already serve as steady materials jurors, you can better understand how a theme works if you just open them up and began reading their documentation. For example, here we have the index.html file, which is part of the 2017 thing. In the fire itself, you already have a description of what it is. As you see here, it says that is the main template file. It is one of the files required for you to create a thing. The other one being the style.css, as explained previously. For each of the native WordPress theme files, you have this kind of documentation. In fact, it's a good practice if you start creating your files this way, offering all of the documentation for your fin as you created. However, we will not do that in this course, okay? It can do it by yourself if you want, since it is just about copying and pasting and modifying the information, let's go ahead and choose another file. For example, page dot PHP. Documentation here says that it is the template for displaying all pages. And the single dot PHP is the templates used to display all the single posts with what happens when you visit, for example, a post or a static WordPress page. By the way, if you don't know yet what a static page is, a good example would be the default example page of your WordPress installation. Just go ahead and open it and you'll see what I mean. So what happens when we visit one of those contents is that a mechanism that we're pressed calls the theme hierarchy comes into action. To explain how this works, I'm going to use this image here. So it explains very well in my view how this mechanism works. In addition, it also describes how the anatomy of a WordPress theme works. This is, say, an anatomical model of our pressing. So look in this anatomical model and also hierarchical, the main part will always be the index.html file. As explained earlier, it is the main theme file. It will always be used. To show the content of a patient situations where we don't need any specific template or when WordPress doesn't know which page templates to use. This file is what we call a fallback. Now, if at some point we need to display a page with a specific layout to the site visitor will no longer used index that PHP file. At that point, we need to go down a bit in the hierarchy and use another page template inside another file as given example. And that's one thing that happens all the time within WordPress. Suppose a visitor enters your site using a misspelled link. In these situations, most sites will display a page known as a four or four page to the visitor. A classic error page. If your theme has a file called for all four dot PHP, you can create a totally different look for that file. But if you think doesn't have such file, WordPress will follow the themes hierarchy and display the contents of the index.html file. Instead, I mean WordPress, you'll be using the fallback file instead of a four or four dots PHP file. We can apply the same reasoning model to the other files. For example, the single dot PHP file is the file for viewing single posts. If our film has this file, highly recommended, of course, every time you click on a postLink, you'll feel the page according to the design of the single dot PHP file, following all the HTML tags and PHP functions within that file. So considering this image as the anatomical template of a WordPress thing, you could say that these files about which I just spoke are here in the middle part of the page. They will be part of what we call the WordPress looked. And each template file has its own loop inside it. But we'll be explaining it better in other videos. Okay, in addition to the loop region, which is here in the middle of the page in this example. But it can move in any other area of the site according to your design, we have two things that repeat on all pages and are generated by two files. Up here, the content coming from the header.html file and here below, and other content from footer.html file. Optionally, you can also have a sidebar. We talk about that literature, and that's what makes the WordPress theme beautiful. You can even create a theme using only index.html and style.css with WordPress gives you all the tools to make a very dynamic thing. We can see all this in action in the layout will be creating in this course. So here from the top where we see this little red bar up to the menu, we'll have our header. The contents of this whole area is coming from the heterodox PHP file, okay? The dynamic part in which we have the template files and they're loops will extend from this slide here to this map. So we're going to include all of the dynamic contents of the website. The contents that is not a static in this big area here. And she completely design. You'll have our footer at the end, coming from a template part called footer.html. Also, for some pages will also have a sidebar. In our case, for the homepage, the sidebar we'll be placed on the left side, but not now. We'll start seeing all this in our next lesson. Okay? There'll be room for a lot of practicing. So until then, and I catch you guys on my next video. 6. Creating and activating our first WordPress theme: Hey guys. In the last lesson we talked about the two basic files for creating a WordPress thing, index.html and style.css in today's licensed. Finally, we're going to start creating something. In the next few lessons, you'll be able to create your first theme ever. You'll be able to access the Wordpress admin. See your theme there. An activated That sounds great, doesn't it? So let's get started. The first of the things we're going to do is create the folder structure of the thing. As you know, my Wordpress is installed here in this WP folder. And inside that folder we have WP Content. And then the Themes folder, which is where all of the themes must be created. So inside this folder, I'm gonna create a new one, and I will name it, learn WP. And inside this new folder, I'm gonna create the two more important thing files. First they have index.html and then style.css. Another thing I mentioned previously in this course is that we have to identify this theme within WordPress admin. So if it jump into the dashboard and head over to the appearance menu themes, you'll see all the things that we have already installing WordPress. We have the WordPress native themes here. And also our learned WP. Notice that the new theme was included here in the list based on the new folder you just created. But there's nothing that can be used to recognize this particular thing. Unlike the other things that are easily identifiable. To solve this problem, we have to create an image file and it must be called screenshot, okay? And the extension interns should be P&G. To start with, I have already created the screenshot dot PNG for you. This is the same file that I will make available for you to download with the course. And I want to point out that you can find a copy of this file in the material available for download in lecture number two. Ok. So there is no need to send me messages asking for, for that image. It's already available for download, right? But anyway, it's not so hard to create this file with any image editing software, even a free one, you can easily created. The rules are the following. First, the file must have the PNG extension. Can we use the JPG extension inside? Yes, you can. But it's not recommended by WordPress itself. If you read the documentation, you'll see that the guys only recommend a file with the PNG extension. So what can you do? The dimensions must be 1200 by 900 pixels. Despite the fact that the image will show with that dimension in the admin only in a few situations. So the recommendation is to have an image with 1200 by 900 pixels or write. Another tip I would give you for, for your next projects is that you create a file only after the fin is ready. But for this course I will use this previously created image. Alright, so let's go ahead and grab that file. Let's copy and paste it inside the themes folder. Now if everything is correct, when we refresh the Wordpress admin, we'll see our themes from their image represented by a screenshot that PNG. Great, it's working. Now when we click here to see more information about the thing, we'll see the image in a much larger size. But soon, you realize that there is no additional information about this theme. We only have the folder name here. So there is no versioning information. Now that we have the authorise thing name. So how do we make this FEM information available in the same way we have, for example, for the native WordPress themes. I mean, if we choose one of the native things, we have several additional information about it. What is the kind of magic that makes that happen? Well, it's no magic at all. This information will have to be created in our style.css file. That simple for this to work will be simply using a CSS comment schema. So those who understand a bit about CSS also know that a comment in CSS is written like this. At the beginning we have a forward slash and asterisk. And at the end of the comment block, again, an asterisk and another 40 slash. This is how we create a comment that has more than one line in a CSS file. Anything I write here within this space here will at first be ignored. But not for WordPress. Wordpress you use this area to recognize many information related to the themes, such as themes name, themes, author, its description, et cetera. The first finger going to type in here is the most basic information of all. What is our themes name? So let's type in here. Theme name. And the name of our theme will be learned. Wp. You can choose, of course, whatever name you want, okay? We can also type in here the themes webpage. This information will then appear as a link in the dashboard. So let's go ahead and type in here theme, your R, i. And what hours? The author's name. Author. We may also have a link to the author's page. Author. You are I. Now it can be the same information used for the theme URI. But if you have plans to submit your theme to any market place such as or invited, I think forest in such cases, the two URIs cannot be the same. Ok, and what else? A description for the theme description. There are a couple more items to be included here, but you get to know them later in the course. You'll be returning to this file a couple more times. Okay? All right, now I want to save this file. And now let's see what we have in the admin. All right, forget the themes name here as go ahead and click here to see more information about it. Look at the name of the theme. Again. We don't have the version yet, but in the next lesson, we'll take care of it. We got the author's name. And if I mouse over this link, you'll see the URL to the author goes in it. Alright, for now, let's take a short break in this video. And when we come back in the next lesson, I'll show you how to activate theme using stylesheet we are just creating. So until then, happy coding. 7. Activating our first WordPress theme: So hello again and welcome back. In the last lesson, we started creating our style.css file. In today's lesson, we'll go ahead and activate our first theme in the Word Press admin. I speak in. Let's go ahead and continue editing the style.css file. This time, we'll type in here the themes version. So version, our version will be 1 for now, since this is the first version of the thing, and the next item is called tags. But before we add it to the list, let's understand what therefore, as open up our browser. And let's visit the WordPress theme directory. The adresses wordpress dot ORG, WHO slash things. And here we have a collection of many free WordPress themes. If we click on More Info for any of the things available here, you'll see that they all have this screenshot. The themes version, the update information, the themes URL, and the description as well. Right below we get a list of tags. Basically, this tags act as search facilitators. Anyone looking for a theme with certain characteristics can find it easier since they are identified by these tags. For example, let's make believe you want to download a theme that has a left sidebar or features a custom logo, or is a theme for education websites, or has a plug, or has two columns. Anyway, that's what they're for. And we can do that for our theme as well. If you want to submit your theme to any marketplace, the tags are required. But even when we don't have plans to sell your theme, it's a good idea to add tags, and it's so easy to add them. So let's go back to the editor. You type in here tags, and we start adding our texts, but not so fast. There are some rules to follow here. If this is a theme you are submitting to the WordPress repository, you should follow the list of tags available on the site will be visiting. Now, by the way, I'll make this link available as an extra resource for this lesson. Okay? And you can see if we scroll down a bit, that we have a list of tags thin can use and the requirements it needs to fulfill to be allowed to use that tech. So it's not enough just to have a list of tags. For example, if your theme has attack called full width template, it must be in this format. I mean, it really must have a full-width template is not enough to just create a list of sex out of nothing. So let's go back once again to the editor and include our list of tags here according to our theme. So Chou, columns, left sidebar, custom header, custom menu, Custom Logo, plug. If we save this file and go back to the admin, you'll see that this information becomes available. As you can see, our tags are all here now. And also the version that we just test. So this is the easiest way to create a theme in WordPress. Looks at, is it didn't hurt at all. And we have our first theme created within the WordPress Academy. It's not that GU. Great. So we have our theme Ready. Now we can go ahead and activate it and preview it on the homepage themes for them. But if we visit the homepage now to be completely empty and the answer is quite simple. It's because our index.js, which of course is aimed T2. Or maybe it's because the fire is not working. Okay, we cannot be in doubt. So let's do a little testing our index.html page to see if it's really working. Let's go ahead and create a basic HTML structure within this file. So a lot of you ask me, how can I do that? I just typed this exclamation mark, hit the tab key and it's spitting this whole HTML5 code. How do I do that? Right within our Sublime Text editor, a fairly easy way to create the structure is to use an extension called image make available to you the link of a very interesting tutorial that teaches how to install m it, if you are using sublime text of force, extension image greatly streamlines the life of the web developer, making it easier to write comments. In our case, let's just type an exclamation point or exclamation mark and hit the tab key. Very, very easy. See the magic. The software outer completes and prints out the complete HTML5 structure on the screen for us, you'll be seen me using image shortcuts all the time along this course. And you can learn more about the shortcuts in the video tutorial available in the extra resources or visit the address on your screen for a complete charge catalyst. Alright, so I'm gonna change to information. I'll be adding just a title to the page and also a new paragraph. I'm gonna save that and go back to the homepage. Now you notice that the browser is already showing that page title included in the PHP file. The contents of the paragraph is also showing here. And that confirms that our file index.html is really working and our theme as well. So we already have our first WordPress theme available within the admin activated and easily identifiable. We also have a working index.html file. Alright, so we then created our first WordPress theme, but of course we will not stop here. In the next lesson, we will learn how to make the index.html file much more versatile. So I'll be waiting for you in the next lesson. Until then. 8. The three building blocks of a WordPress theme (part 1): Hello guys, welcome to on more lesson. In this lesson we'll start talking about the basic building blocks of a WordPress theme. In the next few lessons, we'll see that we need only three blocks to build a theme, a header, a dynamic content area, and a footer. This dynamic area at first will be represented by the index.html file. But as remember, this fiery is used as a default theme template. We also have different template files used for static pages, for viewing posts, etc.. But let's focus first on the index.html file. Okay? So first, let's open up our layout. You may notice that it has this region here that is going to be the same for all pages, which extends from this red bar here to the end of the menu. It also has a dynamic content region that goes from the slide to this map. And then there is a footer that is going to be displayed on all pages. This dynamic region at the beginning will becoming from the index.html file. But when we click on a post link, for example, we will make arrangements for WordPress to use a different template file. But first things first, in the last lesson we created the index.js file, but it's still quite minimal. It has only one paragraph and a title tag. Only there are, if you can remember from another lesson, I told you that our homepage is very different from a contact page and about us page, a services page. And so that's why we're going to make this layout more dynamic. In order for this to work, let's split this layout into treat parts. To begin with, let's create our basic HTML. And it will be all based on this layout very seen here. Let's head over to Sublime Text. Open up index.html. And I'm going to leave this paragraph here just as a reference for us. Okay. Well, let's start off with the body tag. Fortunately, WordPress gives us a very useful function that can be used inside the body tag. It helps us identify which page the theme is displaying at a given moment. So we can use this function to better style everything. And this function is called body underscore class. It basically returns the classes related to the page we're viewing. For example, when we visit the homepage, it prints out a home class inside the body tag. Thus, we can style a page that has the whole class in a different way. But don't worry because you understand this better as we move along the course, ok, we see this in detail. For now, let's start by creating the HTML for the site header. Inside the header, according to our layout, we have a red bar at the top. So first we create a header tag. And inside that tag, we want to create a section that will have the top hyphen bar class. Just type in Section a dot for the CSS class. Top hyphen bar and press the Tab key. Inside this top bar, we have two other areas. In the first one on the left side reserved for the social media icons. And another one on the right side that will be named search. Can you see what I'm doing here? Let me explain to you. I'm just translating that red bar from the layout into HTML content. I'm just calling it top hyphened bar in the HTML. So inside it, I created a structure for these two other areas. On the left side, an area for the social media icons, and on the right side is search area. As you can see, you're creating for now only the basic markup of the thing. And this will do for starters. Let's move on. Let's go ahead and create the menu area, still within the header area. Let's call it menu hyphen area. And within this menu, we'll have another section, let's call it logo, because we'll be placing our logo there and we want a nav tag. This class will be called main hyphen menu. And we'll be adding our first menu there. And I solve for the hair. This whole area be creating now, we repeat on every single page. Okay, so let's go ahead and create our dynamic area Now. Lets call it content hyphen area. So inside this one will have many other areas. According to the layout, we will have here. Our main area, which will stay inside the main tag. Inside this tag will have a section for the slide. And the load is slide will have a red area for the services. And after the services will have a central area, let's call it middle hyphen area. Inside this middle area, we have a sidebar in the news area. Then here in the HTML, the sidebar will be inside an aside tag. And you have the class of Sidebar. And after that we'll have a new div tag called news. And we'll have a less section for the map. Let's type in here, section, class met, and hit the tab key. Now both the main area and the dynamic area are complete. And now we can create our footer, which finally closes and the thing. So let's use the footer tag to mark this region. Okay, we have then the index that PHP file finally ready. But again, I must tell you that if we only have the index.html file created that way, our theme will be pretty simple. So let's do different. My idea is to break this index.html into three blocks. The first one will contain an area that will be always dynamic. I mean, its content will change depending on the page visited. For example, on a homepage, this area will look identical to the image you are seeing now. However, on a blog page, for example, it will not display this slide, this service area, the map and other areas. On the other hand, the other two areas from here up and from the footer down will always repeat for every single page, right? This will be R, three building blocks. So in the next lesson we're going to continue with the explanation, right? So until then, and I catch you guys in my next video. 9. The three building blocks of a WordPress theme (part 2): Hey, what's going on, guys? In this lesson, we'll go ahead and keep creating our basic building blocks for the WordPress theme. So picking up where we left off in the last lesson, I want to start by selecting the region. There will become later on the themes header. The selection will have to go from the beginning of the HTML to the end of the header tag is part of the code is going to be repeated on every page. So let's cut out the selection, save the file, and create a new one. The name of this new fire is going to be header.html. Thus the name of this file have to be header.html. Yep, it must be Herald PHP. And later in this lesson, you will understand why. Now you need to paste everything. You just copy it in there. And now we have our header that will repeat at the top for all pages of our theme. Let's go back to index.html. And now the next selection will go from the footer tag to the end of the file. Let's select in cat again, and let's create another file called footer.html. Once again, that question, does it have to be footer? Yes, it must be footer.html. What is left now we're correspond to our indexed at PHP file. The dynamic part of the theme. Well, what happens if you open the homepage right now? So let's flip tabs now and go over to our browser. By the way, from now until the end of this course, I'll be using Firefox Developer Edition as their main browser. I believe it's a good choice in cities. It's a browser really tailored for web developers. So let's give it a try. But it can still use Chrome or other browsers you want. It makes no difference for this course. As you can see, nothing came up. But if you inspect the code, we see that we have the HTML with the body, the content tags. But look, do you remember that we left a paragraph as a reference to us. Where is that paragraph? And another thing I told you that the body and the score class function will load some classes inside the body, tag him or sell. I think it didn't work. You may say, where are all of those glasses? Well, those who have a basic understanding of BHB know that we can load parts of a PHP file with include are the require command. Wordpress has a couple of functions that do the same thing. There are very specific WordPress functions that can load the header and the footer. Our index.html. We'll load the header from here up and further from here down. So we have to login here. And here. The how would we do that? Or I will be using Q Basic Wordpress functions that are get underscore header. This function loads or file that is named header.html. And now you understand why this file must be called heterodox PHP. And the other function, can you imagine what is called? Yes, it's get underscore footer. Let's see if all of this works. So let's go back to Firefox and reload the homepage. And there you have it. Now the paragraph is displaying that reference paragraphs from header.html file. And also the name of the page is showing up coming from that title tag. And if we inspect the page as the told you, that function in the body finally worked. Ok here, class, home and plug. So the homepage has at least these two classes. You can have more classes depending on what you have installed or on how you WordPress is configured. So by using the Home class, for example, we could use CSS and create a specific rule for all the H1 of what the paragraphs which belongs to the homepage. Just an example, right? So those H1 or those paragraphs would look different from those on the themes inner pages. But we can make even more complex things. So that's it. That's all for this lesson. In the next lesson, we're gonna learn how to load stylesheets within WordPress the right way. So see you then. Happy coding. 10. Enqueuing stylesheets the right way: Hello guys. In this lesson, we're going to start learning about one of the most important files of a WordPress theme, the function's dot PHP file. At the end of this lesson, we are going to be able to load any stylesheet within anything. And the most important thing, the right way. In the last lesson, we just started creating the layout, splitting our index.html into three parts. And we created the header, the footer, and made our index.html more dynamic, including the functions that call both the footer and the header. To start this lesson, let's just label all of our sections so that they can later style our theme. I start with the header, less typing here, social icons. Here, search, logo, menu. Let's save this now and open the index.html file. Here we're gonna type in slide services. Here in the middle we have the sidebar news map. Okay, now we can save it. Now in our footer, let's create a paragraph. Rebel, usually to include stylesheet, but using only HTML, the traditional way, we must simply create a CSS folder, organize our files in there, and find a link tag. Let me show you one of the ways of doing this in WordPress. So let's create a new folder within our learned WP named CSS. Inside the CSS folder, I'm gonna create a file called template dot CSS. This time you can choose a different name, okay, if you are, there are several ways to load a style ship into WordPress, but I'm going to show you the most recommended method. The recommended way is to create a file named functions dot PHP within our theme. If you look at the other themes such as the 2015, you see that it has a function that PHP file as well. If you open that file, you'll see that it has several functions inside it. The function's dot PHP file act as it was a kind of plugging. However, unlike plugins that affect all things at once, functions that PHP only relates to the theme there is currently active. So whatever function I create within that functions that Pitch B, when the 2015 is active, will only apply to the 2015 theme. Likewise, the functions that PHP we're going to create will only be valid for the learn WP theme. What makes this functions that PHP file soap different? What is its function? Well, it can't contain costs for our stylesheets. Scripts. Sidebar is we're going to create menu functions, thumbnail image settings. Wherever different pose Fermat's we may have. And we can also create our own specific functions and low than in WordPress. So very versatile file. It always come in handy and I love working with it. If you want to learn a little bit more, you can just go ahead and open up the functions that PHP file of another thing. For now, we're going to create our own file to load our own sites. But before spoke about what makes all of this magic happen. We'll try to explain more or less the dynamics of this whole process. While the loading process of a Wordpress site is a bit different from most websites. Not just a simple process, since it's accompanied by several moments of execution. Wordpress calls them action hooks. And some of these hawks are defined in the WP settings file. So if you open that file and look for the term do underscore action, we'll see several of these hooks. For example, setup theme is fired before the theme is loaded. There are still all those like after setup theme in it. Wp loaded. The hook that interests us the most in this lesson is WP enqueue scripts. That hook is inside this script loader dot PHP file. In turn, this file is included new line 192 of the WP settings file. And now we have a hook which will help us fire the function responsible for our stylesheets. But let's understand this better in practice. Okay, so let's create a new file in Sublime Text and we'll just name it functions that pitch me. And this file must be placed within the learn WP folder. In our case, write. And before any doubt arises, yes. The file must be called functions that PHP don't forget this letter S at the end of the name. Okay, let's start. The file will be PHP opening tag. But notice that we want close it. We do this to avoid the header's already sent type of error. If a file has only PHP code, you can omit the tag. Now after that less creative PHP function. And as you know, a PHP function starts with the word function followed by the function's name. And our functions, they will be load underscore scripts. Now the WordPress function that will add our style sheets to the q is the WPA and Q style function. So when this function is called, it will load our stylesheets one underneath the other in a queue, right? We can see this later in the source code of the page. For this function to do something, we want to pass some parameters with. The first one is a handle. What will the file handle B in the row? Since we have already created a file called template dot CSS, This will be our handle. But it could be any name, okay. As long as you don't repeat those names, that's okay. The second parameter is used to print out the path to our file. There is a WordPress function that does that called Get template directory URI. After using that function, we only need to say that the stylesheet is inside the CSS folder and it's named template that CSS, we concatenate this function to the string foward slash CSS folder slash template that CSS don't forget the training slash, right? The next parameter says whether or not our style sheet has dependencies. That is, if there's any other stylesheet that needs to be loaded before our template dot CSS. That is, again, if it depends on some other file. If so, we need to type out the handle of this file inside an array. For example, if there is a stylesheet called data, we would pass its name inside an array. Since we have no dependency, we can leave only an empty array. And other arguments that the function needs is that of the version. This argument is not required. We can type for example 1, we shall be our style sheet version. You see that the version tax to be concatenated with the filename. And again, we can see the version number in the source code. The last parameter is used to let WordPress know what kind of media the CSS file refers to. It could be print, screen 00 would be relative to all media types. And it's the most common value. Alright? But it's not enough to just declare the function. In the case of this function, we must first add it to an action, associating it with some hook. We want associate our load scripts function with a hook called WP enqueue scripts so that it can actually be executed. To join the hook to the function, we're going to use another word press function called add underscore action. You will see this feature being used many times in WordPress. First we have three form the name of the action hook, which in our case will be WP enqueue scripts. And then the function that is going to be executed, which is the one we just created. So what is going on here? In summary, we have created our load scripts function. Inside it. We call the function that enqueues our stylesheets, template that CSS, whose path is this one here? It has no dependency. Its version is 1, and it applies to all types of media. The add action function adds a new action within the WordPress execution. Then the WordPress page will load. And then we automatically have several hooks available. One of those hooks is called WP enqueue scripts. We take this hook can have a function executed on it called load scripts, which in turn includes our starship. Wow, amazing though. But none of this is possible if we don't require a function called WP underscore head within our header.html file. And it needs to be placed before the head tag ends. So let's open the PHP tag and typing here, WP underscore head. Without dysfunction, no script will be loaded. No stylesheets, including those used by WordPress plug-ins. We can now open our frontend and see if everything's working. And let's reload the page. And look here we have all the markup we made. If we inspect the code, we'll see that several things that were not here before now are loaded. So check this out. All this code was loaded because of the WTP hat function. So let's see if our starship is in the list. And look here it is. Template that CSS with its handle, its path, the version 1 that we defined, the type of media. Now we can finally test our establish it out. Let's create a rule for our top bar. Let's just set the color red and a height for the area. So background, red, height 70 pixels. Let's once again reload the homepage. And there it is, it worked perfectly. Now we can start the rest of the page without no problem. But before we finish this lesson, I have two important things to tell you. First one, ever since this course was released, a few students asked me where I teach how to create a template that CSS file instead of using the style.css file itself to ride the theme CSS. My answer is that we'll simply my choice again in case you want to know how to enqueue the style.css file. Instead, you see how to do it now because the code is on the screen if you want, and if you understand a bit of WordPress, you can call the CSS file like this, okay? Anyway, there is no right or wrong way teaching this course is not wrong or right. It's just one way and my way of doing things. And second thing in the course, I think you, there's some information about some cash problems that always come up at this point of the course. So if you're not seeing the changes you're making in your CSS file. Take a look at the FAQ. This is a subject that many students ask me about. They go like Marcello and making some modifications to my CSS file and I can't see the updates on the page. So if you have any issues like this, please take a look at the FAQ because there you have all the answers, okay, well, that's all for this lesson. In the next lesson we're gonna learn how to load our scripts and more. Learning practice how to integrate bootstrap into the theme, something that many people struggle, Alito. So don't miss the next class until then. And happy coding. 11. Ιncluding Bootstrap 4 (part 1): Hello guys and welcome to one more lesson. In the last lesson, we started in queuing our style sheet using the WP and Q style function inside the functions dot PHP file. In this lesson, you're gonna learn how to enqueue R scripts. As I want this license to be very effective, less learn how to enqueue both the stylesheet And the Bootstrap JavaScript file. I think most of you already know what Bootstrap is, don't you? For those who have never heard of it, Bootstrap, as its name suggests, is a kind of library that makes the creation of responsive sites very easy. As this course is not specific about Bootstrap, I will not teach details about it. Despite this fact, you end up knowing a lot about how this tool works as you move along the lessons, you see that it's nothing out of this world. Ok, in other ci include Bootstrap. We can use that same function we created in the previous lesson that we called load underscore scripts. You need to include the CSS file which is required, and at least one JavaScript file that it's optional. And it's used to include some Bootstrap plug-ins like model boxes, drop-down menus, carousels, Tooltips, and many other things. Although it's optional for learning purposes. We're going to teach how to include the JavaScript file In this lesson. Chu. Well, we are halfway there since we already know how to include stylesheet now which include the JavaScript file within WordPress. That is the question. But that's easy. We are going to use a function much like the one we used in the last lesson, WP and Q style. This time it will be called WP underscore, enqueue underscore scripts. One little detail is that you have chosen q Bootstrap before our main stylesheet. The reason is that if you want to override some of the bootstrap CSS rules using our main style sheet template that CSS file. You want to be able to do that if you include the Bootstrap CSS file here at the end, after the main CSS file. That's the nature of CSS, ok, that's how it works. If you want to be able to override something, that something must be included first NICU. That's not a real problem for the JavaScript file, but for the CSS is crucial. So let's just include both of them here at the beginning. Now this function has its own set of arguments. Let's go ahead and meet them. The first parameter is the handle. Let's call this handle bootstrap hyphen js. And the second parameter is also the path on which the file can be found. But like the example we used in the last lesson related to a file that was inside a folder of our own thing. This time, we can just type in a link for the Bootstrap JavaScript file. To get this link, we're gonna visit the official Bootstrap page ad, get Bootstrap that come. Let's click on get started. Here under quickstart, we have all the links we need for including bootstrap. The first one we are going to copy is the link for the JavaScript file. Let's copy this link here. Third one, and paste inside single quotation marks into our code. Okay, the third parameter is called dependency. And pay close attention to this bit of code because here we must type something out. It cannot be empty. And here's a quick explanation. Bootstrap depends on jQuery to work. That is, it doesn't work if jQuery hasn't been loaded before it. This way, it depends on jQuery. To indicate this, let's just type in jQuery inside an array. This instance of jQuery that we are indicating comes from the WordPress library itself. Thus, there is no need to write another line to enqueue any jQuery file. Wordpress has already done that for us. He just need to call it here. Just a tip for you guys. If are using Bootstrap five, be aware that there is no more need to use jQuery from version five and up, bootstrap no longer uses jQuery. If this is your case, just pass an empty array here. I already tested the files of this course. We bootstrap five and they still work like a charm. The first parameter is for the version. We can type in the version of Bootstrap here. In our case, as you're seeing here, the version will be 4, the first version in Bootstrap four. Nonetheless, perimeter is very important. It points out if you want to insert our JavaScript file within the photo tag before the closing of the body tag or inside the HTML head tag. What is it for? Let's take another very practical example. Everyone, once in lifetime needed to include the Google Analytics script on a site, right? Google always recommends that you include that script before the HTML closing head tag. But if you want, we can use this less perimeter and easily include scripts like ooh analytics, not before the closing head tag, but at the bottom of the page. Bootstrap will also be included on the footer. So let's type in true here. Notice that by default it's value is false. And we can also include the Bootstrap style sheet. To make this process easier, I'm gonna copy the example we created in the last lesson and replace the values where needed. I'm gonna change the handle, colonnade bootstrap, hyphened CSS. I'm going to copy the CSS file link from the Bootstrap site, which is this one here. There is no dependency this time. The version is also 4. And this file also refers to our media types. Okay, reading. Now these new files will be enqueued together with our last lessons file. We can now check if our files are actually enqueued. Let's check the source code of our site and search for Bootstrap. And look, we found this CSS file. Let's do a search now for the JavaScript file. But how strange how come the JavaScript file is missing? Well, do you remember the WP hat function we used in the last lesson? There is a counterpart of it that we can include in the footer dot PHP file and its name is WP underscore footer. Let's open up the footer.html file and add this function before the body ending tag. Now if we look for the JavaScript file, once again, we see that it's being loaded at the end of the file as we want it to be. Well, that's all for this lesson, and I hope you liked it. In the next lesson, we'll be passing out our first Bootstrap classes, so don't miss it. And see you then. Bye. 12. Including Bootstrap 4 (part 2): Hello, guys. In this lesson, we're gonna test our first bootstrap classes less Jack if everything that is in the last lesson when we included bootstrap for in our theme is really working. Before testing whether bootstrap is working, we need to add a new tack in the head of Dutch PHP file. That tax is relative to the View port, which is the visible part off the screen and rise from device to device. The view port tack ensures that the side content will respond correctly regardless off the view port. In fact, I already have that tag it hand. To be honest, I just copied the attack from the one of the native words best teams, and you can do the same. In fact, I recommend that you do the same because it's faster and it's reliable. So let's space it here. Well, I will not explain in detail what each of these properties mean, but it's important that you include attack right. Otherwise, your side may look totally weird on the phone or on a tablet, and we don't want this. Okay, so let's go ahead and save this file. And now we contest bootstrap using this file the header dot PHP. Let's remove this paragraph because we don't need it anymore. Now how this bootstrap work? To help us understand, I'm going to show you an image from the Design motor website. Well, as you see in the image briefly, the basis of the stool is a great system off strove columns in which we can distribute the content off the site. The content itself is centered within a special class called container who size rise according to the device that is used to view the side content. Inside these containers, we have the rose, and those rows can be distributed over child columns. All of the scientists are controlled by CSS classes. That's why we've included the new CSS file in our functions. File. In the last lesson, there was a CSS class for the container for the row and for the column sizes. We can also define specific column sizes for large, medium, small and extra small devices. Great, but let's see that in practice, let's create a new tiff tagged inside topper section. Anyone to add the container class to it. That class is specific to bootstrap. To use it, you just need to add it to the elements you want within this death, you want to create a new one with the role class. Now let's say that social media tive we'll have a live off 10 columns in extra large devices, eight columns in medium sized and small devices and the wave off six columns for extra small devices like smartphones. For example. To do this, let's add the Coal Excel 10 Cole and the Eight, Cole S. M eight and Coal six classes to the social media icon Steve as to the same for the search, def. But now we want to set another values for extra large size. We're gonna have to columns for medium and small sizes for columns and then for the extras more size six columns notice that the some off all columns within the same role never exceeds 12. So 10 and chew or six and six equals 12. It's at another special bootstrap class to the search def text, right? And this class, because this their floats to the right. We can also add some more rules to the sisters file, which will only help us notice the difference between these two areas here has opened up the template that CSS file and at the following lines social media. Aiken's background Green hide, 30 pixels Search background. Yellow Hi 30 picks us that saved the file and finally previewed the changes. And when we below the page, Harris, everything's working. It's live, has the sizes despite and the Kohler's percent. Now we first sized browser. We see that the columns are stacking correctly as well. So it's like magic, isn't it? So you can test that out later on your own. If you won, right, for example, you can change the post wrapped classes and the ones you name it. It could be a very good exercise. Well, that's often. Now I hope you like this lesson and I see you in the next one. 13. Creating Menus (part 1): Hey, what's up? Today, we're going to start learning how to create our first menu in WordPress. At the end of the next two lessons, you have a horizontal menu similar to this one in the layout. I ready, so let's get started. Well, so far we have no menu created. So if you head over to the Dashboard Appearance menu, you'll notice that we don't have any way to create a menu yet. In order to manage our own menus, you have to do something in the functions that PHP file. This file, you'll help us register our menus so that we can use them in our theme. Before creating a menu, let's create some static pages within WordPress. As this is the first time we will be creating a page or a post in the course. Let me just clarify one thing. This course has been created with WordPress Version four. Currently WordPress is reading version five between the last updates or version four and version five. And new editor emerged in WordPress called Gutenberg. It's a new content creation experience, literal like that of a page builder. However, the existence of a new editor changes very little the way you create themes in WordPress. That is, everything I teach you here in this course remains 100% valid. Okay? The only thing you notice is that my page and post editing screens are little different. If you've never worked with WordPress prior to version five, you'll notice that my editor is a little different. It's called the classic editor. All the tools I use inside the old editor, the classic editor also exist in the new editor, okay? And we just have a little more work to find them. If you have any difficulties, you can contact me and I will be glad to help you out. But from what I've noticed so far, very few students are having trouble finding the tools. Just a warning for those who didn't like the new editor. At the moment, I'm recording this video. Wordpress is announcing that a2 support the classic editor and Qd 20-20 to or as long as it's necessary. So you'd better get used to using the new editor. They couldn't bury editor. At the end of this course, you'll see that I have prepared seven lessons about new editor. There are also explain how to get your fin ready to work with it. So I think you'll love it. But for now, let's get on with the lesson. Let's head over to pages, add new. Let's create some pages then. The first one is going to be the homepage. For other pages, I'm going to just write a minimal description. So this is the home page. Now the blog page About Us Contact. Now we can start registering our menu. But what do I mean by registering a menu? Well, it means nothing more than logically creating it within WordPress so we can use it later. The first thing we're gonna do is use a Wordpress function called register nav menus. Like every function call, it has this parenthesis that opens and closes and a semicolon at the end. This function allows us to define an array which in a singular definition is only a list of elements. We are going to use an array because we can register more than one menu at a time. This is even an exercise you can do yourself. Do you remember that we have too many use in our layout, one at the top of the page and another one at the bottom. So I'm going to register one of these menus and slicing and your exercise will be registered a second menu. Okay, why do you think about this exercise? It's a very simple exercise. Ok. I know some students think it's weird that I proposed exercises like this. I've seen a few students complaining about this in the course reviews, but there's no big deal about it. It is just one more opportunity to learn. You get the answer in the first video lesson about WordPress loop, I mean, two lessons. So let's go back to the chain of thoughts. So we've been working with the first element inside this array is going to be the menus slug, that is to say a short name for it. I'm gonna create a slug called my underscore main underscore menu. Don't forget you write this value with lowercase letters and no spaces. You can use dashes and underscores as I did myself. The value of this element of the array will be the name that will show within the admin area. That is a more friendly name. In our case, it will be Main menu. Don't worry, because soon even understand where this value is shown K. Ok, now an important information. If I add a comma here, I can register a second menu. In fact, I can register multiple menus within the single function. I can add a new slug and a new venue. Each menu corresponds to what Wordpress caused a position. So I will have a second register menu position here, but I will not do that now. This will be a little exercise for you guys. So I'll go ahead and delete this for now. And now when I save this file and get back to the dashboard, reloading the page. If I hover over to Appearance menu, you see that the menu's option is now available. When I click on menus, we get to the menu admin area of WordPress. Wordpress creates automatically a menu called menu one. Just an update. It seems WordPress has recently stopped creating the menu automatically. If this happens to you, just give a name to the menu and click the Create Menu button. So moving on with the explanation, I can stay with this menu or I can create a new one by clicking on this link above. Let's go ahead and click on this link. I want to give a name for this menu and the name of it is going to be top menu. It could also be Main Menu. Anyway. I'm gonna click on Create menu. By the time the menus created, two options will show below. Automatically add new top-level pages to this menu. I'm going to leave this option checked. And this means that the moment I create a new static page, it will automatically be added to my menu. I'll show this in practice in the next lesson, right? And the check box below display location is to indicate a menu position in the menu. Remember that we added choose tax strings to the menu. Men are registered in our functions file. The first one was the slag menu, a key, and the second string was a description for the menu, it's corresponding value. The text that we have here corresponds to that second string, that is to say the menu disruption, in our case, main menu. If I chose disruption, I'll be telling WordPress that menu I'm creating right now will be relative to the main menu that I've registered in the functions file. So go ahead and click on save menu. So is it over, though, is not ready yet because we don't have the menu items here. You see on the left side that I can choose to add some items should my recently created menu, I have a list of pages, posed, custom links, categories, et cetera. Here on pages. I have those pages I created earlier, indolence and they remember them. So I'm going to add all these pages to my menu. Should do this. I just select one-by-one and click on this Add to Menu button. I can also reordered the items if I want. Now, I need to save the menu once again. And now the menu is ready. When it's ready, at least in the admin area. Because this is not enough to have our menu displayed on the front end. Yeah, let's visit the homepage. Refresh the page. And you can see that we don't have any menu here. Only this word menu and nothing else. So what more do we need? Well, we need to indicate in the header dot PHP file that the menu created in the enemies and registered in functions file will be positioned it in this specific place here. But that will be a subject for the next lesson. So see you later. 14. Creating Menus (part 2): Hey, what's up, guys? In the last lesson, we learned how to register our menus using the functions That speech be filed in today's lesson. You're gonna continue this process that you knew how to position the menu in the thing. So here we go. Let's open up our hair. That's PHP file, which is where we decided that our menu will stay. It's going to stay right here in place of the world menu before doing this. Let's style a bit. Our hair that's BBP file using the bootstrap glasses. Since we already know how to do that right here inside the menu area section, let's create a new container inside it. We want to create a new Jiff with the class ro, and before this role, we're gonna create a tiff with the class align. Later, in the course, you understand what this classes for and now for the logo section, let's add the following classes for the columns CO MD to co sm Trails Cole, 12. Let's also add the text center class so that the locally centered in small and extra small devices this last class you'll make sense at the end of the course when we add our logo for the main menu. Neff tack. We're gonna add forming classes, Cold mg tan text right. Notice that we will not be using the small and extra small sizes, not even the extra large sizes. The extra small columns are omitted because at the end of the course we'll be installing a responsive menu. So once the regular menu you disappear in smaller screen device is replaced by the response of menu. We don't need to add those glasses, but you understand it better when they get there. Okay, let's go ahead and save that and go back to the front end and check those changes. Okay. As you can see, the elements are already positioning according to what we defined. Let's go back to the file now in place of the world menu, I'm gonna call a WordPress function that you finally position the menu be created in the last lesson. Dysfunction is WP on the score. Neve underscore. I mean you. So we opened enclosed princess and place a sink along at the end. Now here, inside princes, we're gonna add our menu position to remember what a minute position iss It's that information we create in the functions fire. When we register and menu, it's slug. That's at an array here and in this ray. Let's bet some arguments. The most important of these arguments is the one called thing on the score location. They close attention to this on the score. Okay, My Brazilian students are very confused about this until this day, some of them type of hyphen set of on the score, and this can let your unexpected results so much out. The theme of the score location is nothing more than this lack of our menu. Let's go back to the Functions file and copied his leg for the main menu dysfunction except several other arguments. For example, it can define a class for the menu a container, a value for before and after the menu, the amount of levels that this menu will have. But you can see more details about the other arguments in the link that is provided in this lecture. For example, you can create a bootstrap menu by modifying arguments for this function. Unfortunately, as this would take too long to be explained, not going to address this topic in the course will be using a plugging to create a responsive menu. That will be great. You a promise. But for a basic implementation of a menu in WordPress, the theme location arguments is enough, anyway, in the extra resources off, this lecture left the link of a tutorial on my YouTube channel, where a teach how to implement a menu without using plug ins. In case you're interested, feel free to check it out until I save this file. And let's look at how our site is getting. So keep your fingers crossed. OK, perfect. We have a remain. You finally great. It's too pretty simple, but it's already working. Now. Remember that we said that the new static pages would automatically be added to the menu. So let's see if this really works. Let's go back to the dashboard and let's create a new page. It's called it testing and refresh the page. Okay, look, the new bash has been automatically added to the menu, right, But let's remove this page from the menu because we don't need it here. Click on this little arrow and they can choose to remove it, save the options, and we refresh the page once again very little. There is only one small detail missing. This menu is all vertical, but we want a menu to be hard zone toe. How do you do that? Well, the easiest way is to create a CSS roll that can change the display off each list Elements of this menu. Let's go over to the CSS file. Let's create a rule for our main menu element. This rule will be applied to each element of the another list. So main hyphen menu you Well, l. I display in line off course. There are all the ways to do this with now. Let's just apply this rule. I saved file and refresh or beige and look. Now the menu is horizontal as they wanted since for using bootstraps text right class. It's also right, aligned some. Marcello doesn't mean that if I click on one off this menu items, I can already go to the desired page. Well, let's go ahead and click. Um, it didn't open anything different, and the page remains in the same place. The explanation for this is quite simple. For now, the only thing we did was create a menu who have not yet defined what will appear in this dynamic aerial decides when they click on Mitch. Menu item. This is what we're gonna do in the next lessons. So don't miss the next lessons as we're gonna learn about one of the most essential concepts of WordPress theme WordPress Loop. So a bit for you, the next lessons and she'll then happy coding. 15. The WordPress Loop: Hey, what's up, guys? Welcome to you one more lesson. In today's lesson, you're gonna learn what is the famous WordPress loop and how it works. Before you really get into the explanation of what the loop is, i'm going to show you what I've repaired to streamline this lesson. So hearing the index.html file, I have already added the classes related to bootstrap. You can see here that I just added the containers, rows and columns related classes for each section of the file. You have already learned how to do that in the previous lessons. Thus, I really don't think there's any more secret for you here. Here in the footer dot PHP file, I've created a div called copyright, also inside the Bootstrap structure. So there's nothing really new here, only HTML tags and CSS classes. And we have created a new menu to. This was left as an exercise to license ago. Remember, and see if your solution looks like mine. If it's not, you can pause this video and correct it. Or you can copy this lines of code from the files available for download. As you know, they are all available in the first section of this course. In my case, the menu slug is footer underscore menu, but yours may have a different name. No problem, as long as this is the same as defined in the functions file. So this leg here must be the same as the string we have. Here. I also added this new menu in the CSS file, so it will display inline as well. Another thing we did was create in the administration stream new posts. These are only simple posts with some dummy content. Each of them are within some categories which have also created. And they have a couple of tags shoe. This will help us show the post content, which is the purpose of today's lesson, is you then create your own posts. Okay? I believe you know how to do that. Just go over to the post menu and create your posts there. That said, let's move on to today's lesson. Today, we are going to learn how to make our theme more dynamic. It you'll be then the first time something we're really happened when we click on any link and change the content of posts and pages. So what is the WordPress login? If you look at the WordPress codecs, we will find the explanation there. So here the WordPress theme says, the loop is that PHP code used by WordPress to display posts. And here's a key question. What do we mean by posts? Posts are not just regular posts, but static pages are considered to be posted to, for example, the About Us page, the contact page, etc. Using the loop WordPress processes each post to be displayed on the current page. And Fermat said. According to how it matches specified criteria within the loop, tags. Within the loop, we can tell WordPress to show the title of each post, the contents of the entire post, or is snippets of this content, the tags used, the categories of dispose of this is done with a combination of HTML tags and PHP commands. Any HTML or PHP code in the loop will be processed on niche post. Then it should serve as a template to display our posts. Well, to illustrate what this loop will be in practice, let's open the WordPress themes repository page. Here on the page I want to find a theme called Florida. And he really is. I'll go ahead and click on More info. And then on preview. At the top of the theme. There are several examples of what a loop looks like. But let's scroll down to the bottom of the page. This region shown here, which shows the category, the post title, the author, the publication date, an excerpt from the post, and the ellipses and link that leads to the full post, as you can see, is repeated in several other parts of the site. All of this can be created inside the WordPress loop. Let's go back to sublime them. We'll be creating our loop right here, where we have the word news. Let's make some space here. And let's start creating the loop inside PHP tags. Let's start by saying the following. If WordPress have any posts, if health posts we want for expresses something while there are posts, do something else. So while have posts and that something else is simply bring in the post for us. The post. So while half bows the post. Let's just type in some commands to make it easier to understand what is going on. So if you have any posts published, why WordPress can find those posts? It will show them on screen regardless of how many posts are found in the database. Later on, you'll see that we can even control the amount of both returned by the database. And those posts will be called Here in this exact space here. But according to some format and that Fermat, we're going to define it soon. But in case no post was found, we have to predict this to, let's reopen the PHP tag here below. Let's end why command, which we started up here. And just below, we're gonna use the ls command to determine what will happen if no poster found. So let's open a paragraph below or stuff like that. And finally, let's close out the if block that we started here and is. So let's recap. I want this to be very clear to you. K, We started the dynamic area attending WordPress to check for post in the database. For now, let's not worry about the kind of post that will be returns. If there are posts, then we start our loop. In fact, you loop itself goes from this while statement here to the end. While, while posts are found in the database, will tell WordPress to show each post found one at a time. So let's say that two posts are found. The data from this first post will be loaded as shown on the screen, according to a specific formats which we have not yet defined, but you use, the code will reach the end while Persian and check that there is still one post left to be loaded. It will then go back up here, starting a new loop and load data from the second post. When there are no more posts, the loop comes to its end and the code continues on. In our case, the code will continue running, enrich this person here, where later on we'll have a map and the story goes on. I know it's a wonderful gear. I must agree. But if there are no poles to display, look doesn't even start running. The code jumps directly to the else block and shows this message here. Okay? But the way it is at the moment are called students and show any content on the screen. We still need to define how we want the post to be presented. So we need to add a new HTML markup here and then display the content for each HTML tag dynamically using some WordPress functions. Wordpress has some building functions to print the post title, the author, the tags, the publication date, and several other informations from posts where breast simply call them template tags. There are a large number of them, but for this lesson, we are going to use only the main ones. Let's start by creating an HTML article tag. Within this article, you're going to create an H2 tag, since H1 tags fewer actually be used in the headers of each section just below a paragraph. Let's type in here, posted in by. And three more paragraphs below this. In this first one, I want to type in categories. And later on, we'll see what the last two paragraphs are for. The first content we want here is the post title. To do this dynamically, we need to use a Wordpress function called the title. So let's type in here the underscore title within the page B tags. For the date. We're going to use another function called get the date. But in other free to work, we have to equate out. Here's a tip for you guys. Usually WordPress functions that start with the word get needs to be echo out. They're only used to retrieve a certain value, but don't display that value on the screen. To show it, we need to use the PHP echo command. Now you want to show a link that can be used to take us to the author's page for their particular post. And for this, let's use the author postLink function. For categories. We use a template tag called the category. And one other thing I forgot to say is that some of these functions, except parameters that we can pass inside the parenthesis. This function called the categories, one of them, the first parameter that this function accepts is a separator, since posts in WordPress can belong to more than one category. If you want to separate names of all categories by space, we can type out the space inside single quotation marks, and this corresponds to the first parameter of the function wishes the separator. Now in the next paragraph, let's make a list of tags. The function this time is the tags. It also accepts parameters. The first one is any texts that will be shown before the list of tags as typing here, tags. And the second is the separator. Let's use a comma as the separator, okay? And finally, the last paragraph, you'll be used to show the post content itself, which is everything we insert into the big post editing area. For this, let's call a function named the content. Now the Fermat, it's complete and we can see if our first loop we will actually work. Keep your fingers crossed and we want to refresh the front end. And here it is, our loop is working. You realize that as I told you, the look was exactly three times bringing triples from the database, each of them with the format that we defined as go ahead and inspect one of them. And look. We have the article and within it, the content of each post with Dido, publication date. Alpha link, content. Hearing the content, you see that we have a list of categories. When you have more than one, there is a space separating each item. Same thing for the comma separated list of tags. Now there's one more test. What happens when there is no pole should be shown? As do this, let's go back to the dashboard. Send our posts to trash. And let's refresh our page again. And perfect. Now, as no published pulse has been found, we have this message popping up. Well, let's restore our boasts as we will need them for the next lessons. Well, but we still have two big problems to solve here. The first one, you notice when we click the links to each page of the site. For example, if I click here on about us, notice that we also have a loop here. And the loop is spreading out the post title, which in this case is the page title. Since pages are also considered types of posts by WordPress, We have here the word categories with we don't have any category because pages don't have categories. Publication date, author, and the page content. The same thing happens if you click on blog or on contact. But that's not what we want. We want the content of this inner pages to be different. Let's go to the second problem. The homepage shows us a list of posts. This listing should only appear on the blog page. However, the blog page currently only shows the content we've included on a page called blog. That is, the role of these two pages is totally inverted. To solve this, we go over to our Dashboard settings menu, reading. Now here where it says front page displays. Let's say that the homepage will show a static page. This page is going to be our homepage. And the post page is gonna be the blog page. Let's go ahead and save this. And now, when we visit the homepage, we see the contents of that WordPress static page called home. And many click on blog. We have a listing of all the posts. Grade itself for this lesson. I hope you enjoyed it, and I also hope you feel like you learned something new today. But as ever, it doesn't end here. In the next lesson, we'll have more. Until then. Happy coding. 16. What are and how to use Template Pages (part 1): Hello guys. In the last lesson, we started learning how to create our first WordPress loop. We learned what a loop is and what are the advantages of using it within WordPress themes. The WordPress loop was responsible for creating this section here, which shows one of their posts. And actually this is a page and also this post link on the blog page. In this lesson, you're going to learn how to make some pages look different, since not all of the pages on a side will be created equal. So just a quick recap. In the last lesson, we had a problem yet to be solved and visit the homepage, for example, we see that it brings us a static page showing empty categories. The same thing happens on the About Us page and on the contact page. But we want things to look different. The homepage is going to be very different from the other pages, is going to have a sidebar, a new section, services slide, a map. On the other hand, the About Us page is not going to have any of them. There will be no sidebar, no slide? No, ma'am. How are you going to do that? Well, we have to bring to you a new concept called template pages. There are two ways you can create such template pages. One of them is creating new PHP files with the name of our pages in it. For example, if I want to create a specific page just to load the About Us page so that it looks totally different from the other pages. I will have to create a specific file just for the About Us page. The same goes for the contact page and for our homepage, as I'm going to show you now, the homepage is showing content created in the administration coming from a static page called home. But it must be different. Let's go over to our sublime text and we want to create inside theme folder, a new file. Let's save it. And here is the magic. The name of this file needs to be page hyphen. And this lag of the base should which this file refers to. If you're wondering where you can find that slug, I'm going to show you right now. So you can find it when you added the page right here. If you're used in the block editor, will not find this functionality in the same place, right? The new block editor has moved the functionality to this place here. The only exception is the pace set should be the homepage. You can see it's luck here, but this slug is home. So for the homepage, this name is going to be Bay hyphen home dot PHP. If it weren't for the About Us page, it will be page hyphen about hyphen as dot PHP sings about hyphen us is the slug for the About Us page. What we want to be shown on this homepage. Well, can make this faster. Let's copy the contents of the index.php file. The new file will still have a call to the get header function, the get fuller function. And in the middle, a dynamic area as go ahead selecting copy everything and space, everything here. And just for you to notice the difference, we're going to delete that loop and create a paragraph in its place. Let's save and reload the page. Look. See that this page is already different from the others. This is a page recreated using a specific file called page hyphen home dot PHP. This page will have a logo. Services cyber, mad, copyright. The way is defined in our initial layout. Remember? But what about the about us page? What can we do to create it? We can use the same strategy. Edges start. That is creating a file with the patient name in it. This name would be beige hyphen about a hyphen as that PHP slash create this file. Let's copy the same content from the index.php file and should make this page look different. We want to delete the div tags in sections. We don't want on this page. I still eat this content. Now, when we refresh the page, you'll see that it will be totally different. Now, the About Us page, as well as the home and blog pages are different. Another way to do the same thing we just did is to create a template page file. The difference between creating a template file, the file with the beige name, for example, page About Us, page home, etc, is that template pages can be reused as often as we want for whatever pages we want. For example, I could create a page there in place that could serve at the same time for both the About Us page and for the contact page. In doing so, these two pages would have an identical structure. I'm not saying that the content will be the same. Many people struggle leader to understand that the content won't be the same, but the positioning of the elements, for example, will be the same. For example, if a page has a left sidebar, the other page will also have a left sidebar. But the content of those sidebars can be totally different. You see a concrete example of this, but in the next lesson, for now, as an exercise, you can go ahead and try to create a PHP template page for the contact page. Do you think you can do that? I think so. Think of this only as an exercise, okay? Since you'll be adapting another strategy to create both the contacts and the About Us page in our next lesson. So until then, happy coding. 17. What are and how to use Template Pages (part 2): Hello again. So continuing where we left off. In this lesson, we are going to learn how to create template pages, but in a different way. We're going to adapt the strategy for both the contact and the About Us pages. Are you ready? So let's go. Let's start by removing this file here page about us that PHP, since it will not be used for jurors any longer. And now let's create another file with a very different structure. Still grieving are things further. We're going to save this file and its name is going to be general hyphen template, That's PHP. Let's use a comment structure that WordPress automatically identifies as a template page. As the name implies, this file will serve as a template. The advantage of this template is that it can be re-used, as we'll see. Let's start by opening the PHP tags. Inside them. We want to create a comment. Let's type in here template name. Let's call it general template. That is, it will serve any kind of pages I want. But if you want to give another name to your template, go ahead and do that. Well, how will the structure of this general template look like? Again, let's grab a copy of our index.php file and a space to content with just copied into the new template file. We can now start excluding the sections and div tags we don't want in this template. We can even exclude the bootstrap row, since we will have only a single column that will span the entire width of the page. So it don't need column classes as well. So now let's add a paragraph below this article tag. Now let's go back to the admin and added some pages. For example, I'm going to add the About Us page. And here you'll notice something we didn't have before. On the right side here in the page, attributes, a feud called template appears. And as a template page, we have the default template option which is now selected. Pay attention, especially if you're using the block editor, because since WordPress five-point eight, this functionality is in a new place. Now it's under this new option here called template. Just the branches in this explanation. What is this default templates, you may ask every time you hear this name, default template, you have to think of the index.php file. This file is always considered by WordPress as the default template. Hence its importance. Whenever WordPress doesn't know how to display content in the front end, it will use the default template, that is the index.php file. It's a fallback file, very important keyword pressings, okay? Now closing the parenthesis and coming back, we can say that the space is going to use a different template page, not the default one based on the index.php file. If we click here, we see that we now have the templates we created called general template. Let's do this and update this page. Now on front end. Reload that. You see that the page structure is shown according to the content we have in the general template dot PHP file. Notice the paragraph we created for reference for example. So let's do the same thing for the contact page. Let's go back to the dashboard. Added the page, and inside it. Let's use again the template page recreated. This is the greatest advantage of this strategy. I've just created one file that serves as a template. And this template can be reused on whatever pages I want, whenever I want. And of course, I can create as many template pages I want. In fact, I want to show you something curious. Most of the things you download from the WordPress repository have several templates. For example, you can choose between a template page with our sidebar and other template with a sidebar, another one with three columns, etc. This can vary from thing to thing. Also, most of the things that call themselves multipurpose themes adapt the strategy. For example, this thing here. It's multipurpose because it allows the site owner to choose between different homepage templates. For example, this homepage here that we're seeing now looks different from this sharp homepage template. But in fact, the inner pages, for example, the 404 error page, It's always the same. We can achieve this by creating different template page files to be used on a static homepage. But let's go back to our thing. So let's go ahead and update this page here and see how it's shown In front end. Look at is the contact page now has a template which is identical to the About Us page. That's because they use the same page template called the general template. As I told you earlier, only the structure is the same. The content itself is not. For example, each one has a different page title, but they are both in the same space, same font color, font size, etc. The other pages, however, follow another logic. Now that we have our template page up and running, Let's make it look a little better. From this loop will be removing the publication date, the author, the categories and tags, sings pages don't have these items. Let's save this file. So let's add some dummy content inside these pages. And update again. Okay, they said, now any contract we add on these pages will have a similar layout since they follow the same template. And now finally, all of our pages look different. We have the About Us page and the Contact page that follow a template page structure. The blog page that has deposed list and follows the default template, that is the index.php file. And the homepage, which follows the contents of a file called page hyphen home dot PHP. But Marcello, could I turn the page home dot PHP file into a template file as well? Yes, for sure. In fact, many things do this. It depends on your liking. Now, at least you know how to use all these shows available. Choose the one you like the best or the one that makes the most sense for your thing and apply it. In fact, you can go ahead and turn your page home dot PHP file into a template file. But just for the sake as an exercise, since we're still need that file. In the next lesson, you'll come back talking about another subject. We're going to learn what a theme support is. Until then. Happy coding. 18. Adding Theme support (part 1): Hello, guys. In this lesson, we're going to talk about a very powerful future of WordPress called theme support. So what is that thing? Support? Well, let's first take a look at the feet. We'll see that visually, it's still quite simple. We have no logo, no header. Etcetera from support is a WordPress function that allows us to customize many aspects of our thing. In fact, it comes in handy for those who want to allow the client all the user of the theme to make specific changes to the thing. Even though your client or your user don't have any program knowledge, I start by going over to the dashboard. If we had over to the appearance menu, we can see only a few basic options here. Everything since the WordPress you can see the same options, so we have nothing new here. At the end of today's lesson, we'll have a couple of new options here. They will allow us to make some customers ations to the theme through the dashboard to begin live. Let's open up our functions file. The first thing we're gonna do is create a new function. That function has nothing to do with things support necessarily. But it will help us organize the code a bit more. Let's call dysfunction, learn WB underscore CO fic. And here we will be concentrating all of the cold that has any relation with the theme configuration itself. So, for example, I'm gonna move all the court related to the main use and paste it within this new function . It's called a new ad action and say that this new function will be triggers on the hook called after set up thing. But this time we're gonna pass the less parameter to dysfunction. This parameter handles the priority of execution for this function, which will be zero in this way. Everything you create here, then dysfunction will be executive when never the after set up thing who is available. I have already explained to you the dynamics off this mechanism in previous license. So I'm not going to explain that again. Right. Okay. Now that we have everything place we can start talking about the thing support well, the at things support function is quite versatile. If we visit the WordPress Codex, you see that it allows you to add things, support various features. We can enable post firm. It's both thumbnails, custom background, custom header and many other features. All of these futures are not enabled by default in WordPress, but can greatly enrich our thing when you add them, we're going to start by adding themes, support your custom headers. They will be very useful to us as they will help us make the thing inner pages a little bit more different and with a more attractive look. So let's get started. Let's just add a new line inside of function we just created. So add thing support and inside Princess, we want to pass the type of theme support you want to add. In this case, it will be custom hyphen header. Most futures can also contain additional arguments. In the case of custom headers, we can pass arguments, the chance, the height and the with for the header image. We can do this by creating an array of arguments That's colleague Ard's and passed the following arguments Height 225 and with 1920 with the jury created, we can pass it as a second parameter to this ad theme support function. No, just that height and live are just do off the many arguments we can pass to dysfunction. You can see all of them in the Codex. Okay? And the links available as an additional resource for this lecture. Go ahead and save that. And now head over to the admin area. Refresh the page and we now see that under appearance. We've got a new option, which is this one here Header. Let's click here and scream that to open is a very interesting future of WordPress called the theme customizer. If you have already customized thing in WordPress, possibly you are aware that this to exists we'll learn how to create more advanced controls than this show at the end of our course. For now, you'll notice that this option here allows us to customize theme header. This option is also available because we have just enable support for header images in our thing. So here we have some instructions. We say that our thing recommends a header size off 1920 by 225 pixels. Precisely the values that we passed your function. Remember, Let's go ahead and click here to add a new image, upload any large image in this case, Our image is at least 1920 pixels. Wife as we want the uploaded image with a high off at most 225 pixels. We see the screen here that asks us to crop the image first. So let's do that and click on this blue button. Let's repeat the process and shoes. Treat more images, a quick tip for you guys. One thing we can do to make our header images more dynamic is to randomize them for this with just click on this button here and now, we can save and publish our changes. Good, but it's not over yet. If we visit the home page and refresh the page, we won't see our Harry image anywhere. And why that? Because we still need to tell WordPress where we want to. Heather Image to appear Well, the first question we have to answer is to which pages in our thing or two. Which page types we want to add an image header. Okay, let's assume we want Heather in all pages that use the general template, which for now the about US page and the contact page, and on all pages that use the default template as well, so the home page will not have a header. There are two files that we need to change. General template dot PHP and index dot PHP. That is the only thing played file that will be left out is page home dot PHP. So let's start with index dot PHP file. Let's open it and the header will be placed right here between the cat header function call and our first if dick visually, it will be Position it here where you see this red line as go back Just blind text as I want to get ahead. I'm gonna pace here a code snippet for the header image call. This code can be found on the Codex Page. Who's link is also available as an additional resource for this lecture to spacing it here . Sold Explanation can get a little faster. So what does this code mean? First, we have a nature Mel image tag. The image service is returned by a function called header image. It will bring to us the footpath for our image. Since our images random with each page load, that source will be changed dynamically to add a height and with for the header image. We used the PHP Echo Command to print out the haIf and lift properties off the image in the stack. The function that returns these values to us is this one here called Get Custom Header. Now, when you save this file, we can check if the block bay just gonna load the header image. So let's go over to our browser, refresh the page and look at this. And now we have ahead of image as the images random. Possibly. When we refresh the page again, we will have a new image. And here it is another header image. But notice, however, that he manages to large for the page. It is generating a hordes own toes Kober that's braided bad. So let's fix that. Let's add another bootstrap class called I M G hyphen fluid. It will make the image in question become responsive, which I've been here class because I am, see, haven't fluid save and refresh the page. Okay, Ready Now we don't have that horribles crowbar down here. Cool, isn't it? Now that we know what to do, let's repeat the process for the pages that use the general template a sculpted this image tag. Here. Open up. The general templates dot PHP file and paste tickled there too. In the same location below the scare header saved file. Now click on this link and here we are. They also have a responsive header here. Same thing for the contact page. Very good. Finally, our feet is getting more professional and attractive, Don't you think so? In the next lesson, we will continue to add things, support and work with some nails say them. 19. Adding theme support to Post Thumbnails: Hey, what's up? Welcome back again. As mentioned in the last lesson, in today's lesson, we will continue to talk about the ad theme support function. In the last lesson, we declared support for custom headers. And in this new lesson, we're going to talk about thumbnails. Should begin this lesson. I want to show you one of the things available for download in the WordPress repository. Themes like this one are very good for understanding what our thumbnails and how we can use them in WordPress. As you can see, this is a kind of news portal. It is divided into several sections. And for each section, again loops with the posts and the featured image in them. There are moments when this image is very small, others a little bigger. Altogether. In this theme, it seems like there are four or five different image sizes. These images here are what Wordpress calls thumbnails. The question here is, how can we add those images, those thumbnails toward breast post. If you look at our current blood listing here on the blog page, we see that our loop has only tax contents, nothing else. At the same time, if you go over to the dashboard and open some of those posts. For example, let's open up this box here. We'll see that there is no place here in the editor. Very can include a thumbnail that is an image that represents this particular post and differentiated from the others. And this is what we're gonna do in this lesson. So let's go back to sublime text. And we want to open our functions fire continuing where we left off in the last lesson. Well, to add thumbnail support, we got to use the same function we used in the last lesson called add theme support. Except this time we're going to be passing a new argument. So still think our configuration function, let's type in at things support and pass a new argument in here in single quotes as a string, let's type in post hyphen thumbnails. Marcello, Can I add this add theme supports out of this configuration function? Yes, you can. But as I want, my code should be well-organized. I'll be writing it, writing side dysfunction. When we save this file and return to the Post editor, refresh the page. You can see that here on the right side they have a new box, WordPress cause these boxes mailboxes. And now I have a link that allows me to choose a featured image for my posts as go ahead and click here and see how it works. Go ahead and upload any image and to set it as a featured image for this post. And if you click on this blue button, now you can see that it will appear here in the mailbox as a featured posts. Go ahead and update the post. And I'm gonna do the same for the other posts. So far, so good. I just updated less posts with the featured image. What are you going to do now? Well, let's check our posts list to see what we haven't. You now reload the page and nothing happened. And why the well, the answer is always the same. We need to make clear in our files where we want the featured image to appear. In our case, we want it to be positioned between the title and the publication date floating to the left. But before explaining this to you, I want to explain how WordPress controls the size of thumbnails and what a thumbnail really means for WordPress. If we had over two settings media, we see that there is a space where we can define the size of all images. First item is thumbnail size. By default, the size is 150 by 150, that is a square thumbnail. Then we have the medium size, which has a maximum width of 300 pixels. Large size, maximum width of 1024 pixels. And the resistive, an intermediate size that is not showing up here in the list. Today, we're gonna learn how to have greater control over the sizes. You see that it's quite simple. It's job is something that probably the author of this theme here must have done. I say this even without looking at the code, since as you can see, there are four or five different image sizes throughout the thing. Of course, we can make a couple of changes even here in the Wordpress admin. For example, if you want all these mole size images to have a maximum of 100 pixels, we can define this year, but we can have even more control. This is the great advantage of knowing how to grade things ourselves. Let's see how we can do it. For this, we're going to edit our index.html file, which is the default template and is the file that is generated in this pose. Listen. But the basic idea that I'm going to present to you can be used whenever you want to include pose thumbnails. First, let's find out where exactly we want to include the thumbnail. In our case, it's going to be placed between that H2 tag and the publication date. Here, we want to call a function inside the PHP tags. This function is called the Post found now, okay, after that, you can save the file. Let's reload the page and look. We have the featured image for the first item, for the second, for the third. But notice however, that each image has a different size. Some of them are so big that they generate this horrible scrollbar. So why does it happen? Simply because we need to tell WordPress what thumbnail size we want. As go back to the index.html file. And let's do them. Well, as we've seen in the Wordpress admin area, there are four predefined image sizes. We have the thumbnail itself, that is the smallest featured image size for a post. They have the medium sizes, large sizes, and also full size. Let's pass the first image size inside the parenthesis, and that will be thumbnail. Now, when you reload the page, we can see that our images have the same size. This size is the default size of the thumbnail, 150 by 150 pixels. So what is happening here? Well, the moment we upload an image, WordPress creates several copies of the same image, each one with a specific size. If we expand the uploads folder, we'll see that for the same file, there is the original image, an image of 150 by 150. Another image with a maximum width of 300 pixels, 768 pixels, and 1024 pixels. This help us choose the correct size of the featured image to be used. If, for example, I choose the medium size, I will end up with an image with a maximum width of 300 pixels. We can also choose the large, which will be slightly larger size or foe. That is the original image for with not cropped. But the whole thing doesn't stop here. We can be even more specific and create new image sizes on the fly. For example, let's say that in that position of the page, I need an image that has 275 by 275 pixels. For this, we need to create an array in cellular function and separate them by commas. We're gonna pass the width and the height that we want. Look at this. Now the image is slightly bigger and this is just the beginning. If you visit the codecs, you can find even more advanced examples. Well, she finished out, we're going to apply some CSS to the images because we want our images to look a bit better. First of all, let's inspect element. Notice here that the feature image in WordPress automatically receives a class called WP post image. We can create a new CSS rule based on this class. Let's suppose, for example, that it will float to the left. And it will have the following margin values. And you can also say that the article tags will have a different display. The so-called the article tag to display one underneath the other separated by a space. Okay, now we have a slightly more acceptable Luke. And I think that's all for this lesson. I hope you enjoyed it. As I told you, we just scratched the surface of this argument that adds thumbnail support. There is much more to be learned in the codecs. So don't be lazy. Go ahead and take a look at the WordPress documentation. Okay. I'm also live in a very interesting tutorial in the extra material of this course, you guys can learn about an interesting function called add image size there. It will help you create image sizes for your posts pretty much the way you want. So take it out. This out guys. 20. Getting template parts: hail Marcello here again. In this lesson, we're gonna learn about a very important function which will accompany you all the time during your career as a WordPress developer. And the name of it is get template part function as get straight to the point and open up our index dot PHP file. Well, anyone who has at least basic knowledge of PHP knows that we use a command called require in other chin clued files within another file in WordPress for have something similar, which is the GATT staying plate part function. It works much like PHP required, including template parts inside another template file to exemplify how this function works . I'm gonna cut out this HTML article, which repeats itself inside the loop and basis contents. Inside another file. Let's create a folder inside the things folder called Template Hyphen parts. Here, let's create a file called content dot PHP and inside it less based in the court we cut before. Let's go back to index dot PHP right now. If I write something here in place of that article that content we repeat according to the number of times Ula prints, For example, let's add a paragraph here and noticed that this paragraph we repeat here a few times every single reputation corresponds to the number of both found on the database brought to us by the WordPress. Look, now, if I want to bring the counter that it's now inside the new counter dot PHP file when it you used to get staying plate part function. This is a very useful function. Well, often use it when you develop your word breath teams. So let's call it here instead off the paragraph. Well, first, how does he work? This function has two parameters. The 1st 1 is always required. And the word breast Codex has a somewhat complicated explanation for this function, but I will try to make it simple. The first parameter we pass is the file name you want to call, leave out the PH B extension. In our case, this will be template hyphen parts for slash content. Since our country that PHP file is inside the template parts folder that's supposed that, it's not inside any folder. Then we will just have the word content. Okay, The second parameter is optional. We won't use it now, but it will be very useful in the next lesson. When you talk about both firm, it's Let's save that. And now let's go back to our thing. Look, now the content of the theme is again complete. But then my asked me, But why do I have to use that? I didn't see any difference. The thing didn't get any faster. Anyway, it seems that nothing happened. Marcello. Really? Apparently nothing happened. But we made way to use every all very important programming concepts here. First, do not repeat yourself. That is, don't create lines and more lines of code when you can write much less and get the same result also by doing what idiot? Here we will have a cleaner coat one that you will be easier to understand by other developers, which is recommended in any word pressing. We changed several lines with HTML content and moved to another location living the cold charter easier to be read. Well, it just scratched the surface off this new function. In the next lesson, we'll come back and we're gonna show uneven, more practical use for it. So see you later 21. Adding theme support to Post Formats: Hello guys, welcome to a new lesson. Today is time to talk about another valuable feature that we can add to our theme. Let's talk about post Fermat's. Post formats are one of the features that you can optionally add to your thing, making it even more attractive to the end-user. But in case you've never heard about them. I really like to explain everything in detail and visually. So let's go over to a browser. Here in the blog listing page. You can see that all the posts entries appear in much the same way. Actually, we always have the same repeated several times. Here we have a featured image for the post, the title, and the other elements that we defined in the loop. By the way, you certainly remember that its slope is coming from the file called index.html. Alter the posa interests look the same precisely because we have only one loop structure which is repeated as many times as necessary. But what if I want this listing to be different depending on the post content or owned post category. For example, let's suppose that for all posts in the web design category, we wanted to show only a single image. I mean, no texts, only one image as the post content. And for the Social Media category, we could have something different. For example, we could only show a video with some tutorial, for example. And we could go further. Let us say that all the headings of the Web Design category posts would have different color and style and the same for items in the social media category. The post formats are available from WordPress 3.5.1 and help us make the differentiation deftly want? Wordpress currently works with nine posts Fermat's. According to the codecs, we can have the following pulse Fermat's. You can have an aside which is similar to a facebook note update. We also have Gallery post Fermat's link, image, quote, status, video, audio, and chat transcripts. We also have the standard wordpress post Fermat's that you understand better later. One, this lesson. For this lesson, we're going to use three of this pose. Fermat's, the default one, video and image. Knowing how to use these formats, the others will come naturally to you. Okay, so let's get started. Let's open up our functions file again. And let's add another support to the theme. This time, you're going to pass this shrink. Post. Hyphen Fermat's should function ok. If you only do that and open any pose for editing, we'll see something that was not there before as open one of the posts here. Notice here on the right side, we have a new metal box. And it's quite strange because it's still empty. Surely you should have seen this on some other thing, but not empty. Of course. Just a quick update in WordPress blog editor, you'll find the post format options under document status and visibility tab. Here. This mailbox should be displaying a couple of new options, but it's not. Those options are for you to define what kind of content you are currently creating. For example, if it's a video post or an image post or an audio posts, etc.. If you want to display those options, we have to pass some more arguments to the function we just created. Let's go back to our file and pass these arguments. Fortunately, this is very, very easy. We just create an array within the function and type in which both formats we want to enable. Notice that we are talking about the thing as a whole, not just a specific post. Let's say then that throughout the thing, the following pose Fermat's will be allowed. Video image. Let's save that. Let's go back to our editing area and reload the page. Now we have three new options inside the mailbox. Standard, video and image. This post Fermat called the standard, has a special meaning, is the default option and means that no specific post Fermat is being indicated. Well, now we can start playing around with our posts. I can go ahead and create a lot of new posts. And for each post, I'm going to choose a different post Fermat. I'm gonna create six new polls here, tuples for each category and for each post Fermat. I'm gonna pause the video for a moment. And when we come back, I'm going to show you what I have done. So we have these two new posts at the top. It's opened. The first one. This post belongs to the Social Media category. I defined that for this category, outpost, we'll have the video post Fermat and will only contain one video as a content. I just grabbed a link from any YouTube video and paste it here in the Post editor. And I did the same for the other post from this same category. Now back to the post table as open opposed from the web design category. For the two posts in this category are defined that the post Fermat's will be image and their content will be just a single image. The idea will be that posts in the social media category would represent only a video tutorial, and post from the web design category would only show an image. It could be, for example, a portfolio image. That's just a hypothetical use case, just to illustrate the possibility of using posts Fermat's in real life, the user of the theme or the site owner is the one who you've defined if he or she wants to use this feature and for what reason? Ok. The other q remaining posts in the web development category who have a standard post Fermat, they are not present anything different. Notice that we can easily identify the post formatted in the table. That they still little icons here next to the title of each post. In the newer versions of Word Press, these icons have been removed. Okay? To know what the post format is, you have to open the polls for editing or install some plugins that can add a pause format column to repost stable. Okay, but when we go back to our thing, we'll see that nothing has changed yet. The structure remains the same. The only difference is that we have new posts with new content. What we want to do is proposed in the social media category. We want to remove this author link here. It can also present the title in a different color, not the scholar we have at the moment. For the posts from the web design category, we want to remove the publication date and we could also present a title with a different style. On the other hand, both defined with a standard pause. Fermat won't change at all. She used the full potential of force. Fermat's. You gotta make some changes to our loop first. The first thing we're gonna do is added that file we created in the previous lesson called Content dot PHP. It contains only an HTML article tag. As you can see, inside the article, we have a content that is repeated every time the loop runs. And the loop, as you know, is the one at index dot PHP file. So let's call a function here inside this article tag, get post Fermat. And we're going to ACO this functionality to see what is returning. It will do nothing more than showing onscreen the name of the posts Fermat related to the current post loop. Let's save that and you see what I mean. Notice that for the first two loops, we have video. For the next two posts, image. And for standard posts, nothing is printed out. Good, but what is this former sell? Well, for this to be useful, we need to use the second parameter of the function we learned in the last lesson, the Gad stain plate part. So let's just recap. The first parameter of this function is the file path without the PHP extension. So here we have template parts for slash content. The second parameter can be used whenever we want you to call a specialized parts of this template. Kind of confusing, isn't it? Yes. And this is a rather complicated concepts to explain, but in practice, it is very easy to understand. Suppose we have, in addition to the content that PHP file. Another file called content hyphen image dot PHP with a different content. How can we do to include that file using the second parameter of the GAD template part function. Very easy. We just type in the word image in the second parameter. So we're press, we will understand that we want to include a file called content hyphen image dot PHP. For this to work, the full filename must have a hyphen, ok. That's very important. In a more detailed explanation. What happens here is that WordPress will always include a file that has an identical name to the second parameter. It can't find this file. It will fall to actually file that has the same name as the first parameter. So in this example, if a file called content hyphen image dot PHP exists inside our films folder. It will be included. If it doesn't, WordPress will include a file called Content dot PHP. Ok, but what does this have to do with pause Fermat's And with that get posed format function I explained earlier. Well, you see that in a moment. Let's first create two new files here in the template parts folder. One called content hyphen image dot PHP, and another file called content hyphen VDO dot PHP. Inside the content image dot PHP file. Let's copy and paste everything you have inside the content dot PHP file. But here we want to remove the publication date. You don't want it here. And for the content video dot PHP file, let's do the same and just remove the authors link. Okay, now, going back to the index.html lifespans, the second parameter of the GAD template part function to include these two new files in the loop. To do this less past the get post Fermat function as the second parameter. As we already know, get pose Fermat returns a string with the name of the post Fermat's. So whenever there is a post that has the video post Fermat, where brands will try to include a file called content hyphen the deal dot PHP. Whenever in the loop there is a post that has the image pause format. The file to be included will be content, hyphen, image dot PHP. And then whenever the function returns nothing. That will be the case when we have a post that has the standard post Fermat, the file to be included should be content that PHP, the second parameter, will be completely ignored. So that's the magic ladies and gentlemen. And I say that. And look at this for posts from the social media category, which have the video post formatting the content video dot PHP file was included. We can say that because these items don't display the authors link. And as below for posts from the web design category, we don't have the publication date, which means the file included here is the content image dot PHP file. The other post didn't change at all because they were viewed upon the content that PHP file, which has the most complete loop of all. Now that you know all this, we can start playing a little more. We can, for example, modified tags of which content file by adding certain CSS classes within those tags and then styling them differently. For example, for all posts that have a video pause format, we can say that all heading elements will show in red color. And that's just the tip of the iceberg. Or we can do something even more advanced. Look at these examples. My tip for you guys. We can call the post class function inside the HTML article tags of all the content files are created. In this lesson, inspect these elements and see which classes will be included. Think about what you can achieve with those classes using CSS. I am sure that many ideas will pop up from your mind. Well, that's all for this lesson. I hope you have understood and also liked it. If you have any questions, go ahead and user questions and answers page. So see you next lesson. 22. Creating and adding sidebars (part 1): Hi there. In today's lesson, we are going to start talking about sidebars. In this first lesson, we're gonna start creating the structure for this design elements which are very important in a WordPress theme. But before we start, you may have noticed that our theme is a bit different. Now the thing is a bit more like our initial layout, the one represented at the beginning of the course. The top bar is ready with the color we defined. Initially. The menu is already a little bigger, etcetera. But before you start complaining hand, there's always someone that you complain. I'm sure, as I said, since the beginning of the course, we will not focus on HTML and CSS here on the Course. Despite the fact that you really need HTML and CSS attribute of WordPress theme. I think the most important in a course like this one here is to explain the WordPress way of doing things. So for the moment, I'm not going to record lessons explaining water did in terms of CSS, for example, how have changed colors? That's the basics of web development, which is not the focus of this course. If we did that, it would take you a long time to learn what I think is the most essential here, which is explaining how the thing works. However, you can see all the changes have made in the files. I'll make them all available for download. As you know, all the files are available in the second lecture of this course, everything organized by lesson. So go ahead and download the files. And there you can see the changes. Okay? So here in the CSS file, I have the code a bit more organized. Here we have our Google Fonts call. So minor changes to the heading elements, the background colors, the style for each section of the site. Anyway, several style changes, only very simple CSS modifications, nothing very special. If you head over to the content files, you see that I've implemented. That suggests and I gave you in the last lesson, I've included the post class function here within each article. And using only CSS. I've styled each post formats in different way using the class relative to each post format. If you had the curiosity to implement a suggestion I gave you in the last lesson, you must have understood how it works, is you didn't go ahead and give it a try. That will be a very good exercise. Well, let's go over to the blog page. Here on the blog listing page, you can see that the pose which have the video posts Fermat are different from the ones with the image pose format. The default post Fermat's have a heading tag with a different color to changing the heading colors is a very simple idea. If you can remember the examples I showed you in the last lesson, it can have even more advanced changes. Also, as you can see, there's a new div here called Mapinfo. Actually, it has been added to all the content files. This will serve as a rapper and help us styled first paragraphs, which contains the date, the author, categories, and tags. I've used this wrapper just to apply this grey color to these links here and to make the text border. So it's only CSS in a couple of HTML modifications. Nothing really special, and nothing related to WordPress itself. That said, we're going to start creating our sidebars. Before that, let us explain what those sidebars are. Okay, for this, let's just switch things for a moment. This time. Are we working with the 2016 theme, which is one of the native WordPress themes. You see that on the right side we have this big area here. Here in this area, we have some features. We have a search bar, an area with recent topics, comments. The whole area is what we're press calls a sidebar. And within that sidebar, each small element which has the functionality is called a widget. We'll be learning about these two elements, sidebars and widgets in this lesson and in next one, you'll notice during the course that we can create end position then practically anywhere in the thin. This by the name of this element sidebar, we can place them anywhere, not just on the left or on the right side of the thing. So the first thing we're going to do is open up the functions file. In the same way that we have previously registered. Our menus, are gonna register our sidebars. For this course. You're gonna first registered choose sidebars, where you can register several sidebars for a single theme. Let's create a sidebar that will be displayed on the homepage and a second sidebar that will be displayed only on the inner pages, more specifically on the blog page. For now we only have HTML markup in both areas. But nothing is happening here. Once we've created the sidebars, we can add whatever widgets we want. For example, here on the Homepage we can add a text widget. And later on we're going to add a contact form and own the blog page. We can add widgets to display the latest posts, for example. But they can add wherever elements we want. In their sidebars are features that can bring a lot of dynamics to the theme. Once we created, the end user can put wherever they want in their making their websites are totally different from another one that uses the same theme, for example, okay, enough small talk, and let's get down to business. So let's get back to our functions file. This time, we want to register our sidebars outside of the main configuration function. Let's start by adding a new action. Let's pass to this action called widgets in it. Unless trigger a new functional that hook. Let's call this function learn WP underscore sidebars. Notice that this function doesn't exist yet and we will be creating its own. In fact, we are doing the opposite of what we have been doing previously. We first created the functions and then added an action, but no problem at all. Here, changing the order of the factors doesn't change the product. Now, let's go ahead and create a function. So function, learn WP and the score sidebars and the net. Let's begin registering our first sidebar. To do this, we want to use a function called register sidebar. Inside that function, we create an array. And within this array, we pass some arguments which I'm going to explain to you one by 1. First 1 is called name. This is the title data display in the admin area. For example. Let's go to appearance widgets. This one here. Let's separate each item of the array with a comma. And the new line. Let's pass a second argument which is called ID. Pay a lot of attention here, okay? Because this ID must be unique. As we are going to register choose sidebars. Each idea argument needs to be different. Also avoid the user special characters. Here are spaces. Ok, let's consider this value as a variable. This way we don't make any mistake. The next argument is description. This argument corresponds to a short description that also appears in the admin area. This one here. Okay? All the arguments we passed so far will be used in the dashboard when we are inside the Widgets page. The remaining arguments refers to the display of each widget individually. The first one in this category is called before underscore widget. Let's just type in the argument and pass an empty value for now. And the next one is after underscore widget. Same thing. Let's just pass an empty value. Do you understand what therefore, I need to use some visual aids for that. Let us go back to our 2016 Theme. If we inspect each widget in the sidebar, we'll notice that it has a well-defined structure. Each widget is inside a wrapper element, which in this case is an HTML section. Each section has its ID and it's CSS class. We also notice here that they all have a heading. Elements are heading our HU style. Well, now we're gathering port in information for all the other arguments we're gonna be using in this array. For the before rigid argument, we pass the HTML elements that will serve as a wrapper for each sidebar widget. For 2016, we saw that a section tag was chosen. In our case, let's pass a DFT DAG with rigid wrapper class. We can be much more specific and included CSS ID for example. But for this lesson, let's make it simpler. If you want, you can take a look at the native WordPress themes and checkout how they do that. For the after rigid, we just close the HTML tag, the opened above. The last two arguments will be respectively before underscore title and after underscore title. For before tidal, we pass the heading tag for each sidebar widget, rice-based H2 tag with a class called Widget Title. And in after title, let's close out the H2 tag. Alright, we have all the structure you need to register end-user first sidebar. Let's go over to the dashboard and activate our theme again. And now if we hover over the appearance menu, you have the widgets option. Let's click on it. And here on the right side, you can see the sidebar recreated. As I explained to you. We got here the wages, title, and description. Great, isn't it? Yes, it's so cool that we're gonna create one more sidebar. This time, it will be used on the blog page. To do this is very easy. We just copy this entire registered sidebar function. Be very careful because we need to copy that semicolon, 20K and less space, everything down here after that semicolon. Now, we just need to change some values here as go ahead and change the name, the id, and the description of the second sidebar. Rest of the code may look the same. But if you wish, you can change both the tags and the ID's of each element. Let's save this. And now in the dashboard we have the second sidebar. Before I finish this lesson, I need to give you all a warning. There are lot of students making mistakes when writing the code for the widget areas. And the problem is always the same. So be careful when typing in the arguments, especially these ones here. Pay attention to the quotes, to the underscores. Shut away, the tags are being closed. Otherwise you likely end up with broken HTML. Well, that's it for this lesson. In the next lesson, we will continue to talk about sidebars. You still need to place the sidebars within the theme. And that's what we'll be learning how to do. Simulator and happy coding. 23. Creating and adding sidebars (part 2): Hey, what's up, guys? We're back here with another lesson in the last lesson started butin our first cyber. We stopped at the point where we were beauty. The structure of each over two sidebars Notice here in the region manager that we already have the two sidebars area created. However, if you add some widgets in the sidebars, nothing will happen. Let's, for example, and the text widget in the sidebar that is going to be placed on the themes home page that's a title and some random next here. That's safe. Now, if you look at home page, nothing has changed it. The same thing will happen with a cyber that we're gonna add on the block page. The problem, as always, is that we need to tell WordPress where are sideburns were replaced. And this has to be done inside some template fire. So let's start by creating new fire here in our themes folder, this fire will be called Sidebar. Don't PH. B Inside this file, you're gonna add the following coat is is active Sidebar, sidebar. One What you're doing here is testing. If there is any active region inside our sidebar, if it's true, Let's call a function here. Dynamic sidebar. Cyber one There is if there's an active region in the sidebar named Sidebar one below the contents off that cyber. Excellent, but it's not ready for this new fire to be useful, you have to include it somewhere on our feet. But where? Well, let's start with the home page. We want to include our new file here where you see this sidebar text, of course. OK, but how do we require a file that contains a sidebar? Very simple. Just use a WordPress function called Get on the score sidebar. By doing so, when we below the home page, we will see some results. Look, we have our tax reject with the title and also with the contents that we added on the region. Great. And now how can you do the same for the second side? Were the one that we want to display on the block page? Do we need to use the same sidebar? That's PHP file? Is it possible to create shoes? Sad burb watch PHP files one for eight sideburn, and my answer is, Yep, another for this to work. Let's rename the sidebar that speech before. Now it will be called Sidebar hyphen home dot PHP. We will Onley used this file to add the side bar of the home page template. Sounds out years, doesn't it? It's because it's really obvious. Let's copy the entire content off this file and paste it into a new file. This one will be called Sidebar hyphen blawg dot PHP. Now just replace the name of the sidebar inside his new file. Otherwise it will load the same cyber as the home page. And it's not what we want. Now. I have two files. One off them adds a side bar to the home page template. The other one adds. The second side were If you only be displayed on the block beach now to finish out, we need to pass the string to the get sidebar function here in the beige home. That's PHP file. We add the word home inside the get sidebar function that's copies here and ending the X file. Let's space what we just copied here at the point where we want to call sideburn. Just take care to change the name of the template. We shall now be blawg that is here At this point, the filing clothes is this one here. Sidebar, hyphen blogger dot PHP and our problems are solved. Let's head over to our dashboard and add some widgets to the block page Cyber that said, Um, an archive of Egypt and, um, you categories midget. Now let's see. Here on the home page we have the text regions and on the block page, we have the two week it's we just added, Very cool. See how much power the sideburns bring to the side owner with them, the user can at whatever we just he or she wants. They can even download their favorite regents or blood ins and use them as they wish. Okay, to finish this lesson, let's make Treem or modifications here first. How about the change? Decide buyer here, Let's move it to the right side of the page. Right To do that, I'm going to cut these aside stag and paste it after this closing gift bag. Sublime text makes this really easy, since it shows me exactly where the stiff ends. The second modification that we want to do is Gary it off the elements we don't want on the block page for example, on the blood page. We don't want the slide section and also the services section here. They'll only be displayed on the home page, so I'll go ahead and remove these elements here so I don't want them here. And the last one that's at a bootstrap for class. To this aside element called H 100 the Sioux calls the height of the aside elements not to spend the entire height of the page. We can do the same for the aside tag on the page. Home that PHP file. Okay, excellent. Let's save reload page Perfect. It's working something's implement sidebars in a different way. For example, if you open the 2017 thing, you noticed that first of all, it performs a check here. It's saying the following If the sidebar named Sidebar One is not active, notice the page. Be not operator Richard, that is, do nothing else. If we get this far, we do have Richards, and then it actually includes the sidebar inside in a size Dag. In our case, we choose to add the asides that outside of the sidebar fire itself so the aside stag will always be displayed. It doesn't matter if have content or not. In cyber, in turn, the 2016 thing does the same way I do. The only difference is that it uses the aside stack inside the fire too. Well, these are possibilities. And you, as different developer, can choose the one you like the most. The important thing is to know how to get here. Exactly what I'm teaching you at the moment. So for now that so I went for you there in the next lesson by 24. Creating our Services Area Widget Area: flow guys into these lessons, I'm going to show you one more thing we can do with the WordPress Regis areas. In previous lessons, we used this widget areas tribute. Sybers, if you choose sad birds one for the home page and another for the block page. But we can have more than simple sidebars. Don't let the name fool you. Today we're gonna be creating three widget areas. Tribute This service section here Notice here that in this service section we got three items. Each of them is made up by the same elements. An image, a header in the progress. Fortunately, WordPress has all the features that allows us to create this area. And we can do that just by clicking and dragging elements. There was a region that allows us to insert an image and there's also a region that allows us to create an area with a header and a totally customized content. So why not use this widgets to create all this year? One future I've always missed in wordpress is a native region that future. What you see is what you get side editing area. There are several places on the dashboard where this type of editor is there by default, for example, in The Post Editor. But in two version 4.7, there was no native widget to do the same thing from this version. 4.7 new widgets were added ching quid for mata text, images, video and audio. All of them are resources that the word breast community requested. And that and Children, we're only possible to implement using plug ins. Great, but enough small, tall can. Let's get down to business. The first thing we're gonna do is Butte, the HTML markup off the service section. First of all, let's open up the page home that PHP file. And we want to remove this word here. I'm going to use the Emmett Extension to speed up my work. As you all know, you can write everything faster with it. I just I pee in the classes I need and then hit the tab key. Now, before the start of the row, I'm going to create a new header, and within this role, I'm gonna create a markup for the three elements and nature place here. By doing this, I create all three lives, all of them with the column sizes. I won't and now to close out within each day. If I'm going to create a narrative with services. Iten class. I can easily do this by holding the control key or a command on a Mac clicking like this and type in the code for the three gifts at once. Okay, accident. I already have the requires my cup. Now let's create the three widget areas within the functions file. I was looking up that file and now to greet the three new Egypt areas. Let's just copy and paste this last portion here three times. Just be careful not to copy anything wrong. For example, we have to copy from the word register sidebar to the Senate calling here. Okay, now we just changed the values for name I. D and description arguments off each of these areas. Let's leave the HTML rappers the way they are, okay and save everything. Now go back to the WordPress dashboard, head over to the appearance menu Regent's, and now we have our three new agent areas. Now it's pretty easy. We just have to know what we just We need to visually compose our service section for all that we just need to very simple native widgets. One of them is this one image and the other one the text widget. Let's click and drag the first widget to the first digit area. See that it allows me to add a title and upload an image. In our case, I don't need a title. I live it. Auntie and dis upload an image to complete the design off this area. I already have three images ready each with a wave and height off 200 pixels. So I'll go ahead and grab this first image. Okay, Now let's drag text widget. This time I'm going to add a title which will work as a heading element for my design. And here in the content, I'm gonna paste any damage text. Okay, I'll say this here. Let's go back to the base home. That's PHP file. And we want to say the following open PHP tax if is active Sidebar and what is the name of the first wages area? Its services. One dynamic side wear and the widgets area name again. Let's copy this here and call the next region areas. I saved this here and refresh the theme. Home page A look. You already have all the elements of the first digit area here. Excellent, isn't it? Well, since it worked, let's go back to the widgets manager and do the same for the next widget areas. I'll speed up the video a bit. Okay. Now, back to the theme accident. We now have all the elements of the services section here on the page, all the images, all the headings and the content. Of course, it's a bit ugly, but that's something we can solve easily with a bit of CSS. As of mention, it seems the beginning of the course will not focus here on CSS only on features that relate directly to WordPress. So in the next lesson, you'll see this. Yes, exchanges, I'll be applying. But of course, any changes I make here will be in the files I'll make available for download anyway. Don't means the next lesson. As we're gonna learn how to create a custom loop within WordPress simply one of the most interesting subjects so far in the scores. That being said, I wait for you in the next lesson, and you then bye 25. The powerful WP_Query class (part 1): Hello. We're back here for a new lesson in this lesson. We're gonna talk about this So called WP query. Well, for those who have never heard of it, WP query is a very powerful WordPress class that allows us to make a modification to the default WordPress loop, sometimes called the main query. And you make asked me, Marcello, what is that Default? WordPress loop. I've never heard of it too. Well, every time you open a page or opposed, what we see is this default WordPress loop in action. So we already know it. We have already created one of thes loops in our index file which generates supposed listening force. That's on our block page. But as the name says, we're talking about a default look that at times that we want to change that. Look, if you want, you have a visually different results. For example, if you look again at the design off the home page of theme were beauty, we can see that it has this section where we have this future news. It is followed by this to other secondary items with the fourth WordPress loop. We cannot achieve this, and why basically because we need to loops on the same page to achieve this result. WP query is a class that allows us to make changes to this main query and have, as a result, something like this. Okay, But before we start writing any cold, let's start by showing some things that I have prepared for this lesson. Well, in addition to the CSS modifications made here to the services area, which you can see later in files available for download has made some minor changes in the back end. Let's go over to the dashboard. The first thing I did was modified the post titles for some of the items we have already created in other lessons. So there's nothing new here. Okay, so we're going to start by opening the file, which is our home templates. At this point, everyone is tired of knowing that that file is the page home dot PHP file. The first thing we're gonna need to create is the HTML markup. It wont to create a new role inside the new section. Well, why do I need to create this role here to answer that? Let's take a look at our layout as you can see. This entire region here is already in a row. Within that row, we have these two columns. One is the sidebar with three columns, and the other is where our news will replace with nine columns. Now, here in this news area, we're gonna have another column division. Let's imagine that this Nero also has 12 columns. We're gonna have a news item that you occupy a space off trail columns in this new row and here below. We're gonna have to more news items, which will occupy in six columns. Did you see it? So we need a new role here. It's a basic bootstrap room. It has nothing to do with WordPress. Okay, this is just html and CSS. Okay, for each news will be creating a new WordPress. Look, the 1st 1 is gonna be used for the future item, and the other one is gonna lows. The other two news items and that's the advantage off WP query. As you see in the next licence, it allows us to have more than one WordPress look on the same page with different parameters for each one. Okay, since this topic may be a little difficult to understand. I'm going to divide this lessons into four parts to make it easier for you to understand. I'll try not your Russian things. So in the next lesson we come back and you understand in practice how to create this custom queries in WordPress. So see you later. 26. The powerful WP_Query class (part 2): hello and begin up where we left off in the last lesson. That's creator of first custom query inward breasts. Before we begin, let's create the HTML markup. First, let's remove this paragraph here, and we need to create a bootstrap row here. You remember why from our last lesson, and inside it, I sat a container. Let's open up the beach. Be tags here. We're going to create a variable to identify the content we want here, which will be a future news item. So let's call this variable future. If you have some little knowledge of object oriented programming, you'll not have much trouble understanding what I'm going to do here if you don't pay close attention because it's not that difficult. In the end, everything will look like ingredients of a cake recipe. This variable will be a new instance of a WordPress class called the Will You Be underscore query. I didn't find this. We use the new command and passed the class name. Should there will you be on the score? Query. This is what we call class instance, or a glass object. It will have access to several methods and also to the variable off this class here. But don't be scared, OK? We already know some methods off this class. For example, half bows and the post are all metals off this WP query class. But you'll understand that better as we create everything. Okay, What kind of value do you want to keep inside this object here? We're gonna keep the category to reach the news belong. We can also save the category that we want to exclude from the list, for example, that say, we don't want news coming from the social media category. The advantage off all this is that we don't need very deep knowledge off my sequel. That is, we don't have to make a single select to get information about database about posts, about Bages, tax enemies, post types, etcetera. There are two ways we can get this information. One is using query strings. Acquire String is something like this with Besson argument and its value here followed by 10% and the new argument with its venue and new and percent and so on. And Jimmy gets to the end of the least of arguments. The other way is through an array and I'll be showing you both ways. Let's start with the first method that off the choir a string. So what we want to fetch from our database? Well, we want a certain number of posts, certain categories. The first argument You're going too fast, then is boast on the score type. The both type here in the case is supposed it could be a paste you, but for now, your own interested in posts the type in an 8% and then we have a second a Roman. How many post we want to submit in this case? Since we want only one post, which will be our future news item, this argument will have the value off one so posts per page equals one. Now the future news items belongs to which category. We have at least two ways to indicate this. Here you can use the cat argument or category on the score name. The difference is that for the cat argument, we would pass only the category in numeric i d. But for category on the score name, we would have to pass the category slug. Right. But how can we retrieve these two information? Very simple. Let's go to the dashboard head over to boasts categories. If we hover over the link for each category, pay attention to the link that is shown in the lower left. For the Web development category, we have the I D, which is four for the Web design Category 11 for Social Media aide Just pay attention. Since your WordPress installation is different than mine, your ideas may be different to okay. Otherwise, if you want to use the category name parameter, you can grab this leg that we have here in the category table. We can work with both arguments, but in this case, I think we'd better go with the cat element because the category I d will never change. Meanwhile, this leg can be changed in the dashboard very easily, so I stick with the category I d. Let's pass the categories for in 11 and leave lt category number eight to best more than one category Inside query string We separate values by Commerz, and now, as we defined the content we want to fetch let's beauty WordPress look. He started if have boasts while have boasts. The post, however, seems for working with the custom query have to indicate first which class object has to data coming from the database. In this case, the featured object is the variable that is doing this. We have to pass it here before the name of the functions, half boasts and the post followed by a small arrow which in fact is nothing more than a hyphen integrator than sign. I'm not going to explain technically what's happening here. But the important thing to remember is that whenever we're creating the custom query, they have to pass the object variable, followed by the little arrow before half boasts and the post functions that's closed the wire block and the east block as well. Right now, what's happening here is that we're working with a copy off the original WordPress loop. That copy is represented by this future variable we created here. It will give us a huge power since we will be able to work for the same methods used by the original WordPress query, such as half posts and the Post, to make the modifications to the query parameters such as the number off returns boasts, which by the fault, is 10 posts. And here we changed to just one post any way we can control several things using this copy off the loop. But his ankle band says, with great power comes great responsibility. So we have to pay close attention to not matching up with the Defour's WordPress Square UK . To do that, we have to reset this custom query and restore the main query. To ensure this, we're gonna use a function called WP reset post data at the end of our modified loop right here after the And while be very careful because this is very important. Not using this function can lead to unexpected results. Okay, Well, so far we've learned to create our custom loop, but it only fetches information from the database, but it still doesn't show anything on screen. In the next lesson, you'll learn how to do that and show everything you want. Old screen. OK, so see you later. 27. The powerful WP_Query class (part 3): Hello. In the last lesson, we created our custom loop, but it still doesn't print out any information on screen. So what you are going to do today is tell WordPress which fields we want to be fetched from each post. To begin this lesson, let's take a look at our layout. Well, let's understand first what we want. Here. We defined that we want the post image, let's call it the featured image. And just below the author link category, the tags, the publication date, and finally the post excerpts. That is the first 55 words from the editor content text area, followed by ellipsis. A couple more information before we begin. If you look at the dashboard in our post table as open one of the posts, for example, this first post from the web design category has made some modifications to the content, but nothing so important, only that the content is a little different. And also that there is a featured image for every post from the web design and web development categories. Those modifications are only to illustrate what you're going to learn today, right? And don't worry about the fact that this is supposed to be the image format, okay? This one fact that final result, and it's just a hypothetical scenario, right? Okay, going back to Sublime Text, make our look cleaner so that the code itself becomes more readable. We're going to use that gas template part function we'd learned in previous lessons. So let's do the following. Let's close the PHP tag here after the post. Since it is from here that the post content will be brought. And we're gonna re-opened the tag just below. So the content would be inserted here in the middle. That is everything that is here. At this point, as you already know, you'll be repeated because here we've got a loop. Let's go ahead and open a div tag here. Let's pass the code 12 class here. As I have already explained to you, this future news will occupy the full width other new row we created inside that div, let's call the get's templates per function, and let's pass two parameters. The first one is going to be template hyphen parts, forward slash content. And the second one is going to be featured. There is we'll have to create a new file inside of templates parts folder called content hyphened features that PHP, SQL, this file them. Okay. What do you have in this file? Well, they want to make space to bring the post featured image. The authors link to category the tags, the publication date, and the excerpt. So speed things up a bit. Let's copy everything from the content dot PHP file and paste in that new file. Hence, we have to write less code. Let's add one more CSS class to the stack here. To do that, I'm gonna create a new array inside this post class function, add an argument called class and set its value to future. By doing this, along with the CSS classes generated automatically by the post class function will have warmed more code featured. Let's create a new div to load our thumbnail. Unless cat that code snippet related to the thumbnail. And we want to make some changes here. For the size, lifespan, enlarge parameter. And for the image to the responsive, let's create an array here, including the class argument. And its value is going to be IMG, hyphen fluid that will cause a bootstrap class cone IMG fluids to be included. Mts make our image for responsive. Now, down here, let's change the order of the fields that debt. Within a single paragraph. We're going to include each field. We want each of them inside the span tag. Okay, notice here that the publication date went down. We only have a single paragraph tag. Also, notice that for the tags function, we added a last parameter, including here the closing HTML span tag. This function accepts three parameters and we can add HTML tags here on the first and the last parameters. Okay, one more modification here. And instead of the full content, we only want the excerpts. Should do this, we replace the content with the excerpt. Okay, let's save this and let's see if finally we get any results. We load in the homepage. Here we get the image and the other fields to. Let's just check if it's really the post we want. C, as we excluded the Social Media category from our loop. Remember, what appears on the page is the first post from the web design category. Okay, let's see if the image is indeed responsive. Coherent press control shift I or on a Mac command option, I. Click here and see that the image is real responsive. Next step now is to bring the two secondary news. For this, we will have to create a second loop here on the same page. As you notice, this is only possible using alternatives such as the WP query class. But that's a subject for our next lesson. And she'll then happy coding. 28. The powerful WP_Query class (part 4): Hey, what's going on, guys? It's Marcella. Once again, today's lesson is the last one about WP query this powerful WordPress class that allows us to create custom queries. So far, we just created a custom loop. This look is helping us bring the latest posts on the home page, and that will be our first news item in this lesson. We're gonna build our second loop. We should bring the next two news items into the list before we start. I must apologize because there is in error here in the bootstrap CSS classes. The order is inverted. The correct order will be first the container class and then the role inside this container . So sorry for that. Let's just swap the classes now back to the explanation to speed up things that that I'm going to copy the entire custom. Look we created in the last lesson. So next we go ahead and change the name of her class object. Let's call it secondary hoedown. Commence the almanac Contrave on Windows or Lennox to find and replace everything at once. Okay. In the first loop, we used the choir string methods to retrieve the database information through the WP query class. Now we go to the second life filled using an array. What is the advantage of using an array instead of Aquarius drink? Well, the adventures is quite clear. Let's say that we have to pass several arguments through the crowd of string. As the number of Bergman's grows, it becomes more difficult to read and understand the commence to a point where you can no longer make mistakes. If there is a single mistake here, it will be like trying to find a needle in the haystack. Now, when the user race, that doesn't happen. Let's create an array up here. Let's call it arts and let's start adding the arguments here. The first argument is gonna be the kind of post we want to fetch. So post on the score type boast. In fact, this argument can be ignored. It is optional if you choose not to pass it. WordPress feel always considered that what we want our boasting did. It's most useful, actually when we have to work with custom post types. But it's not our case that's also passed here. The number of posts we want to bring in this case there are two posts. Now to fetch the post categories, let's do something different. Let's start by choosing which categories will be excluded from the list for that, let's best the category not in argument. Just pay attention because there are chew on the scores after the word category, right? So it's Category two underscores not on this court in Let's Go Ahead and create an array here and pass category aid became later passed other category separated by commas. We will also choose which categories will be included in the list. The opposite off category, not in its category. In once again with you underscores as great a new way, and inside it we want to pass the values for in 11. Thus, when new categories Air created, they will have to be added here as well. Now that we have all the arguments, let's just pass disarray to WP query class. Let's change a few more things here. First, the elements off this look will have six columns instead off 12. So let's have the Kohl s M six class here. It will make the diff techs have a live of 50% from small devices upwards towards large screen sizes and the name of the file that will be required here will be content. Hyphen Secondary Doctor PHP. Okay, the loop itself is ready. Now you need to create this file called content hyphen secondary dot PHP. That's short in this process up a bit by copying the contents off the previous lessons file and we're going to savour new file. Okay, here we Onley change of feel things, the tag article class, and we want to remove the publication date, and that's it. Okay, we now have a second row with two news items. All of that, thanks to your second custom loop notice. One thing, though, the first news has been repeated here. But what if it don't want it repeated? Is there a way to do that? Yes, of course. First, let's add another element, Kadouri and the argument will be offset when he used offset it. Tell WordPress how many items we wanted to ignore at the beginning of the list. Let's type in, for example, one that's reload, as you can see, nonetheless makes more sense. That's because WordPress ignore the first result off the list, which was the same post we have up here. If we change it to to this post here is gonna be ignored. And the 1st 1 on the list is gonna be this one here. Very cool. Okay, this is the last lesson own WP query. I hope you feel like you learn something new from the lessons, but don't stop here, okay? The BP query and custom loops are the most interesting topics in the WordPress thing. Development world. In addition to the arguments, we work this. There are many, many others. Go ahead. Visit Link that I left available in this lesson the curious and exploited full potential off this WP query class. You see that for every scenario, for every need, there is a way to use this class that you can benefit from another thing. What I taught you is just one way to create a future news list in WordPress, there are several relation to this. You find out Internet. Many people teaching how to do this neither ways wrong. So that's it. Then I wait for you in the next section of this course. Let's start bringing life to the inner bases of her thing. Jovan, See you later. 29. Including Permalinks: Hello guys. Welcome to a new section of our course. We're going to start by correcting the problem we have in our thing. If you hover over a post title or an image, you'll see that none of them has a link. So here on the homepage, for example, if you tried to click on any post a message or any title will not be able to get anywhere. It's very sad. In today's lesson, we're going to solve this problem once and for all. But before I go on with this lecture, certainly notice that each of the titles in the new section has changed a bit. You can have access to all of the changes, of course, in this CSS file, the theme which is available for download, just copy the code snippet corresponding to the section on right. Now back to the subject of today's lesson. Okay, first, we gotta figure out where we need to make the changes. Let's open up the Page home dot PHP file. And here in the file in our CIO loops, as you remember, Jew files have been required. And it's within these files that we can find the pose contents. Let's start with the content Future dot PHP file. Well, in this file I have a div tag for the thumbnail and also an H2 tag where the post title comes from. This is where we had to change. Well, to create a link, we're going to use an anchor tag. Let's create it here within this div tag. Let's go ahead and cut out all the content from the feature image and paste that here inside the anchor tag. Now here's the secret inside the HREF attribute. Let's pass a WordPress function called the permalink. Permanent in WordPress and nothing more than URLs in which a resource or article will be permanently saved. To put it simple, permanent are all the links for posts, pages, et cetera. Let's do the same thing now for the H2 tag. Another thing we can do here is placed this H2 tag below the featured image so that the thing can be as similar as possible to the initial layout. Okay, now we can say, now, as you can see, we have the featured news link, both here in the picture and here in the title. I can do the same thing now for the secondary row. To do this, open up the content secondary dot PHP file. As the content will be the same. It can copy the changes we made in the other file and paste in here. Let's say if now. And now, we also have the links for the secondary news items. See, if you click here, you can already get somewhere. Now we can do the same thing for the posts that are being called on the blog page. If you visit that page, C, We don't have links here either. For known of the items. These posts here are being called by that loop that we have inside the index.html file. And in this loop, as you remember, at least I hope you remember, we are requiring three content files, which are these three here, as open one by one. But its time is going to be easier because we already know what to do. So let's go ahead and copy only the modified H2 tag of this file here. And I spaced in niche of the files. Let's do the same for the thumbnails. Okay, everything's saved. Let's see how the blog page looks like. Okay, everything's fine. Now look again the links in all the posts. Very good. In the next lesson, we will continue on. Now that we got links. We will learn how to create the single view WordPress template file. So see you then. 30. The single.php template file: Hello, guys. We're back for a new lesson today. We're gonna learn what is the single doctor PHP file and how we can create it. A hint. It's one of the most important template files in WordPress. Let's start its lesson with a quick recap in one of the first lessons off the scores, I told you that when the pages of a word pressing are opened, a mechanism called the template hierarchy comes into action. According to this hierarchy, there's a main template file, which is the index dot PHP file. But now I think every one of you know that the content of this file is always displayed, especially when WordPress doesn't know which file to load in a given situation. For example, which file will be loaded when someone tries to open a page that doesn't exist in the thing ? Which file will be loaded when someone performs a search For those two moments, we may have specialized template files. In the case of a page not found, we may have a file called 404 dot PHP, which could have inside it the conch insane. For example, hoops, the page you're visiting doesn't exist. Do you want to do a search or return to the home patients that. But what happens when they don't have a file called for for that speech? Be in our theme. Well, what happens is that WordPress doesn't know which five to load, and so that the user decides Visitor doesn't come across an empty page or press lows thing next dot PHP file instead. So being Dicks file is what we call a fullback file. This is what is happening right now in our theme. When we click on end link, that leads to a post. Since we don't have any specific template fire to load what presses load in the index dot PHP file for us. But the index file cannot be used in any which way. Because of this, we can create a different thing. Place fire to show a single WordPress posed a unique post, and that file will be called single dot PHP. So let's go ahead and create the style and like everything plate file. Let's start by creating the get header call. So yet on the score header. By doing this of any click on a post, you'll see that we have our header and down here that's called the Footer. Now anything we type in here will be displayed every time I click on any Lincoln opposed. Look, OK, but that's not what we want. What I mean, it's great. Here is a look that can print out the Post contents, and this time we'll have a standard WordPress look. Okay, no custom lips for now. Before that, let's great our HTML markup that's had a tiff tack here with the I d primary and inside it another def tech with the I d off main here. We're going to create a container so that our content is always centered on the page and the loop is going to start here. The only difference is that we don't need the part that says, If have posts, can you answer white? Well, the answer is pretty obvious. We are already in the post, so we don't need to check for pulse. Right? If you're already displaying a single post, why do you need to check for posts? It makes no sense at all, so we start up. They don't y block while have boasts the post, let's close out the wild block with end vile. Now, here at this point, we can choose to load the full count. It exactly here are creating a new file for it as then create a new foul as college content hyphen single dot PHP and require it through the getting click part WordPress function To speed up a bit, I'm gonna base here the contents off this file from this coat. The only thing you'll never seen before is this section here. I'm using a WordPress function called the I D to display the world post hyphen, followed by the idea of each post. This can come in handy when we want to style each specific boast. In addition, we created a header with tidal notice that the title is within an H one tag and since it is the main heading tag off the page and it doesn't have any things since we don't need the link anymore because we are already inside the post here below have the full counted of the post, and that's it. Let's save this file. And when you open a post link, they have a new view for our single post. As you see, you got a totally different look when compared to the view over have before. For example, before we had the post featured image which came from the index that beach before. Now it don't have any image. And instead of the post excerpt, what they have is the full content of the post. This is not working for all the places where we have links that lead to any WordPress posed goes in it. But there's still something missing. What if our visitor wants to comment on our post? How will he or she do it? That's what we'll be learning to do in the next lesson. I wait for you then by 31. Allowing Comments: Hello everyone. Welcome back. In the last lesson, we'll learn how to create a different view for each unique post of our fin. In today's lesson, we go a little further by enabling a comment form for these pages. First, let's open up one of her posts for editing. I'm going to show you something that goes unnoticed for most WordPress users. Here at the top, I have this little drop-down menu screen options, which most people don't even know about. Just so you know, in the new WordPress editor, you can find this menu in a different place. You just click here on these three little dots and choose options. In this menu, you'll notice that there is a series of check boxes. Each one of them allows us to enable or disable some editing area here of the page. In fact, we call these areas mailboxes. So every check box here lets you hide our show mailbox. One of these mailboxes is called Discussion. I'll show you here on the page. It's this one here. It allows us to define whether comments will be opened or not for a specific post. If it click here, we end up disabling comments for this particular post. Less uncheck this and say we don't want comments for this post. So no visitor can comment on this post. Okay. Same thing works for pages. They may or may not allow comments for any pages within WordPress. Well, this explanation is important in order to understand the code that you'll be using. She call the comments form within the post and thus allow visitors to interact with our content. So let's open up our single dot PHP file. And here, before the loop is finished, let's perform a check. Let's create an if block. Let's close it out here with an endif, so we will not have any problems in the future. And here inside the parentheses, we want to check if comments are open for the post, which is the one that is being displayed at the moment by the WordPress loop. Let's also call another function that let us know how many comments we have for this post. Okay? If comments are open, we're going to call the comments form at this point. It do this by calling the comments template function. Well, what this function basically does is render a standard comment form on the screen. In order for this to work, you need to have a file called comments dot PHP at the root of our themes folder. If you don't have that file, WordPress for user fallback file. It has the same name, comments dot PHP, taken from its default theme. That's one of the reasons why removing this default WordPress themes is not recommended. You'll never know when you need them. So what we're going to do now is to get a copy of that file taken from the 2016 theme and create a new one at the root of our themes folder. If you don't have the 2016 theme installed, you can download a free copy of the thing in WordPress themes directory, a recommended to use this particular thing because it doesn't contain any specific function that you need to copy in order to use it. For example, if you open the 2019 thing, you will find a couple of specific functions such as 2019 gap discussion data, 2019 comment form, or classes such as 2019 Walker comment. I mean, all of these functions and classes that has the thing's name on them. All of them are within the 2019 Themes folder. So if you don't copy the original functions to your own thing, the comment form will not work. By the time I recorded video, the 2016 theme has this advantage. There are no specific functions within it, so it can take the whole Comments.find HB file with no worries. If in the future that scenario changes. Remember, you need to copy the function declaration to your own thing in case you have doubts doing it, please do. Ask me and I will teach you how. For this lesson, I'm not going to create a new market for this file, but it can do that later as an exercise again, of course, if you want to try. The fact is that many themes developers do the same. They just make a copy of the default comments template file and add it to their own themes. And there's nothing wrong with that. Actually, many things that can be downloaded from the WordPress repository itself are made this way. So I'll go ahead and create a file called comments dot PHP and paste, everything you just copied in there. Let's save this file and let's open a post. We start by opening up posts where comments are allowed. For example, this one here. Look at this. We have now our comments form. As I'm logged into the site, you see that the form is displaying like this. Now, if I log off, they have a slightly different form. And now you see a firm with different fields. Now if I want to comment, I have to give more details like my name, my email, et cetera. Now, let us choose that post. We decided it wouldn't be open for comments. And as comments are not opened for the spores, we simply don't have the POS form displaying on it. But if you want to change them, let's open this pose for comments them. Now reloading the page. We have the form to make comments. But if your thing is not