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

Advanced WordPress Theme Development with Bootstrap 4

Marcelo Xavier Vieira, WordPress Theme Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
64 Lessons (8h 40m)
    • 1. Introduction

      7:03
    • 2. Installing XAMPP

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

      6:02
    • 4. Installing WordPress (Best Practices)

      9:53
    • 5. Template Hierarchy and Template Anatomy

      10:26
    • 6. Creating and activating our first WordPress theme

      7:29
    • 7. Activating our first WordPress theme

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

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

      4:32
    • 10. Enqueuing stylesheets the right way

      12:44
    • 11. Ιncluding Bootstrap 4 (part 1)

      8:01
    • 12. Including Bootstrap 4 (part 2)

      5:33
    • 13. Creating Menus (part 1)

      9:28
    • 14. Creating Menus (part 2)

      7:48
    • 15. The WordPress Loop

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

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

      8:13
    • 18. Adding Theme support (part 1)

      11:14
    • 19. Adding theme support to Post Thumbnails

      11:27
    • 20. Getting template parts

      4:14
    • 21. Adding theme support to Post Formats

      15:49
    • 22. Creating and adding sidebars (part 1)

      13:51
    • 23. Creating and adding sidebars (part 2)

      8:12
    • 24. Creating our Services Area Widget Area

      8:13
    • 25. The powerful WP_Query class (part 1)

      4:12
    • 26. The powerful WP_Query class (part 2)

      8:01
    • 27. The powerful WP_Query class (part 3)

      7:02
    • 28. The powerful WP_Query class (part 4)

      7:40
    • 29. Including Permalinks

      5:06
    • 30. The single.php template file

      6:43
    • 31. Allowing Comments

      7:39
    • 32. Search templates and forms (part 1)

      4:39
    • 33. Search templates and forms (part 2)

      5:58
    • 34. Search templates and forms (part 3)

      4:10
    • 35. Handling pagination (part 1)

      7:17
    • 36. Handling pagination (part 2)

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

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

      5:14
    • 39. Including a 404 error page

      6:17
    • 40. Basic SEO Techniques

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

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

      9:27
    • 43. Creating Contact Forms with Contact Form 7

      9:05
    • 44. Including a Map without Plugins

      7:04
    • 45. Setting up a Social Networks plugin

      6:03
    • 46. Including a Responsive Menu

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

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

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

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

      9:15
    • 51. Theme Internationalization (part 1)

      4:21
    • 52. Theme Internationalization (part 2)

      15:19
    • 53. Theme Internationalization (part 3)

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

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

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

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

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

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

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

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

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

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

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

      14:43
12 students are watching this class

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)

Or…

"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)

And…

“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!

Transcripts

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 WordPress.org. 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 WordPress.org 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 look ISS and what are the advantages of using it within WordPress scenes ? The WordPress loop was responsible for creating this section here, which shows one of their posts. And actually, this is a beach and also this post link on the blood beach. In this lesson, you're gonna learn how to make some pages look different since not all of the pages on the side will be created equal. So just a quick recap. In the last lesson, we had a problem yet to be solved on a visit the home page, for example. We see that it brings to us ecstatic base 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 home page is gonna be very different from the other pages, is gonna have a sideburn and new section services is like a map. On the other hand, the about us page it's not gonna have any of them. There will be no sidebar, no slide, no man. But how they're going to do that? Well, we have to bring to you a new concept called template pages. There are two ways we can create such thank plate pages. One of them is creating new PHP files with the name of our bases in it. For example, if I want to create a specific base 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 home page as I'm going to show you now. Home Page 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 thing folder and you file Let's save it. And here is the magic. The name of this file needs to be page hyphen and this leg off the base sewage this fire first year. 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 The only exception is the pace Satchel be the home page. You can see it's like here, but this leg is home. So for the home page, this name is gonna be beige hyphen home dot PHP. If it were for the about us page, it will be page hyphen about hyphen as that ph b things about hyphen us is this. Look for the about us page. What we want to be shown on this home page. Well, to make this faster, let's copy the contents of the index dot PHP file. The new file was still have a culture to get head of function, the get food function and in tomato, a dynamic area. Let's go ahead selecting copy everything a space, everything here and just for you to notice the difference, you're going to delete that loop and create a paragraph in its place that's safe and reload the page. Look, see that the space is surrounded different from the others. This is the page we created using a specific file called beige hyphen home dot PHP. This pace we'll have a logo services cyber Matt copyright. The way is to find in our initial layouts, remember But what about the about a speech? What can you do to create it? We can use the same strategy. I just start that is creating a file with the page name in it. This name would be Beijing hyphen about hyphen us that PHP flushed greatest file. Let's copy the same content from the index that PHP file, and she'll make the space look different. We want to delete the DIF tags in sections we don't want on this page. I still eat this content. Now. When you refresh the page, you see that it would be totally different. Now the about us page as fellas, the home and blocked pages are different. Another way to the same thing. We just did desecrate a template page file. The difference between creating a template file and the file with the page name, for example, Beige, about us based home. It's such a is that template pages can be reused as often as we want for whatever pages we want. For example, I could create a page stay 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 want to be the same. But the positioning of the elements, for example, will be the same. For example, if a page has a left cyber, the other page will also have a left cyber. But the content off 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 conflict page. Do you think you can do that? I think so. Think of this only as an exercise, Okay, since we'll be adopting another strategy to create both the contact and the about us page in our next lesson. So once you 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, you're gonna learn how to create template pages, but in a different way. We're gonna adopt this strategy for both the contact and your about us. Page is Are you ready? So let's go. Let's start by removing this file here page about Is that beach be, since it will not be used virtuous any longer? And now let's create another file with a very different structure. Still living are things folder. We're going to save this file and its name is gonna be general hyphen template dot PHP. Let's use a comment structure that for President a magically 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 reused. As you see, I start by opening the PHP tags inside them. You 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 well the structure of this general thing play to look like again, let's grab a copy of our index dot PHP file l espace the content with Just copy it into the new template file. Okay, we cannot start excluding sections. And if 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 we don't need column classes as well. For 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 gonna add the de about a speech, and here you'll notice something we didn't have before on the right side. Here in the page attributes a few it called Template appears. And as the templates based, we have to default template option, which is now selected just the princess in this explanation. What is this, the fourth time place you may ask. Every time you hear this name the fourth thing plate, you have to think off the index dot PHP file. This file is always considered by WordPress as the defaults template, hence its importance. Whenever WordPress doesn't know how to display content in the front end it you use the default simply. That is the index dot PHP file. It's a fallback file. Very important you were breast seems OK now closing out the princes and coming back. We can say that the space is going to use a different thing. Please page not the default one based on the index dot PHP file. If you 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 he 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, that's choose again the same place page we created. 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 has many thing play pages I want. In fact, I want to show you something curious. Most of the things that downloads from the WordPress repository have several templates. For example, you can choose between the template page without sidebar, another template with a sidebar, another one with three columns, etcetera. This can variety from thing to thing. Also, most of the things that call themselves multi purpose themes adopt this strategy. For example, this thing here it's multi purpose because it allows the site owner to choose between different home pasting plates. For example, this home page here that we're seeing now looks different from this shop home page template . But in fact the in their 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 home page. But let's go back to our theme. So let's go ahead and update this page here and see how it's shown in the front end. Look at its. 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 on Lee. The structure is the same. The content itself is not. For example, each one has a different pace title, but they are both in the same space. Same phone caller from size, etcetera. 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 look will be removing the publication date. The offer, the categories and tags sings. Pages don't have these items. Let's save this file. So let's have some dummy counted inside this pages. An update again. Okay, that's it. Now, any content we add on these pages will have a similar layout, since they follow the same thing plate and how finally, all over pages look different. We have the about a space and the context paste that follow a template based structure. The blood page that has the post list and follows the defaults template. That is the index dot PHP file and the home page, which follows the convinced of a file called Page hyphen home dot PHP. But Marcello, could I turn the page home that PHP file into a template five a spell? Yes, for sure. In fact, many things do this. It depends on your liking. Now, at least you know how to use all this yours available. Choose the one you like the best or the one that makes the most sense for your thing and applied. In fact, it can go ahead and turn your page home. That's PHP file into a template file. But just for the sake, as an exercise thinks we'll still need that file. In the next lesson, you come back talking about another subject. We're gonna learn what a theme support is and she'll van happy Colding. 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 displaying any form, it may be that your installation is completely closed for comments. You can check many other rules related to the discussion within your site by going over to Settings. Discussion. For example, here I can define that my site will not accept comments. So regardless of the individual settings of each post or page, your site will never accept comments from visitors causing it. So I have an exercise to propose you copy everything you have in your comments that PHP file and make a new file out of it, and then make any changes in your new file. For example, you can move tags from one place to another. You can remove some fields, you name it, then call this modified file inside the commons template function. To do that, you can simply pass the filename inside single quotation marks, starting with a slash and see what happens. Let's, it will be back in the next lesson, which will then bees out. 33. Search templates and forms (part 2): Hello guys. In our last lesson, as you remember, we started working with the search template file. Based on our tests. We can say it's fully functional, but there's still the question. Is it possible to change the appearance of the search box itself? This is an important question since we didn't even create a form for this search box. Yeah. So how can you change the appearance of a thing we didn't create? Start talking about that. We're going to have to dig into some theory, but I promise it won't hurt. Okay? Now, you remember from the previous lesson that if you want to include a search box in our thing, use the get's search formed function. But in fact, what does this function do? Show ends to that. I have to take a look at the WordPress codecs. So let's search for this function and click on the first search result. Well, here it says display search form. We'll first attempt to locate the search form dot PHP file in either the child or the parent. They mean child or parent themes here. Then loaded. If it does not exist, then the default search form, you'll be displayed. In fact, that default search form is what we're currently loading, since we don't have any file called search form dot PHP in our thing that we know we don't. So by logic, it is enough if we just create that file in our theme. By doing that, we'll be able to modify our search form, our search box. So let's go ahead and create a file. Let's see if it's working. If it's working, anything we type in here will be displaying in place over search form by just typing test. And let's see what happens. Okay, perfect. This means that we can create a brand new form within this file with a different markup, et cetera. But before I do that, a hint. If you don't want to have a lot of work to do this, which is always interesting. It can open the search form dot PHP file of any native WordPress theme and copy it. For example, let's look at the 2016 theme folder and let's copy what's inside the search form dot PHP file. Let's paste everything in our new file. And now we can define what we want to exclude are to include here. For example, we want to remove this label, search for and rescue stay a tip about something and learned long after I created this course, removing the label information, especially these screen readers text fields, it's a good idea. They're very important for the website's accessibility. For the project. In this course, I will remove the field as you just saw, but remember not to do that in your next project. If you want, you can keep the field and hide it using CSS. The 2016 theme, for example, uses the following CSS to hide these fields, keeping them in the code. So moving now, all we have here is a form that uses the get method to perform a search. Notice that the input tag has a function called get search query. This will bring the search term back into the form every new search. This function is very useful. Later on this course, we will see more about it. So let's save and then reload the page. Not bad. But as you can see, the appearance is still a little ugly. To fix that, let's modify our Bootstrap CSS classes. And let's also replace this word here with an OK. Let's just save everything. Let's go back to the thing. Reload the page. So now it's much better. Okay, that's it. Now have a very simple search form. If we wanted, we could also remove this button, which will force the user to use the Enter key to do the search, but do not do that. Even because has already mentioned in this video, that is not a good idea in terms of websites accessibility. So let's apply that, okay? Okay, I have exercises to propose to you. The first one is tried to load the search form here at the sidebar. That's easy, but think a little. How could you do that? Second one is a bit more complicated, and I'll bring the correct answer in the next lesson. Notice that a moldy search results, we also have pages, not just posts. As you know, pages don't have categories. So here in the search results we have the word category followed by an empty space. How would you do to remove this snippet here for every search results related to a page, a hint search for a word press function called has category. In the next lesson, I'll be back with the answer. Until then. Unhappy calling. 34. Search templates and forms (part 3): Hey, what's up, guys? In the last lesson, I asked you to solve a problem that popped up in the search page template. Among the search results, we also have pages. And as you can see, they don't have any information about categories simply because they are pages and not posts. And pages don't have categories. So how did you to remove the snippet here for every search results related to a page, I asked you to search for a word press function called has category. This function returns true if the post within the loop has a given category or if no categories specified, it will also return to if it has any category. Let's open up the content search.html file. And let's play around with this function that we want to make some changes here, where we're loading the category the way it is now, we are displaying text category regardless of whether or not we have categories within the loop. To solve this, let's create an if else block right here. And inside the if block at the hes category function, it returns true. We're going to show you the category. This will always happen for posts, at least for posts that have categories, what most of the time is true? If it returns false, the code snippet that lows the category will not even be displayed. That's result we want. So let's test that out. Now for all pages related results like this one, the category doesn't appear excellent, okay, but we can improve our results page a bit more. One of the things that were press recommends for thing developers is that the results page also has the search form. So if the user wants to repeat the search using another term, we can help as open our search dot PHP file. And before our loop starts, again, include the search form. Again. This is very easy. It's enough if it just call the get search form function again. By doing so, we're going to have the form at the top of the page. Again. By the way, that's how you're going to add a third form to a sidebar if you wanted to do so. That's one of the methods available. Another thing we can do, create something that shows more clearly what is the search term for this page? We can include that before the second search form. For example, we can say search results for and here we specify what is the query string. To repeat the search query string that use the function we learned in the last lesson called get's search query. Let's do that. We must act it out. And now reload the search page. And again the query string here. That's very cool. Now we only have one big problem. Incidentally, a huge problem if we search only for an, a, yes, a nail letter, only ten search results will appear. But surely we have several posts and pages that have the letter a in their content where not this other pages displaying the answer to this is quite simple. They are heating, should reveal them. We need to find a way for WordPress to show the other pages. To do this, we need to understand how pagination works in WordPress, but that's a subject for the next lessons. So for now, peace out guys, bye. 35. Handling pagination (part 1): Hello guys, as I told you in the last lesson, now is time to learn how pagination works on a WordPress theme. Well, let's start by looking at the post we have in the Wordpress admin right now as head over to pose and click here. Now we're just open this page because I want you to see that currently we have 11 posts here. If you don't have 11 posts in your WordPress installation, just go head and create more posts so you can follow the explanations. Ok, well, now that you know that, let's go over to the frontend. Let's go ahead and visit the blog page. Let's see if we have all those 11 posts here. So 1234. Then look how strange only ten posts are displayed on this page. If my math is correct, one poses missing. So why is this post? Let's do another test. Let's do a fairly generic search. Let's search for all the posts that contains the letter a. You agree with me that most, if not, all, post, should contain the letter a, right? So we should have at least 11 results on the search page. If we take into account that pages are post types within WordPress, we can have up to more than a Level results. Well, let's check that out and see how many results we have. So 123. But again we have only ten posts. But why? Well, the answer, as ever is quite simple. This both are actually hitting. In order for them to be displayed, we need to enable pagination both in our index.html file for the blog page and other pages that may use the defaults template, as well as this search dot PHP file for the search results. Imagination allows us to navigate the other pages that at the moment are hidden. But first, I have to answer a question. Why do we always have to impose on those pages? So let's go back to the Dashboard. Let's go over to Settings, Reading. And here we see an option that says blog pages show at most, which has the value of ten. So let's answer. Let's change this value to five and see what happens. Reload this search page. Now I only have five posts shown here. And here in the blog page, we also have five posts. If there were pagination. As we have 11 posts, we should have three pages, two pages with five pose H N1 less page with only one post, right? Okay, we can have at least two types of pagination in WordPress. Again, first of all, implement pagination with links. This is the most common type of pagination and can find it on many websites out there. And we also have a numeric pagination, also quite common and quite intuitive. I'm gonna teach you how to create both types of pagination. Firstly, for the blog page, we're gonna create a pagination with previous and next lengths. For this, we're going to open our index file. And we have to modify this loop here. As you know, the loop goes from here, from the Y to the N wire. We're going to create the pagination links soon after the loop is complete. That is, since we have five posts for each page, are pagination will only appear after the loop brings this five posts. So here, after the end, while we're gonna close the PHP tag, open it again. And here in this space, we're going to create the necessary HTML markup for the pagination links. First, we need a bootstrap rule. And now let's create two div tags, each, but the pages class, which will then help us style the pagination later. This pages classes, not a bootstrap class arrived. It's Sonya, self-defined CSS class and Bootstrap classes. You have position each link. The first navigation link will be positioned to the left and the second to the right. So let's use the tax left and text right Bootstrap classes. This column classes will guarantee that both links will have the same size, each occupying half the screen. Now, in other forward pagination to work, Let's replace this texts with WordPress functions. First, I'll be including the two functions and then I'll explain them to you. Okay, you must be thinking, I did something wrong. How come the link pointing to newer posts uses the function called previews post link. And the link pointing to the older posts uses next postLink. This seems should be very wrong, but it's not. It takes a while to get used to the idea. I know. In fact, all this will make more sense when you see the result. So let's save and switch to the front end. Here on the first page, we have the link to the older posts. It's being generated to the next post link function. That makes sense because the next post on our list are actually the ones with the earliest publication date. Following this logic. If you go to the last page, we'll see they're the oldest post of all. And really, if you go back to the dashboard, you see that this post here is the oldest one. Instead, the link that points to the newer post uses the previous post link function. That's because the previous pose are the newest posts. Did you get it? Well, that's what we have for today. I hope you liked it and that it made sense to you. I know it's kind of weird at the beginning, but when you start creating your own things, you understand the logic and how things works. In the next lesson, we'll come back and we're going to implement another type of pagination for the search page. And she'll then happy coding. 36. Handling pagination (part 2): Hello. How's it going? Picking up where we left off in the last lesson Today we're going to include pagination on the search results page. Well, this time we're going to view the numeric pagination Those who didn't like the pagination we created in the last lesson You surely like this new one because it's much easier to create and you understand To begin this, let's open up the search dot PHP file which is the template fire for this plane Search results and again it once you create the pagination as soon as the loop completes. But this time we don't need to break the PHP attacks because the code we're going to right here is pure PHP. Okay, The function that does all the magic for us is called the post pagination. Pay close attention to the names of this functions. In this case, the correct is the posts, not the post. Okay, inside it. Let's open a nuri. This function has its own set of arguments. So let's go ahead and add them here. If you look for the function in the world breast Codex, we'll see that we have four possible arguments for you. We're going to be used on Li Chu for now at other following pref text and next next. The logic is not inverted here. Okay for the breath tax argument, Let's typing attacks that we want should be displayed and that can leaders to the previous page. So let's type in here previous and for next next less typing next the only this we already have a very functional pagination. Let's save. And now let's search again for the letter A and there it is awesome! Finally, we can browse through our search results. As you can see here we have this text but it can change it using one off the arguments of this function. This off course will be an exercise for you guys. If you visit the link for the WordPress Codex, the one that we visit in this lesson, you'll know exactly which arguments use. Just be sure to add another comma after the last element of the array recreated otherwise, you certain stumble upon an error. Okay, well, our bonus for this lesson. I want to teach you how to implement a post navigation that is a sort of pagination somewhere. Press things display with being posts But you guess you have an idea of what I'm talking about. Let's take this website here as an example, I am inside the post. And if I scroll down to the bottom of the page I have year link that points to the previous post and another link that points to the next post. How can he do that? In fact, it's very easy to begin with. Let's open up the single that PHP file. We have it open here. This time we're gonna add this pagination inside the loop, not outside loop, as we did in the two previous cases. We want this link to be positioning before the comments form. So let's open any post and I want you explain again what we're going to do. Take a close look. The links with state right here in this space here before the Commons form. Okay, so here in the file, let's close the beach be here, reopen it. And here we're going to create the HTML structure for the links. First, we need a new row and here you're going to have to gifts. The 1st 1 we received the pages glass. This is a name I chose to use. Okay. It's not any specific class that is. You can use whatever name you want. Now you're going to have a bootstrap class. And since this first link will float you left. You were using the text left. Bootstrap class. Let's copy this here. And we're gonna change here to text right and change the text to. Now, let's see what we have for now. Okay? It's this plane correctly. Now we need to know what WordPress functions we need here to generate each link. The logic is pretty much the same as the one we apply. It owned the block page. So for the last link, we used the next post link function. And for the right link, we're gonna use previews, boasts link function, pay close attention to this detail. The word boast in this functions is in the singular. So whenever you're creating post navigation links, remember that the function is in the singular. Okay, By doing this, we already have a great result. Look at us now. We can navigate between posts. Excellent. One thing I usually do is change the direction off this arrows here for this, I can use the first parameter of the stew functions. It allows us to firm at the link any way we want. For example, here in the next post link, I'm gonna pass the string with this value here. That is a narrow point into the left, followed by the link. And for the previous post link. I passed another string that is first the link and then an arrow pointing to the right side . It's much better now, more intuitive than you think, then that's it. I hope you enjoy this lesson. See you next time. But more interesting things about WordPress thing development by 37. Creating archive, category, author and tags page (part 1): hi there were almost coming to the end of the section in which you're learning how to create the inner pages off our thing. In previous licence, you have already learned how to create a single page in a search page. So every time I click on a post link or that we do a search, you have a different view. If you haven't created those pages, the whole view will be based on one file, which is the index dot PHP. I think you're very tired of knowing that, isn't it? But we still have some other template fires to handle. For example, when you click on the category, attack the offers name or as we'll see a publication date link. What's Loaded chewers is still the index dot PHP file. We can easily check this if install a plugging called show current template. This blogging is a great help for anyone who is a fin developer are in situations where you need to modify the thing that was not viewed by yourself. Let's then go ahead and install this plugging, and we don't have to set anything up because it's now ready to use. I go to the front and and now in the Alamin bar, you can see that there is this new option. It shows us the name off the main template file that is generating the current view. If you just mows over it, we can still see other template parts there are loaded along with the maintain plate. Let's go to the block page and look as I've been explaining to you for a while. The Block pages uses to the forts template, which is index dot PHP. As I said at the beginning of this lesson, this also happens when you click on a category link attack the offers name or a publication date link. Well, let's see if it's true. Click on the author's link and the thing plate is index dot PHP. Click on a category again index dot PHP. We click on a publication date, NC again. That it template file is the index dot PHP. Well, there is nothing wrong with it. If you really want to see this template when you click on any off those links, if your intention is the submit your thing to market places such as the thing forest. You see that they have this very special requirement. So here they saying index dot PHP should be reserved for standard block latest posed for you so you can use index dot PHP for every scenario just for the block latest posed for you , as you are doing here in our theme. So you better not use index dot PHP as the template for displaying categories. Tags date or offer pages just off all of these display problems. At once, you'll be creating a new template file called archive dot PHP. Typically, this fire would be used if you need to create a page well, a page with your size archive that is a base showing the content organized by date. My mouth, my years, etcetera. But we can use this file in this likely more general way. It's very versatile to understand this better. Let's go over to the WordPress Theme Handbook, which is a page with valuable documentation for thing developers. This base here talks about all the template files needed to create a theme. Let's go ahead and click here in common WordPress template files. He regard the list off all template files. With a description below. We can find something about the archive that PHP file. Look what they say about this file. The archive template is used when visitors request posed by category author or date. Note. This template will be over reading if more specific thing plates are present, like category that pitch be authored outpitch B and they thought Peace be, that is we can create specific thing plates, files for categories, offers and date. But it can also choose to create a single file called archive dot PHP, which can handle these three situations at the same time for us. In fact, we can also create tax template page through this fire. Although the documentation don't mention this fact, that's what we're gonna be created in the next lesson. Okay, I wait for you, then in the next lesson by 38. Creating archive, category, author and tags page (part 2): Hello, guys. In the last lesson, we learned about the archive dot PHP file. Now you know that it's used when visitors requests posed by category al for attack or date . Oh, let's start great in this file, even sublime text or in your favorite editor, we're going to create a new file and call it archive dot PHP off course to speed things up a bit. Let's copy the contents off the index dot PHP. File taking care to replace the class for the main tiff tag. Let's include the class cold archive. But of course, that may be whatever name you want, and here the name of the content file is gonna be content. Hyphen archive dot PHP. That's great. This file inside the corresponding folder. And to speed up to that Scott be what's inside the content that PHP file. Let's replace the content function with the excerpt and just to make the view a little different from the other views. Let's remove the category from here and I start off the test. Then let's open up our thing. Go to the block page and we're gonna click on one of the months that we have here in the sidebar. As you can see when I click on a specific month, we have only news from the mouth correspondent to the one we clicked on. Well, that's correct. But let's make that a little better. We can create, for example, a title above the posts. It'll be showing the name of the month so the visitor will not be lost. And this will also be used for for Alfa category and tag pages. It's called a WordPress function here before starting the thief else block. This time the function is gonna be the archive. Title dysfunction allows us to pass to formatting parameters that are HTML tax within which the title text will stay. The first prime minister is the opening tank. Let's use an H one heading tag of the archive title class, and the second is the closing tack. I save and see what happens. Okay, Fantastic. Now we have the name of the mouth, and this will greatly help people who are visiting a website that uses the learned WP thing . Our thing. Another thing we can do is also load the archive description. This will not work everywhere just in categories and tack pages, but it can be off helping some occasions you. So let's call the function down here and its name is the archive description as go to the admin area and add a description in one off our categories. And now, when we click on one of the links in this category, we see that we now have the description as well, closing it well, I think that's excellent. Now, just a complete our example. Let's see if everything's working. Also, when you click on a Now for link our attack, about having tea here on the author link and look this template final loaded is archive dot PHP. That's correct and also gather description just above. No, a tag sensing, that is, Everything is working perfectly, and I have to agree with me That wasn't so hard. Great, but I have a challenge for you. How about making your thing even more specialized? To do this, you need to create the three specialized template files that it didn't create in this lesson. Remember, those files are optional. That's why I won't be creating them with you, but they can make your theme much more interesting. It's pretty easy. All you need is to create a file called Tag Doctor Ph. B, another one called category dot PHP and the less file called date dot PHP. You can complete the contents of the index dot PHP and comes in that speech. Be as I did in this lesson. Just be careful to modified names off the TIF tags. Okay, as you do this, exercise Jack in the plugging. If the template name changes a year ago is to make the template file name changes to tag that pitch b category dot PHP and days dot PHP. So I'll see you again in the next lesson. Happy Colding. 39. Including a 404 error page: hi guys. In today's lesson, I want to bring up a very important issue ever. Pages well with created template files for just about every sort of inner pages. Inward breasts. We also learned how to create specific templates and many other things. Everything looks like paradise. Everything's falling to place. But there will always be a time when a visitor will come across a page that doesn't exist on your side. Let's say that the visitors sees a link point into your side while reading a post on another side. Except that this link was spelled wrong. You can that that the visitor will end up falling on an error page. But at the moment we cannot handle this error requests in our thing. So, for example, let's simulator never here in the theme. Now, for example, I'm visiting a known existent page. But even so, I'm seeing some content. I bet you're ready. No one. The answer is that every time wordpress doesn't know what content you load, it lows. A very special file called Cold. Exactly called index dot PHP. This is the default simply file. You can see that in our plugging up here, it can also find other clues. If you inspect the page, notice that in the bud attack we have the addition of a class called error for all four. Another way to see more information is by modifying our head of that speech. Be foul. Nice. Open that file. And here in the title tag, we're gonna include a WordPress function called WP Underscore Title. Now reloading the page. We have a new clue since the browser tab shows in the title that the page was not found. But even so, this whole situation can lead your visitor to make a mistake. They're seeing some content and may find that the link there actually visiting thus exists and that the contents they're seeing is really what they wanted to see. But that's not true. To solve this problem is quite easy. Let's create a new file called for awful dot PHP as ever To speed up things a bit, I'm going to copy one of the files. This time I'm gonna copy the archive that PHP file. But it can, of course, choose the index that bitch feature. Okay, but I need to make some modifications around here. Our error page. We'll have no look. So I'm going to remove all this cold here related to the loop. I want also to exclude the cyber. And as there will be no sidebar, this tiff tack here will be 100% wide for that, just remove this little class here. Let's also changed the main class off the defect. You error hyphen for ofour here, you're going to create a header and so informative text elements. Let's save. And now we already have something that really indicates to the visitor. Daddy content doesn't exist at this point. Our visitor must already be very frustrated. Lesson. Offer them some solution. For example, we can invite them to do a search to find what they want. Let's create a new tiff tack here and include a search for him here. We've already learned how to do that. Just called function gets search form. Another thing we can do is invite a visitor to check the latest vlog posts. To do this, let's learn yet another very useful WordPress function called the region. It does nothing more than call any WordPress fidget in a specific point of the cold. If we visit the WordPress Codex you'll see that there is a list of widgets available. In fact, this list is made up off those widgets that already comes into default installation off WordPress. We can call this widget here WP widget. Recent posts So the visitor will see a list of recent posts, and you know how to use it. Just click here in the sidebar menu, and we already see all the parameters that we can use for each widget. We can use this function the way it is now with a very basic implementation are it can pass a more parameters in our example Here, Let's play with these two parameters. Title and number. Let's copy this example here and based it in Should file we're creating. Now. Let's include an array and pass the title argument and number. Let's limit the number of links to three. Okay, accident result. Now, however, page has become much more meaningful for a visitor, don't you think? Okay, let me finish this lesson with an observation. As a thing developer, it is more than your obligation to create a narrow file. It greatly helps the visitor. It doesn't matter if you're creating the theme for yourself or for a single client are distributing of things more. People never forget to create this fire. Okay, well, as you can see, we are making great strides and creating the theme. And I hope you're enjoying the lessons, So see you next time. 40. Basic SEO Techniques: Hello, guys. This is a very special lesson in which we're going to talk about a very important issue. Search engine optimization, also known by the Acronym S C O. Okay, first of all, this course is not about s you. So the idea behind this lesson is not to bring your tips about how to rank your side on Google. By the way, this course doesn't teach you only to create a simple website. The main go is to teach you how to create WordPress themes, that it's more than a website over time. You understand that Although it seems the same thing creating WordPress themes, it's a much more comprehensive subject. But what I am saying all this simply because I believe that the rial responsive for making the sides rank wow in search engines like Google is the site owner. It is the content that he or she generates through the site that you make it more visible to search engines. However, that doesn't change the fact that your theme has to lend a helping hand. So you, as a WordPress team developer, must be aware of the fact that your fame at least can offer a couple of good practice, which in the end will have anyone who uses your theme or, if you don't help, at least do nothing to get in the way. That said, let's see what our theme can do to have anyone who used its rank better on search engines. I start off with header dot PHP file. In fact, most of our tests will focus on this file. We also need to inspect the things source called to check. If our changes are working, let's get started. So go ahead and open. They had heard that PHP file. As you can see, you're still including some fixed values in the eight email cold, for example, the character encoding Acela's The Language attribute are all fixed values, but these values cannot be fixed in my let's imagine, Your fame will be downloaded by someone in China. For sure, this person's WordPress installation will not be in English. Therefore, these two values have to be added according to the data provided by WordPress itself. Fortunately, we can solve this easily, using two functions for the language attribute. Let's remove this here and called language attributes function, so whenever insulation language changes, your theme will change this value dynamically. Let's see if it works as open our theme and check the source cold notice here that the current language is US English. Let's go to the dashboards, Go over to settings, General, and they're gonna change here, decides language to Brazilian Portuguese. Now looking at the source code again, See here that the language has now changed. Now it's Brazilian Portuguese. Let's go back to English now for the character encoding. Let's use a fairly versatile function called block info. Previously, when People Butte WordPress themes, they used this function block info for many things. But nowadays it's the usage is quite limited. Let's exclude this value here and call blocking so and passed with a parameter called char set. And that's it basically things one changed in the source code. But at least we are sure that everything's more dynamic now. Now a very important point since WordPress version 4.1. Several Met attacks are no longer used directly in the head portion. One of the tags that it's no longer used here is titled Really Title. So here, now html Head. We're gonna just remove that tag, but then you must be thinking this guy's totally crazy. The tight attack is one of the most important, if not the most important of all for the correcting decks and oversight by search engines. Well, let me explain them or else you'll think I'm kind of crazy. Since version 4.1, WordPress recommends that this stack is included not in the head portion but through the functions that PHP file using themes. Support? Yes, things support. So let's open, have the functions file and include one more thing. Support. The whole thing is very simple. Let's just pass the title tag parameter and you're good to go. So add themes supports title Take. Now, when we look at the updated source code of the thing, it magically have the title tank. And, of course, the value over I, according to the page, visited. Okay. And as for the Automat, attacks like description offer keywords. Well, we're not going to include these are dramatic attacks in our thing. To understand why we have to visit the WordPress Codex. So we're here in the Codex here on this page, who's think I will make available to you? Of course. The WordPress team explains that over the years, many of these Met attacks no longer makes sense. Like, for example, the keywords met attack which could go no longer uses because many people abused it down here, they have a phrase that I think it's great to explain this. They say, without a doubt, content is the biggest contributor to search engine page ranking. So if you want to raise your rankings, make sure you have quality content. OK, but if you still want to use some of thes met attacks like description, for example, well, on the same page, the WordPress guys explain how to do it, so just go ahead and follow their instructions. I'm not going to include any other Met attack here because even the native WordPress teams no longer used this mad attacks. If you think I'm crazy again, you can see by yourself. See no more Met attacks here, strangely as it may seem. Okay. As I said earlier, this course is not about a CEO. So I just went over here to talk about some good practice for you to apply when viewed in your theme's. By doing this, you already have a good way to help those who will certainly use your theme. So I hope you like the tips. And I hope also that you feel like you learn something new. And I would catch you guys on my next video, actually on their new section. So And you there. 41. Creating a Slider with MotoPress Slider (part 1): Hello guys, welcome to a brand new section of our course. This section will be slightly different from the rest. So far, we have been able to create pretty much the whole structure of our theme. We have already created the template for the inner pages. We already know how to control the WordPress loop, handled the pagination, add him support and many other things. But if you look at homepage hover thing, you see that it still seems a bit far from the original layout. This is because some essential areas like the slide show, the social media icons and the map are still missing. In addition to them, we still need to take care of things like the responsive menu and the contact forms. My proposal is to use plug-ins to view these areas. A lot of people ask me, Why do you ask people to style so many plugins? There was a plugin to include a responsive menu and under plugging for social media icons, this one for the slider contact forms. Well, there's a couple of reasons why I do that. First, developing all this from scratch would be hard work. If we have plug-ins that can do this hard work for us, let's use them. If I decide to teach you how to view every single functionality from scratch, this will be a never ending course. The second reason is because even professional thing developers include plug-ins when they are making their themes available for download. For example, if you take a look at thing forest, you'll find that most themes or maybe all of the things bounded, some plug-ins. So I can we, Moreover, all the plugins I'll be using here are free, okay? Which is good news. And the good news is, if feeling tension is to make your thing available for download, I'll be teaching you how to blend all of the plugins with your thing. Yes, really? Every single plugging. This will be later on this course. So hedonic, it's worth it. When literal thing I would like you to consider is that you are free to choose other plug-ins other than the ones I use here in this course. The truth is that since the moment I recorded this course for the first time, some of the plug-ins have changed a lot and some have stopped offering support. So I do my best to update our adolescence in this section, but sometimes a GIS can do it as fast. So in case any of the plug-ins I bring in this section are not working the way you expected. Or as I show in the videos, feel free to choose another plugin, okay, even if your theme gets a little different from the one in this course, don't bind yourself to my choices since there are thousands of plug-ins available for free on the WordPress plugin is Repository. Don't put off your studies because a one plugging. Ok. So after this sort of Mayor Cooper, let's get started. In this lesson, you're going to start with this slide show plugging. Let's go over to the WordPress Dashboard. And we're gonna install a plugin called Morrow press slider. Head over to the plugins menu, Add New. And here we're going to look for a plugin called motto press slider. Let's go ahead and install it. And now we can activate it. Among the free slider Plugins. This is one that I find more complete. Of course, it's not as good as premium plugins such as Slider revolution, but it's free and it really does a great job for us. Once installed, we have a new menu Enter down here. Let's click on moral press slider. And we got to the screen here. Well, before you start creating something, let's go for a more theoretical explanation. I think it's necessary to make this explanation because some students are confused how these plugins work. In this plugging and in almost all plug-ins, like they have a structure like this. That is, we have a container which are the sliders. And inside them, they have each one of these slides. So this slider one has a first light, a second one, and so forth. So you can have as many sliders as you want and then as many slides as you want to. So on this page that we're seeing now, which is the plug-in homepage. We have the list of all the sliders, which are the containers. You can create as many sliders as you want. For example, we can have a slider that will be displayed on the homepage and another one that will only appear on the about us page. Or you can still create more than one slider for the homepage. But for now I have no slider. So let's go ahead and create our first one. Let's click here on Create slider. And here we can choose which type of slider we want. We can have a custom slider, which will be a slider with any kind of elements we like. For example, we could create a custom slider with three slides within it, H1 with a background image, some text, nick clicked to action button. We could also have a post slider. And unlike the custom slider, this one is made up by posts or pages that the plug-in we grabbed from the WordPress installation. And of course, if you don't want to have much work, we can decide to import samples of both accustomed slider and a post slider. As we don't have much time for this, I'm gonna go ahead and choose a building templates to help me create a post slider. So what's the idea behind this? Well, the idea is that you have a slider at the top of the homepage showing the latest posts in a slideshow. Each item on the slider will have a featured image from the current post title, the excerpt, and the publication date. Only the OK. This selected, I'm gonna click here on Create slider. And the plug-in shows that the post sliders structure has been imported. And now we can start setting up the slider. Let's click on this button. Notice though, that alternatively, I can also access this configuration page to the plugins homepage. Look, my slider is already here. Just go ahead and click here on Settings. Okay. Notice also that this is still the Slider Settings page. That is your Sue configuring the slides container. We're still not setting up each slider items. Okay, soon we'll do that. Here on the first step, you want to include some basic information. For example, let's type a name for this slider. Less change the name here for home slider. And here we want to add an alliance, for example, home hyphen slider. This alliance will be very important. It will be part of the short code that we need in order to include the slider on our tablet or on a WordPress page or post. If you want to do that. Let's change the height and width information as well. For the width, we're going to set that you went 1170, which is the initial default with other side, made with Bootstrap. And for the initial height, less sad that you 650 pixels. Here on size. Let's check this first checkbox. By doing this, I went to ensure that we are going to have a slider that can extend across the full width of the screen. You can later trick these other settings to learn more about this plugin if you want. I am only going to work with the basic settings right here on slide show, we can set the types of effects that slide show we will have. We are going to change only one of these values, which is relative to the amount of time each slide is on-screen. Let's decrease this value to 7 thousand milliseconds, which is the same as seven seconds. Here on controls, we can choose the Elements we want for the navigation. We can, for example, show the bullets disabled. The navigation arrows is at your discretion. I'm just gonna leave this as it is, okay. Here, under Appearance, you can change the slide show more generally. For example, it can hide a certain amount of slides at the top of the list or set a delay to the beginning of the slide. Show what matters most to us here is this text area below. Here we can define CSS for any slider. And later on the course we're going to return to this place here. And finally, here under content, it can set the sliders content. As we defined. That is liner will be made up by posts. All options are relative to which posts will be displayed in the slider. You can choose here the both type that is going to be used. For example, you may have both or pages. Let's leave it as it was before. We can also choose just a few categories or some specific tags. Pause Fermat's, and a bunch of other information. Let's say we want only five posts in our slider. And if I click here, I can see below the posts that will be displayed in the slider after everything's done, all based on the futures, I said above. Well, when you're happy with all the choices, just click here on safe settings. Now you're ready to set up each individual slide as reworking with a previously imported, both slider will have less work to set up the slides. But as this lesson is already taken too long, we will continue on this process in the next lesson. So thanks for watching and see you in the next lesson. 42. Creating a Slider with MotoPress Slider (part 2): Hello, guys. In the last lesson, we began configuring our first slider, which will be included on the home page of her thing. In this lesson, you'll be picking up where we left off. Let's start by setting off the items in the slider. Now that you have all slider setting saved, we can go ahead and click here on this added template bottom or, if you are owned, plug ins home page. Click on the name of this lighter or on the entertained plate bottom. Feel free to choose what's best You. The screen will be slightly different, depending on the type of slider chosen. Since we choose a post lighter, we don't have some items we would have for a customs lighter. The basic difference is that when we added the post liner, you're editing a slice template. On the other hand, if we had a custom slider, we could add it each slide individually. I believe that explaining the difference now might confuse you a little, so let's follow the explanation without getting out of focus for now. And I propose that later on, you go ahead and created customs lighter as an exercise to see the difference. Okay, so let's go here in the stain plate. One of the most important things to choose is what will appear at the bottom of each slide . We can have a color or a Grady int of colors for the background. But to be honest, I don't see much sense in this because what really prevails is what to choose Here. Under this image option, we can choose the featured image of the post being displayed or an item from our media library or an external link and out of image or the first image found in the post notice. For example, if I choose an image from the library, this image will appear at the bottom off all posts. It will always be repeated. Since I want the image to never be the same. I'm gonna choose the featured image of each post. Notice that as each posts as a different featured image, those images are not displayed here below and here I can set it positioning for this image . I can also choose a video which will be running in the background. Okay. And what are these items here in the preview area? Well, this items refer to text feuds with values that come directly from each post. We can add several of these elements inside slide in the same way that we can insert buttons, images and videos as we're using a beauty in post Lighter. Previously imported. We already have this two feuds here, one that shows the both Steidl and another that shows the boast exert. We can add one more below to show, For example, the post publication date. Let's click here in ads. Text. This one here are here. Hearing content. Have to define which element of the post this sighting refers to. Let's delete this tax here, Ang. Click here where it says Insert Micro's. We scroll down a little and she we find the publish date. Now I can click and drag this item just below the excerpt. In my experience, even with this blue lines that serve as a guide, this text that we have just the land will not be. Position it correctly to get the correct alignment. Click here on position and size a line. It's on the top left, and now we can drag it down. You can also enter values for the X and Y axes manually. For example, let's increase the Y Axis value to 420. We can type the value directly, or use the keyboard navigation Arabs by moving the items up and down. Let's do the same for the other two elements. What a title. Let's set the why access to 150. We can also change the phone size here on style. Let's set it to 40 pieces. Align it to the right. And for the excerpt, the Y axis is gonna be 250 and phone size 20 pixels. Okay, I guess with that, you can already have self into show in the slider. I saved the template, and it's finally see Howard Slideshow is displaying. We're gonna click here on clothes and now, to show this ladder on the screen, have two options. If you are adding the slider directly to a WordPress post or page, we simply copy the short code and paste it into the content. In our case, we need to insert slider not in a post, but in a PHP file. Another to do that, we need the second structure here. Let's go up yet and open the page home that PHP file. Let's replace this content here with the cold, which is copied. And of course, we have to change the name of the alliance. In our case, let's go back here toward press and this is our allies. Okay, I was safe. And let's see what you got on the theme home page. Great. Almost perfect. I have here the both featured image, the title, the excerpt and also the publication date. Let this light show bring the second item. Well, here we have the same thing. The featured image in the background, the title, the excerpt and the publication date. Notice that up here we have this white space above and below the slider. This is coming from the HTML section we created in the beginning of the course. So when that you added that in our CSS file, let's open up the file there and let's find out where the problem is. So it's here. We have this patting, which we don't need, so just comment on it, and we're good to go. Another problem we have here is that the publication that is almost invisible we'll have to fix this with CSS is felt. But let's do it to the plug in itself. Let's go back to WordPress added template. You selected element. Now here in style. I'm going to create a CSS class to style this element in the pro version office plugging. We can do this more easily, but in the free version, we are limited to using CSS. But with just a few custom is ations. We already reach very nice effect. I saved the template and click on slider settings. You're under appearance. You remember that there was a text area in which you can write some CSS code. Let's take the class we just created and style it like this. Let's save and see how it's now. Well, you got a lot better. It's more visible, and it's much like our original layoff before finishing this lesson to tips the 1st 1 in the same way that we can style the publication date, we can also style any other element off the slider. Just add a CSS Class M type, the desired cold and elastic. You can also play around with the animation controls for each element of this lighter. Just use the element and click here in animation. We can, for example, apply a delay to the element. Hide it. And with that we can have an effect similar to layers lighter the same way we have in plug ins life, the revolutions lighter. But the difference is that this plugging it's free. Well, I hope you enjoy this Lessons on back in the next one and the continued install a few more plug ins in our thing and you then by 43. Creating Contact Forms with Contact Form 7: hi, everyone. In today's lesson continuing, our plug installations were gonna be adding to contact forms. Your thing 1st 1 will be added in the home page sidebar, and the 2nd 1 will be added to the themes Contact page. So without further adieu, lets get started. There are several plug ins that can be used to add forms In WordPress. We can use this plug ins to create from simple contact forms to more specific and more complex forms. In our case, we want to use a plug in cold contact form 71 of the most used in WordPress and also one of which I love to work with. Well, before you asked me, why am I using a plug in to create a simple contact form? Isn't it easier to create that using Onley plane PHP called well off course, It could be easier the painting on your PHP skills In WordPress, you can create just about everything, but I always use a plugging in. This case is in the first place because it's faster and secondly, because a good plugging is going to take care of various security aspect, such as escaping strengths, security tokens, etcetera since I don't want to worry about these things in all my projects, I always prefer to use some kind of plug. That said, Let's go ahead, install this plug He had over to plug ins at New and we're gonna search for contact Form seven. That's thing stole it activated. And now we have one more writing in the dashboard menu called Contact. When we click here, you're at a gas, a butin example for notice here that it has a link that allows us to added the form and the short cold that will be using concert deformed intra page or into a template file. If you click on the Edit link, you get to this page. Here we get these four taps, I'll be showing you the 1st 3 off them in the 1st 1 We can create the form itself, adding the fields we want. And the coolest thing is that we can create fields using HTML or clicking on this buttons, which makes things easier and speed up the form creation. I'm not going to explain every single element, even because everything here is quite intuitive and easy to handle. I suppose I want to add another text feud in which the user will have to type in the name of their city. So just make room for the textbooks. For example. Here, click here in text and then through the necessary data, for example, I'm gonna make this fuel required. Call it city if I want to place Holder. I enter some value here on the default value field in click here owned this option. And if later on I wish to style the field, I can type in I d or a class. Okay, ready. Now, just click on inserts that and to make it look the same as the other fields, I'm gonna place it inside a label tag here under mail, we have the form submission settings as I am on a local server. I'm going to leave everything as it is, since I would need to be on a remote server. If I want to make a food and more accurate test under messages, we can modify the ever messages, warnings, success messages and so on. Before saving, I'm going to change the name of my form. Chew sidebar form. This will be the form that will be displayed in the home pay sidebar, and I'm going to add Nhu heading tack and a paragraph explaining What is this form? So let's save the form, and we're ready to take it to the home page. To do this is very easy. Just company charge code and inserted in the place that we want. In our case, this form will be inserted in the home pay sidebar. Remember that in the previous sections were created to sidebars in the functions that BHP file. Until then, we have used on Lee the second cyber. The 1st 1 was used for testing purposes only. But enough of that. Now let's include some meaningful content here. Let's go ahead, head over to appearance widgets and we're gonna and a text widget in the first cyber. In our case, let's just add it. The tax wages we already had that space, the forms, short code. We just copy it. He want to remove this title here too safe. And now let's see how our thing looks like. As you can see, it's working, but it's a little weird. This is happening because there's no CSS roles in the plugging that control the with off the text fields, so it's sumptuous creating such success rules. But don't worry, because it's quite easy. Actually, I'll be using a code snippet I found in a plug INS documentation itself. Just go ahead and open our main CSS file, and I'll be based in that code snippet right here. I'm gonna change this value here to 100% and remove thes other venues here because you don't need them by doing this. My text field stacks areas and other input fields will all feel the content area. So let's say awesome. It's very cool with literally for it. We have a working contact form. It's amazing. Okay, What it can do to make it a little better is to have placeholders to the other phone feuds because we want to the other fields to look the same. So let's go back and added the form once again and just follow the same logic that we used for the Citi field. Oops, I think I forgot the mayor fueled Let's get back there. And here we get all of the fuels with same ferment. Okay, Now we also need a form for the contact page. If he opened this page. We see that we have only a bunch of dummy text to solve this in the fastest way. We're gonna duplicated form we've already created for the home page. If it just melts over the forms link and click here where it's saying duplicate, Let's renamed Form and last week, the content a bit. Now I'm just safe and copied in new short cold. Let's go to pages and open the contact page for editing. Now just space, the short code, wherever you want in the page. And now let's take a look at the base to see if the form is showing up. And look. The form is here the way we wanted accident. Just one more thing before we finish this lesson. This plugging, as I told you at the beginning of today's lesson, is quite versatile. You can do a lot with it, however, since one lesson it's not enough for us to explain all of its futures. I invite you to visit the plug ins documentation. So whenever we added a form, we have this link here on the right side that leads to the plug ins documentation. I think it's worth taking a look you never know when you need some support. Well, with that said, we finished this lesson here, and our fame is getting even more beautiful and complete. So I hope you enjoyed it too. And I see you in the next lesson by 44. Including a Map without Plugins: Hello. In todays lesson finally, we'll learn how to put a map from Google at Barnard birthing. My initial thought was to install one more plug-in to do this, but we'll create this map without the use of plugins this time for this lesson where we use the Google Maps in that API. Currently the use of this API is free. Since June 2018, Google started to require a billing account to use any API, but it seems that this has changed recently. Considering this documentation. I hate Google's documentation. You spend hours and hours, you understand how things work. But judging by this part of the documentation and by my testing, the use of the Maps API is once again totally free and without any connections to a billing account. Much better. So let's go, let's implement our map. For this to be possible, we're gonna open the Google documentation to understand how it works. This link will be available to you in the additional material of this lecture. Ok, so don't worry about it. Well, the first thing I need to say is you need to access the link with your Google account. Or if you don't have one, you can create one for free, of course. And then you come back here. Well, this API works quite simply. Basically it adds an iFrame with information from a map of a particular location. To implement these maps will basically need a Google API key, as i mentioned previously. So let's copy all the contents of this iframe as open up the Page home dot PHP file. And we're gonna see where our map will be placed. Let's delete what we have here, including this container and this row, which we will not need because the map we'll span from right to left and left space iframe here. As modified this markup a bit so that the appearance of the map stays the way we want. Let's change this width to 100%. And the height is 350 and less. Add another information at the end of the string and present zoom equals 15. This ensures that the zoom over map, you'll start with a value of 15, which is a zoom value that allows us to feel the streets on the map at a good distance. Now to make the map really customized, we need two pieces of information. The first one is the services API key. So let's go back to the Google's website. As click here on get api key. Click on this blue button. And this will take you to the project creation page. If you're I own a project, you can use it, okay? But usually you will have to create one from scratch. If this screen comes up, select your country and agree with the terms. Click here to create a project. Give it any name. And click here to create the project. Project created. Click on APIs and services. Credentials. Create Credentials. Api key. Now you can copy and use this API key. One important thing you can do is restrict the use of your API key. This can help you avoid unauthorized use of requests coming from your API key. Since you may be charged if the number of request is too large, but that doesn't apply to the Maps API as far as I could tell still. So you can click here on this link and apply as many restrictions as you wish. For example, it can restrict the use of your API key only on your website. So to do this, click here, and then click here on this link. And let's go ahead and add your side. Let me cancel this. You can also select the services for which your API will be restricted here below, click here on restrict key and select the API if there is a logo. So let me cancel these once again. Now you need to define which API you use for the map. So here under APIs and services, we click on Library view. Let's enable these service called Maps embed API. Click here to enable. And let us go back to the credential space. Let's copy this key. Unless paste it in the field specified in the iframe after these key equals here. Now to finish, we just need to give an address. This address will allow the API to center the map and apply marker to this address. As I'm just doing a test here how we've addressed the way it is. But notice that the address has this plus signs. If you decide to change the address later, for instance, given your home or office information, just replace each space with a plus sign. That's it. But then you can ask me, Marcello, if I'm developing this theme for someone who doesn't understand PHP HTML, he or she will be forced to open this file and type the address and the key manually. Let's not feasible at all, don't you think? Not? Everyone knows how to measure it code? Yes, I totally agree that it's really not feasible, but don't worry, because until the end of this course, I will teach you how to churn out all this into something much, much more dynamic. Just wait, and trust me, for now, let's see how our map looks like. Let's visit the homepage of our theme. And let's see if the map is showing up down here. Perfect. Is our map centered on the address we chose. And with the marker, as I said, Did you like it? I hope so. It's a very simple and fast way to implement a map without needing applying. Very good. In the next lesson, we'll continue and we'll implement our social media icons. So until then. 45. Setting up a Social Networks plugin: So hello dear students. In today's lesson, we are going to install another plugin. And this plugin will be responsible for showing as the social media icons here in this area, which for now has only this text. Well, there are a handful of plug-ins and WordPress repository for this purpose, but I chose one that is easily to set up called social icons, widget and block. The author is WP zoom. So let's start by installing this plug-in. With the plug-in installed. Let's think for a moment. This plugin is a different kind of plugging. In fact, it is a widget. So to use it, we first need a new widget area available to it. We can add it. By the way, her, let's remember that going over to appearance widgets. We then have these five widget areas and we need a new one here. Otherwise, we will not have where to add this widget which has installed. You already know how to create a widget area, right? So we need to register one more area in the functions that PHP file. So let's open this file up in our sublime text. And if we scroll down, we have dispersion of the code where the existing widget areas are registered. To create one more is very easy. It's just copy all of this code here corresponding to the register sidebar function and paste it just below. Just be very careful K, because the copied code has to be placed right after this semicolon here, okay? Now the work will have, will be to modify the name of the widget area, the ID, and the description. And the rest of the code will stay the way it is. Ok, let's go back to the WordPress admin. Now reloading this page, we can see that there is a new widget area. Now we can drag as many widgets as you want into it. But of course, we are interested in just one of these widgets. Let's look for the plugin widget we just installed. Social icons by WP ism. Let's drag and drop the widget to the new area. And we can go ahead and configure out your options. Let's do this. First. We don't want any title because according to our layout, we only want the icons with respective links. Nothing more. Here again, we don't want any text above the icons. Well, I'll be setting up this plugging in a very basic way later. If you're interested, you can tweak the settings, do your testing and so on. So I don't want to display any labels. I want links to open in a new tab. I'll leave these options here checked. This will add some additional information to the links and you can check the source code later. This is very useful for your site's SEO. No icon alignment. I will leave this option checked this, so add a background color to the icon. And if I choose this other option, the icon will have no background color. Okay? Well, the icon style I wanted in a square padding, six pixels. I can size, I will live as it is. Here. You can set a unique color for the background and for the hover state for all the icons when our clear out these two colors. And here finally, I can type in the links of my social networks. From here I just want a face MOOC. I went to paste here my Facebook or URL. I wanna delete. These are the two. And I'll click add more to LinkedIn. Okay, I'm gonna save this. Okay, but of course it's not just that, it's never that simple. We still need to make some changes to the hair that PHP file wishes where the code that generates this red bar comes from and call the new widget area there too. So let's open up this file. And we're going to remove this text here. And instead, let's call the new widget area here. To do this is pretty simple. Let's open the PHP tag here and write the following. If is active sidebar. And what sidebar? The one that we have just created called social hyphen media, dynamic sidebar. And we pass the name of the sidebar widget area again to the function. Notice that here I passed directly the functions that load the sidebar content. I didn't need to create any specific file for them the same way we did before for the service area. Remember, I mean, you don't always need a specific file to load the widget area content. Okay, now we can see the result on the screen. Let's refresh the page. A hand there we have the icons of the CEU social networks that we feel the end in our region. And if you want to add more icons, just go back to the widget and fill in with the address for another social media. Okay, so that's what I had to show in this lesson. I hope you enjoy it. And I see you next time. 46. Including a Responsive Menu: Hello, guys. Welcome to one more lesson in this section. Actually, this is gonna be the last lesson. And today we're gonna install a plug in that will help us display a responsive menu on the screen. Ever since the beginning of the scores, we have already done a really cool job using bootstrap to make our side as responsive as possible. However, one thing that it's still not working is the menu. If we enabled the browser element inspector on a Mac common option I on a PC control shift I or the F 12 bottle You see that when it gets to very small screen resolutions are menu starts to get weird. There will come a time when it will be totally broken, but they don't want this to happen. To solve that, we're going to stall a very simple, very lightweight plugging called that. Will you be responsive menu? It's very uses to set up, and I always use it in my projects and you see why? So let's look for this plugging. Install it and activated. Once installed, we have a new item here in the dashboard menu. Let's click here on WP our menu so here we get six steps. The new version of this plugging brings a lot of new functionalities. Many of them are bringing futures, even though this is still a very good plugging. Be concentrating on these two first steps general and appearance. So under general, one of the first options here is what menu we want to use as a responsive menu. Remember, we have two menus, one at the top of the page and one at the bottom. Let's juice here the top menu. The next setting is very important when it should specify here what HTML element is gonna be hitting as soon as the response of menu appears on the screen. Generally, we type here the menu class that we want to become responsive. To figure this out, we have *** back to code for the menu. Let's go back to the theme and let's find out what is the CSS class off the main menu. Look here, he found out. Skopje this class main menu and paste it here. Nice tape dot Before, since it's a CSS class name, search input within menu, you can choose whether or not to display a search box in the menu Anglo. Which text will appear inside that box? There are many other options here. For example, you can choose a logo to be displayed in the menu enabled the swipe effect and a couple of other options you can treat later if you want. OK now under appearance. There are also a lot of options. You can later own change if you want. Let's concentrate here on the main options. You can just hear the menu I can position and direction. Also the kind of animation the menu you have. We want change anything for now, but the most important option is the next one. Here. We need to define the width in pixels below, which are responsive. Menu will become visible. Let's add it to 767 picks us. That is, when the screen resolution is less than R equals to 767. Pixels are responsive. Menu will appear and the regular menu that is not responsive. The simply disappear below got a bunch of other options related to the style of which menu item and also supermen news. We're gonna go ahead and accept suggestions and also accepted callers suggested by the plugging, Let's save the changes. And after we save, you can see a life review on the right side of the page. This is very helpful. Anyway, Let's jump to our thing because we need to see how it's behaving on different screen resolutions. Let's refresh page, and I watch slowly going down the resolution that is here, that we can see the size of the current resolution in pixels. Remember when we reached 767 pixels? I Responsive menu. You have to appear. That's cool. Del. Go down and that's it. You reached 706 7 pixels, and the response of menu is already here. Nice. Let's see if the menu itself it's working. Let's click here to go to the contact page, and we're here on the contact page. Let's open the menu again and return to the home page. Excellent. Everything's working just perfect. You see that we just have feel settings. We now have a responsive menu on our feet Well, but there's still one thing that has not convinced me at all. You may ask me, Marcello, and if I'm making this theme available for download, how will my user know that he or she needs to install this plug in if they want a responsive menu. This is also a valid question about the social media plugging, the slider, plugging and any other plug in you decide to include inner Feen. Well, that's a great question. So let's make a do get this question right in your heart. Okay? We're not going to answer it now, but, um, Onley at the end of the course after we finished out the theme. This will be interesting for those who intention great things to make available to other people. For example, people who want to sell items on thing forest, which is a well known marketplace for sending WordPress teams. So I wait for you in the next section of the course. We'll be learning about one of the most interesting WordPress tools called the fame customizer and kill them happy Colding 47. The Theme Customizer WordPress API in detail (part 1): Hello, everyone. And welcome back. You're back here for another lesson and for a new section of her course. And today we're going to start talking about the theme customizer. One of the most interesting development chose for WordPress themes. But before we start talking about it, I just want to show you a couple of simple modifications I made to the theme. As you can see on the home page, the search farm is a little different as well as the contact form. There are also other areas of the theme have been modified, but nothing too important. These are only small success changes. As you know, you can find them all in our CSS file. You see, they're all the success for the theme in a very well organized file. Also, I decided to change the HTML markup for this middle area here a bit before the sidebar had Onley three columns and now it has four columns. With that, the new stiff has been reduced to eight columns, and there's also this heading tag here and here on archive dot PHP and index dot PHP also changed the pagination. Dave Tex Before we have the core MD six classes, and now we have only cold six. That means the students here who always have a live off 50% each, regardless of the screen resolution. Okay, back to today's subject. Let's remember that we have some sections on the thing that are not finished yet. So here on the home page have this area that to be a place for the logo, the crop right area. All this areas are still unchanged and you'll be using the thing customizer to deal with them. It could, of course, toe all that manually using only html code PHP etcetera. But the point is that if you do that are feeling we get hard to maintain to make changes to the code, the site owner would have to understand about programming. But of course, this is not a reality that we have to take into consideration because not everyone knows how to write code. So our task is to build the whole thing in the most dynamic way possible. But before you start creating anything, I'm gonna show you, of course, how this WordPress tool works, especially for those who still don't know it. First, let's go over to the WordPress dashboard appearance menu customize or as the site administrator. You also have the possibility to access the same screen. Fear the front end. My clicking on this I can hear this tool is very versatile and allows us to make changes to the thing. Bio viewing. These changes owned the right side of the screen, So this is the great potential we have when they use it. Well, let's explain how it works in more detail. Here on the right side, we have this big rectangular area where we can see the actual theme. This area is highly dynamic. So, for example, if I click on this link actually can go to a new page. And on the left side we have several controls that are used to modify specific areas of the theme. Now let's give names to those things. The controls you see on the left are called sections. Here we have, for example, the site identity section, the color section, the header image section that is a no, the acquaintance of us from previous lessons. Remember, within each section we have the controls. For example, if you click here on site identity, we have all the controls that relate to the sites. Identity suggests the title prescription and other fuels to these controls can be of different types. They can be taxed feuds, check boxes, upload buttons, color pickers. There are many possibilities. And with each version, the WordPress team brings more items to the customizer, not to mention some custom libraries that fuze that are not yet in the native version of WordPress. Another thing we can do here is also to change the thing that we're viewing dis click here and choose another thing to customize it. I'm gonna choose, for example, the 2017 theme. This thing also futures of fuel sections and I could also make modifications and already see the modifications reflected on the right side of the tool. So that's sweet things again. Well, another very interesting thing in the studio is the possibility to see how our layout will be presented in several different devices. So here on the right side, I'm feeling the themes desktop version. If I click owned this button here, I can see how the site is on a tablet like device, and if I click on this other button here, we can see how the theme behaves on a smartphone. As you can see if the changes we made in previous lessons are, fame is totally responsive. We even see the response of menu here at the top of the thing. Well, that's it. Basically, it's what the GATT within the customizer. This is a very powerful tool not only for you the thing developer, but also for your clients. It allows us to make custom is ations in a very practical and fast way and without the need for the end user to know how to write code. So what I want you to understand in this lesson is basically how this show is made up. So remember the follow me. These left side structures here are called sections, and it's section can contain many controls which can be of various types from simple tax boxes to check boxes, upload buttons, etcetera. Okay, so in the next lesson, we're gonna start writing some code for the customizer and you then heavy coding 48. The Theme Customizer WordPress API in detail (part 2): Hey guys, how's it going? I'm ready to start creating your first years in the WordPress theme customizer. I hope so. Because today we're gonna learn a lot of new and cool things. Great. In this lesson, you see that the customizer tool is very powerful and versatile. Usually my students say that these are the most interesting lessons of the whole course. So without much delay, let's get started. The first few you're going to be building is this copyright area here. You can see that it is a simple text field. To tell the truth. There is no great niche. You make it a customizable field. We could simply create it directly in the code or create a very simple tax widget so that the user could edited. However, I'm going to teach you how to include it. Fear that theme customizer for learning purposes. As it is just a text field, it serves perfectly for you guys to understand how the customizer works in the list traumatic way possible. So began live as far up our Sublime Text. Create a folder called ink. And then that lets create a new file called customizer dot PHP. You'll be creating all the necessary fields within this fire, right? However, since this file is not automatically loaded, along with WordPress, we need to require it inside functions that PHP file that intern is automatically loaded. To do this has opened up the functions file and using a native PHP function called required. Let's include our newly created file. So we require now to get the path to the theme directory. We use Get template directory and concatenated with the file path. Remember to add this four slash n, okay? Otherwise the file will not be found. Okay, ready a safe. Now in Customizer that PHP, let's start creating something. First. I soap on the PHP tag, but we don't need the closing tag. Let's create a function. The name of dysfunction may be wherever name you want. In my case, I'll call this function learn WP underscore customizer. The name is not so important, but it's very important that you pass a parameter to it. And this parameter is a variable called WP. Customize. That simple. Well, let's recall some basic details that I mentioned in the last lesson. The theme customizer is made up of sections. And inside each section, we have one or more controls, right? There are also something called panel. And inside each panel, we can have several sections. But I will not use any example that uses painters because they made the code very complex. Let's just stick with the sections which can have different controls. So let's create in this order, a first section. Let's make a comment here, indicating that this section will be for copyright information. Pay close attention to the structure that I'm going to explain to you now. At first glance, it looks very complicated and it can confuse you a lot. But when he created it, once, it can be copied and pasted, so you can create the other sections and then the other controls, et cetera. The first thing you're gonna do is call a variable named WP customize. In fact, technically speaking, this variable is an object of the WP customized manager class that is responsible for handling the execution and control of the customizer itself. Let's add a small arrow with the minus and the greater than sign. And we're gonna pass here a function called add underscore section. Again, technically speaking, to be more precise, this glass object here is calling a class method name add section. You see still in this lesson, at each time, you'll be calling a different methods. When we are bearing sections, use add underscore section. But for controls, we're going to use an underscore control and so on. Okay, now inside that ad section, you're going to pass to information, first name, or an ID for that section, and then an array of arguments. First section ID, I always use a name that starts with sack, underscore something. You see in this lesson that this will help a lot not to get lost within the code. So I recommend that you do the same. Now to finish out, we create an array with a few arguments. Let's pass two arguments. The first one is going to be tidal. Let's type here copyright. And the second argument is going to be description. The value of the title argument will be inside the clickable object of this section. When you click on this object, you see the controllers that it has inside it. Now comes a detailed that I didn't explain in the last lesson because it wouldn't make much sense then. But now it makes more sense. Between this section and the controls we have the so-called settings. They are responsible for storing the data entered by the user in niche control, sending the data directly to the database without this settings is not possible to persist any data into the database. A curiosity WordPress saves all the data inside the WP options table. So if you need to check out how this customizer data is stored into the database, just take a look at this table. Basically the settings structure is very similar to a section. We start with the object. Now, instead of calling add section, we call another method, name add setting. Here we also pass two parameters. The first one is the name of the setting, and the second is an array of arguments for the name of the setting and January use something like set, underscore something. Now inside the array, we pass the following arguments. The first is type. This argument applies to the type of field that will be stored in the database. It can have two types of fields, option and theme modifications or simply think underscore mod, Japan, understand the difference between one and the other. Let's see what the WordPress documentation tells us. So here, the documentation states that there are two primary types of signings, options and theme modifications. Options are stored directly in the WP options table of the Wordpress database and apply it to the side regardless of the active theme. Themes should rarely, if ever, ad settings of the option type. Thing modes, on the other hand, are specific to a particular theme. So for the first argument, Let's set the value as thin mode. Okay? The second argument is the default value of the field we're saving. For example, less typing here, copyright x. All rights reserved. And the last one is sanitize callback. Well, this one's gonna take a little while to explain because it's more complex. Here's the thing. Since we're creating an interface between the user and the database, we should never trust the type of data that the user will provide. By mistake. They can end up in putting things they shouldn't. So has good developers we are, we have to always anticipate things validating as mighty as possible the data provided by the site owner. That's what this last field is for sanitize callback. It is nothing more than the name of a function used to clean, to sanitize the data entered by the user. For example, let's suppose the creative field for the user to input the valid ID of a category. You know that usually the ID has to be a numeric value, right? But the user may not know. And then try to input letters instead, I mean strings. And then my friend, if your farm allows users to input strings instead of numbers, depending on where this information is used, it can break the page. For this. You have to sanitize this information. Wordpress itself already has a series of filters that can be used for this. Filters that are defined globally and work anywhere in the code. And I'll make available to you a very interesting tutorial that shows most of these filters. This one here. By the way, the WordPress Theme Review Team also has some pretty cool reference material on GitHub, which is on this page here. Two hour also live the link for you to check when you need it. Okay. But let's focus on this first page. Here got examples of the filters used for most customizer fields. For example, which filter should I use to sanitizer field that it will accept a URL. Then it shows here this filter called Ask URL raw. And further down here you have a list of other features that can help you to, depending on your project. Most of them, or maybe all of them are functions belonging to the word processes, ONE source code from its library. You have to create your own functions to sanitize the data only in a few situations. For example, this first case that the author shows here, Radio bucks, probably WordPress doesn't have a filter capable of cleaning data from a radio bucks. So he created his own functions up here and then call it back here inside it's sanitized callback. We can use this material as a starting point whenever you need it, okay? Or as long as the author maintains the page, of course. In some cases you can find all the filters that are better or more suitable than those shown here. So in our case we have a simple text field. So let's see what is being suggested here. The idea is that we use this feature called WP Fyodor know HTML, CSS, complex name, right? But what it does is remove all the HTML from the text that the user will enter. However, there are other filters, such as S attribute or sanitized text field that you can use in this case to. So for example, you can pass the ask attribute future like this. The important thing is that you don't leave this field blank. Alright? But let's continue. You already have or section created and also our setting. But the control itself is missing. To speed things up, let's copy this structure here. I'm going to rename the methods jus ad control. And the name of the controller is going to be CTRL underscore copyright. I went to remove these arguments because they will be different. Let's get straight to the arguments there. The first one is label and apply pseudo name that appears before the feud. Then description. Now the last street deserve a little more attention. Section. Here we have to specify the name of the section to which this controller is connected to. And the name is sec underscore copyright. Settings here informed the name of the setting, they will save the value passed to this control. In our case, it is set underscore copyright. Did you notice why I identified the name of the session and settings will prefixes. It helps me very much not to get lost in the code. And now less argument type. This is the kind of control are feud We are building. In our case, it's going to be a tech side field. It could also be text area, checkbox, select, radio, etcetera. And now to finish out this file for today, we're going to add an action to low dysfunction with just creating an action. And this function needs to be triggered on a hook called customize underscore register. And here in the second parameter, we indicate the name of our function. Learn WP customizer. Ok, let's save. And we can already see if everything is working. Let's go to the customizer. Here we have the section that we just created. And within it, the field we created with its default value. Well, let's add another value to this field. Unsafe. At this point, the data re-entered has been already stored in the WP options table. So with every change I made in the field, the data will be updated in the database. There is only one way to fastest value from the database and show it on the screen as open up our footer.html file. Then let's delete this text here. And to call the field is very easy. Let's use the gap thing mod function and pass inside it the name of the setting that stores the value of the field. In our case, the settings called set underscore copyright. In order for the state value to be displayed on the screen, we only need to equity it out. Let's save this. And let's see if it's working. First. Let's check the thing. Excellent. Now let's reopen the theme customizer and let's make some changes. Look how interesting the viewing area is refreshing and the field value changes according to either type. Very cool. We have our first field working in Customizer. What a breakthrough. But it's still have a good way to go. We still have our logo, for example, and the map. Yes, the map. You see what we still got for the map. So that's all for now. And see you then in the next license. 49. The Theme Customizer WordPress API in detail (part 3): Hi folks, Marcello here for another lesson. And we are almost coming to the end of this long work. And today we are going to be creating an area to include the thing logo. First of all, as head over to the WordPress Dashboard, Appearance menu, customize. And under site identity, you realize that we don't have a control to upload a logo to the thing yet. So we have to figure out how to do this. Fortunately, there is a fairly easy way to do this in WordPress. To do so, let's go back to our code. Today we can forget the customizer dot PHP file because we need only the functions file. The changes will be, as you will see many more. Let's go ahead and add another thing support. This time, the theme supports we want is called Custom hyphen logo. This theme supports, accepts an array of arguments in which we can set both the width and the height of the image. So let's begin the array here. Height is going to be 110, and width is going to be 200. This is going to be enough for our logo image. As you're setting an exact size for this image, you'll notice that we're press will allow us to crop the image used for the logo. Let's save this here and reload the customizer dashboard. Now if you access site identity again, you have here an exclusive area to send our logo coup, isn't it? Let's upload an image. Look here, as I said before, the customizer suggests that the uploaded image has a dimension of 200 by 110 pixels. And once you choose a name age that I have already set aside for the logo. Notice that this image is larger than the suggested size. So when I click Select WordPress, asked me to crop the image. Before that, I'm going to type here an alternative text for the image and also a description. I'm going to just type the thing name. Okay? I'm going to click on this button here and proceeds to crop the image. Okay, great. The image is here in our field. But of course, it's not displaying on the theme yet. Let's say this year for now. And we go ahead and include the logo in our thing. To do this, let's open up the header.html file. Let's remove it all here. And I scholar logo. To do that, it's really very simple. Let's just call the Custom Logo function. Lets it nothing more. But now you understand the reasons why we created some things at the beginning of the course. For example, we have this tax Sandra class here. And we also have this div tag just below the bootstrap container called a line. The tax send reclaimed ensures that the logo will be centered. Even when we are at a very small screen resolution, such as a smartphone. And the online class, we used to align both the logo and the menu vertically. Well, before showing you how we are going to align these items, let's see if our logo is already showing up on the screen. Let's open our thing here. Excellent. Our logo is already showing on the screen. Look here. However, you can see that it's not aligned with the menu. In fact, we have this space all under the menu. It really seems very, very ugly. To solve this, Let's use only three CSS commands. Let's go ahead and create a very simple rule for that align class. Let's open up our CSS file. And let's say the following. Display. Flex. Align items center with 100%. Using only this, we can ensure that our items aligned vertically. So let's see. Well, something went wrong here. We'll have to figure out what happened. Let's go back to our code because I believe the problem isn't that aligned if yes, it's here. In fact, this div must be inside the row, not outside. Otherwise, the display flex once worked for the two inner div tags. Let's reorder the code. And let's refresh the page again. Gray, his working, it can't get more perfect than this. So now let's resize the screen. And when we get below 767 pixels are responsive menu will display. And the logo image is centered thanks to the online class. Another alternative to align the menu wishes even easier is to pass to Bootstrap four classes to this row here. Instead, you can delete these aligned tiff and leave only the row passing the deflects and align items center Bootstrap classes to it. Passing the flags, we are saying that the rho, which is the parent of both the section and the nav elements, will display as a flux element. And the align items center aligns the two children elements to the center. Well, folks, that was it for this lesson. I hope you enjoyed it. And I invite you then to be hearing me in the next lesson, which will be our last on the WordPress theme customizer. Until then, happy coding. 50. The Theme Customizer WordPress API in detail (part 4): Hey, what's up, guys? Welcome to this lesson. Which is gonna be the last one about the theme customizer. In this lesson, as promised, we're gonna make our Mac more dynamic. You remember that in the lesson in which we created our map have included two values manually. For those who don't remember, I'll start by opening the page home that PHP file again. Here at the end of the file, they have the Google maps I frame. But notice here that these two values the A p I key and the address were hard coded into the file. And here comes that question. How the owner of the side, who most of the time doesn't understand anything about programming and it's not forced to understand. Of course, you managed to added those values. This is very young likely to happen. So today we're going to learn how to create a friendly alternative to the site owner or to a fink user. Okay, at the end of this lesson, you're gonna have June new feuds and customizer, and you'll be able to set both the A p I key and the address In a very frankly way. I start with the customizer that PHP file as at a new comment here and down here, you're gonna be creating a new section to speed up a bit. I'm gonna copy this person here, and I'm going to change only the necessary venues. The section name issue will be sec Underscore Mac title and description. Okay, now we can create it sightings and the controls. As to this, first of all, for the a p I key, let's copy this setting here. And let's change the name of deciding in our case. It will be set on the score map on the score a p I key. This adding will be responsible for saving and retrieving the A P I key value in the WordPress WP Options table. The default value will be empty and as this you also be a common tax field. Let's keep the same call back Now let's include the control copy again has called this control city. Are l on the score neck underscore a p I key. We set a label and here in description as the different. Let's given instruction to the fume user. If they don't have a key yet. Let's include the link so that they can generate the key themselves. And now we only need to specify which section and siding this control belongs to. Okay, now let's do the same thing for the address feud. Let's copy all of this here and the only needs replaced values. It's called deciding. Set on the score. Mac on the score address. Now, as this field will be attacks area with multiple lines, it come back. Needs to be different. That's best here. Ask of the score text area. This one is another WordPress function capable of sanitizing the data passed in the text area feud, and the corresponding control will be called Ctrl. Underscore Mac Underscore Address. Let's ask the user not to type special characters in here. Okay, In my experience, this field will work even if the user types of special characters in. But let's ask them not to do this. Finally, that said, the section besetting and the feuds type will be text area. Okay, let's save and this check out our customizer. Now we have a new section here, last click here, and we finally have our June new feuds. Let's see if you can send any value here Let's copy the A P I Key. We're testing Ellis. Also specify a different address for a map. Let's say nice. We have no errors and the fields are still here, which means they have been saved onto the data days. Good and now how you're supposed to use this fields now? Very easy. First, let's go back to the page home. That's PHP file. The way to do this that I consider to be the easiest way is first create two variables above the I frame. Let's open the PHP tags up here. That's great. The first variable called Key and this variable You get value of a getting mowed with a setting that host the value of the A P I key, which is called set on the score neck. On the score, a P I key. Now the other variable will be called the dress, and if you do the same thing, but for the other setting, but a very important detail When we retrieve the value off the address, it may not be passed with the correct formatting to the map. Depending on how the user enters the address, it will be included in the link with special characters, spaces, commas, line breaks, and this can cause some problems. To prevent this from happening, we're gonna wrap the value returned from the database with a native beach be function called You Are El in Cold. According to the Peach Be Manual. This function is convenient when in code in the string to be used in a query part of the euro as a convenient way to pass variables to the next page. So let's use it here. Now comes Thies. This part has replaced the fixed values with the variables we just created. Seems these values come directly from the database, been sure that they are always dynamic. First, let's delete the