build sruff program | Michael V | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
39 Lessons (6h 7m)
    • 1. Introductin

    • 2. Set up XAMPP

    • 3. Download Underscors

    • 4. Functions.php

    • 5. Changing images and font family

    • 6. Enqueue style.css

    • 7. Adding Header and Footer

    • 8. TGM Plugin Activator

    • 9. Activate Redux with TGM

    • 10. Creating Header fields

    • 11. Dynamic Header

    • 12. Dynamic Navbar

    • 13. Adding contact form to TGM

    • 14. Adding Footer fields in Redux

    • 15. Dynamic Footer

    • 16. Adding the Contact form to the Footer

    • 17. Challenge dynamic All Rights Reserved

    • 18. Redux adding Switcher Fields

    • 19. Redux adding Fields to the Switcher

    • 20. Redux adding Logo

    • 21. Creating Pages

    • 22. Adding Advanced Custom Fields to TGM

    • 23. Installing the Show Current Template Plugin and creating Navbar

    • 24. Creating Custom Fields

    • 25. Dynamic Slider Section

    • 26. Dynamic Service Section

    • 27. Dynamic About Section

    • 28. Dynamic Counter Section

    • 29. Dynamic Features Section

    • 30. Adding Blog Posts

    • 31. Creating the Blog and working with the Widgets

    • 32. Working with the Single Posts Page

    • 33. Adding the Wordpress Loop

    • 34. Creating the Gallery Page with taxonomies and custom blog posts

    • 35. Working with the Filter on the Gallery Page

    • 36. Creating the Contact Page and adding the Shortcode

    • 37. Remove unnecessary Fields

    • 38. Redux adding Font Family and Color

    • 39. Redux workng with Additional Types

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

Community Generated

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





About This Class

Every day businesses, professionals and entrepreneurs realize how profitable is to have a website. WordPress is a powerful tool for creating dynamic. Using the Redux you will be able to creat a powerful optional panel.

As a web developer who wants to create your own custom themes, you can use WordPress to start up your own website, or help your clients with their own projects. Or maybe you're daring to dream your highest dream and want to sell your own custom theme on marketplaces such as Theme Forest.

Learn How to Build Your Own WordPress Theme

• Master the Redux Framework

• Learn how to use the Wordpress loop

• Work with taxonomies to creat a gallery

Master the creation of a WordPress Theme

If you already develop websites, you will see how fast it is to create with WordPress. You will also understand why it has created a passionate community of followers around it.

There are several benefits for those who know how to build a custom WordPress theme. In addition to knowing how to solve problems more easily, learning how to create a theme from scratch literally puts you in control of your layout. The only limit will be your own creativity.

Meet Your Teacher

Teacher Profile Image

Michael V

Also known as Learn Coding


My name is Mikel I was born in eastern europe and I'm an expert in Wordpress, Webdevelopment and programming. During my school time I learned a lot about Webdesign and Webdevelopment. Afterwards I specialized my self at Wordpress. Meanwhile I created some Wordpress Themes. Nowadays I'm self-employed in several businesses and if you have some questions you can contact me by my E-Mail.

If you have some problems with any of my courses you can contact me, I'm willing to help you.

See full profile

Class Ratings

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

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

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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



1. Introductin: in this course, I will teach you how to convert a static HTML Web site into WordPress steam. You will learn how to work with the read X framework so you will be able to create a dynamic. Hera and food changed the funk, family and color, and also used the sort of people to serve your sections in your theme's. I will also show you how to use the advanced custom fields, added contact form in your theme and used the T g M plugging activator, which also allows your users to install updates and even automatically activate plug ins. We will create a dynamic gallery taxonomy and used advance work. Chris Functions two. Footer our images. After this course, you will be able to create your own professional workers using Redick's takes, honorees, T G M and much more. You have also, with 30 days money back guarantee. So what are you waiting for? Let's go 2. Set up XAMPP: Let's start the course with the installation off our local environment. So let's installed some our local host type in some in Google than the first Link Select English download. And now let's install it. Yes, OK, Next we just need my sq and PHP my Edmund. So let's select it next next, and let's install it. Okay, now the installation is done and we can click on finish and let's start a patch and my ask you and create a daughter base and install WordPress. So let's go and type in local host. Then PHP my Edmund. Then click on the outer base. Select utf 16 Been and let's call our daughter based Redick's Free Eight. Okay, done. Now we need to install WordPress. WordPress, English. Let's download the latest version off work Press to drag it on the desktop and let's open our some folder Z Sam Ht Dogs and put a work Chris here. Let's rename it. It's called Redux of This and just drag. It's in this folder, but stop the installation. Okay, lets go and pipe in local host read X how you name the folder. So let's select English. Continue. Let's go, Dr. Based name. We call it readings. Use the name rules. Password, no password and submit. Run the installation. Title name. Let's call it. Just read Uggs. User name. Edmund Password. I will take 12345 Yes, Confirm email. Just type in one and install WordPress. Lock in type in Edmond and off passwords. Look in Perfect. That's it. That was the installation. Let's continue. 3. Download Underscors: All right now let's download our starters Theme called Underscores. So type in and Google underscores the first link. And then let's call it Redux and generated. So now we have our file. Let's drop it on the desktop, all right, And now we need to go to some HT dogs here. We need to select read ICS, VP content themes and, as you can see there, 2019. There's the 2019 team 2017 2016 and we just need to put in here our Redox theme. And now let's have a look. Can we select it? Go to appearance themes. And as you can see, here is our theme. So let's activate it now we can visit our website. This is the start of a team and off course. We need to work a little bit 4. Functions.php: Now let's convert our static website into dynamic WordPress theme. So let's have Look, this is the starter website. Let's have Look, we have flick or index gallery Contact block, single block. And yes, some images, G s files, Java script funds and our CSS files. Okay, let's converted. Now open again. Our some just seen sen ht dogs read X EVP content themes and select our theme and just drag our files in here. Okay? All right. And now let's have a look. So we have no to html five index files. We have the HTML and the PHP and yeah, let's open it with the html file. With our code editor, I recommend visual code editor or PHP storm and also open the PHP file. And we will also need to end Q All the scripts and the CSS files function dot PHP. So let's open it also. So, no, this is how static one looks like. And let's close it and just take hear from head and copy all this stuff to here body that's goingto our index file here. We I don't really need all this stuff. So look, just take it and delete it also main and primary. Let's copy it. And of course, our images won't load and the script won't work a swell because this is not how it works. We need to en que our scripts in function dot PHP so we can look how the website iss looking right now. So when we open it, it looks like this. Nothing is working. But let's stop with the scripts and the ceases files. So now we have to go to function. But PHP and here I can explain something like this is really important. But we have here our readers scripts so underscores generated all the stuff for us, and we just need to follow it. So, off course, we have our style files get style. She Yuri. It's our style file from underscores and we just need to thank you, our style, the PHP. And for this we just need to copy this kind of stuff, So v, p and Q style off course. Let's rename its style sheet and we don't get style. She jury, we need get template directory Jury, Why template Derek three, you read. So now, as you can see here, is like get template direct to read your e dot and then our link and this is how it works. So, no, it will go with our directory and let's have a look. GS navigation gs G s navy. So we just need essence, see, assess and style. So let's do it. No, we have Okay, let's start with the front. Awesome assets CSS. Let's copy it and put it right here and off course here. Slash And let's call it. Oh, this is the wrong wrong one. Just copy it off course in this one and rename it readers fund. Awesome. All right. And no, we can delete fund. Awesome. And now we just need to do it off all the style sheet files. So it's too like this. Just copy this one pace that five times and this will be over. Style sheet. Let's have a look. Year style. CIA says just that is Then we will also need Oh, are slick slick slider C s s. We will need fancy box and boots trip. So let's compete again. Boots trip So style. No slick ling. We need lead it slick computes delete. Then the fancy box Call p and then boots strip file and yeah, it's to eat it. Swell. Here we have sold so well, theme switcher. So let's created swell. So happy. Last one, it's called Read a switch opiate and believe it. Okay, I know this. So we can also delete the Pichon. Okay, Tyto and all this stuff. We I don't really need it. And that's old. So and cue our scripts so slick waypoints and so on. So let's go to function of PHP in here, you can see it's a little bit we need to type in now instead of V p and Q style. We need to type in weepy and cute script. So let's copy this one and put it right. You 345 six times. And it's called this one Bootstrap cynic waypoints counter. Um, mix it up and hey thing yeah, we need to also fancy and costume. So that's it. And no, let's start. He first. We need food strip so it's deleted. We also need slick Lead it, wait points, comb through up, mix it up, lead it and fancy box deleted, swell and custom, Jess. And instead, off v P. And Q. Like our G query and work press it's a little bit different. We just need to type in V P and Q script v, P and Q script and put in G query off course. So let's have Look, we en que This is the script name. We can just select one off course our template directory, then our file and, you know, Ray the version and should be at the end off the script off the file. Yes. So off course we can change here a little bit. We don't really need this array and diversion and so on. But let's leave it like this. It doesn't really matter. So now let's have a look. Save it and yeah, no, As you can see this, scripts work. Everything is working. The only thing that is not working our images because, as you can see, I can show it you here we have like, yes, I looked worried your image and I'm the Let's look here assets AMG slider. This is not working. And yeah, in the next next step will be to change this stuff 5. Changing images and font family: Now let's work with the images. Off course. We will change it. Butts. I would like to show you how you can also change images just yeah, for showing our world. And you're off course. It will be dynamic, so we won't need this coat. But just do it like this and then off course. Oh, we can just copy it again, our get template directory. And we can just here paste it and made dot again and call people all this stuff into you. So no, the image shoot. Show up. Yes. And we just need this line Or just take here ever everything and poppy IDs here. Pace that. Here. Copy this. Put here again. Opiates and yeah, this is how you can make static images. Of course, I would show you how to work with advance custom fields so the client can do it on his own without any code editor. So the proper way birds. So you can see it was working and off course. We will also need to Yeah, used our Google funds. This is also very easy to thank you. So we just need again our V p and Q style and pace it two times. And now just call p this link. And instead of get template directory off course, just put in our link. It's copy this line. Let's old. So rename it Who? School. It's just funds family, This one we can delete. And this one will call formed family to back here. Copy it again and put it in here. All right, that was it. And now we will need also work on our Hera and food. This stuff we don't really need because we want this scroll top, for example and our here our social likens on everywhere site, like not only on the index PHP unlike on the block on the front page on the block page. So let's work move it in the next part. 6. Enqueue style.css: Okay, now let's open our style dot CSS file because we have no two we have in our assets. CSS are, oh, just neighbors. Really quick style. And yes, no, it's right. We have, like, our rial style, like the Redick style sheet style that CSS and we have our by unless course generated. Relax there. It's very important to have this pile to have two style files like the real one and this one. But this generated by underscores should not contain any CSS and affect our Yeah, our style. So let just remove all this stuff and I will explain you something Here. Just remove it, okay. And safe off course. And as you can see here is like theme name Redick's. Now you think? OK, and does it matter? It's update our website. As you can see. No, it's the right color and just go to appearance themes and the details and s You can see readers by underscores took me description, tax and so on version. This is all generated by this style. Dot C says yes. You can see theme name theme, Yuri Also on the scores that mean so here you can put in the description. You can just change it like you want for your team. If you want to sell it, for example So but I won't change it off course. We can also delete all the table content year all the stuff we can delete. You're okay. This so that was it. And now we can work with the Hera and full up off this theme. 7. Adding Header and Footer: Now let's work with the Hera and food. So in our theme, we have, like some files and we have the full file. It's open it. Our editor and our head. Oh, we have also some coat and we have to change it. So first off, all leads delete all the stuff here from our Hedda. So we have only the body class and then we go to our index page. Take the hear from start, scroll and scroll all the way down here to this to start slider and just copy it off course It's now also not really dynamic hysteric, but at least we can now work with it. And yeah, so, pop, you save this off course, we will have a dynamic menu that the visitor the customer can create on his own. So when you're selling this website, you will be able to change it. Also, this all the stuff will be dynamic with readers with the read X And also let's change something here in the fora. So we have like here for a delete all the stuff we don't need it Also this page we don't really need it. Goto in next and here we go. We have I stopped for a and and for off course we don't also don't really need the J query library anymore. Go to the fuera and yeah also removed content here and paste it this for and remove this foot So now it should work. Now I would like to explain you something like we have our theme like get head Oh So first the header file head of the PHP will be open And here this all the coat will be loaded on every website so we just don't need to call p all the time. This coat we just have, like the get hair on every website It will be the same will always have this cold Get Hera So heros loading then we have, like our Yeah, our owns coat Here it goes and at the end we have gets Ieper and get for a get sidebar. As you can see, it doesn't look really nice here and control Google also work with this stuff. So this is our cyp er it's shouldn't be there, So let's delete the sidebar copy on safe. And here we have our for a and of course, all the for us Stuff will be lower. It s well so website shoot work. Now, as I mentioned before, we will also make all the stuff dynamic. But just look to upset right now. So, yeah, everything is working and we can go on. 8. TGM Plugin Activator: Let's work with the GM plug in. So what does the T game playing the T g n plugging activator will show the visitor the Edmund on off the website when she or he bought the theme that yeah, the person needs to installed some plug ins, for example, read ICS. So just type in TDM. Plug in activation here, plug in and let's download the current version takes the main that's putting read X and And , yeah, I'm going to use to GM. For what? Let's select child the And Yeah, because we Had we used underscores. So it's kind of child theme, but it doesn't really matter the child the So we have our plugging activation or activator . So let's put it in our fuller um, where is it? No. Here, right on end. Let's rename it to T G M. All right now let's have a look and let's copied the example Fight. So let's rename it to plugging or let's Redux the so kind of this. Then let's open it. And now we can see some coat and I will explain you So first we have, like, remember, get styled she directory so there will be the file open. So we need to put in the path to the class to GAM. Plug and activation. Let's have a look. Where is it? And as you can see, it's right here. So let's have a look. We have to go to, um yeah, tkm because this get started. She directory? Yeah, this this one. So we go here, then t g m then plug ins. Plug ins, right? No, it's not this one. It's this Sorry. It's this fire, not the plug ins. And so we need to copy it's and or just remove the plug ins. So right now it's working because we're going to get we have First, our get style directory will go to the style she directory, then to t g m and then to this file will be open. So All right, then let's have look on examples how to install plug ins. So first of all, we have like this. This is, in my opinion, the best one. For example, if you are creating themes for theme forest, you have to do it like this. So first off, all you will need the plug in and installed plugging like reading. So we will need to install Redick's off course. We can also yeah, use this kind of method, but it's not the best. Just from get up. Mm. Here. We don't need this. This one is also very nice. You just put in the name and this lot, for example. Read X and then it will download it from the work purse. Were pressed, plugging repository. But as I mentioned before, for example, when you're making a theme for the forest, you should not use this method. It's not allowed. You need to do this. Then, of course, we have also forced activation. We can put in true and yet also this one. Just remove it. So we will use this kind of style. Yeah, well, do it like that. Activate or plugging. So we need to go to read ICS and put in Redick's were press and let's download the zip file . So download and put it on the desktop. All right, now it's here. We have our reader eggs. That's name it here, right? It's very important. Why is this better? Because they connect, update to relax and but and just remove all the stuff and then you're the won't work. So the Yeah, the user, like if someone bought your plug in your theme, should also get this version and not another word because, yeah, there could be a little trouble. So, yeah, let's be safe. Let's do the right way and no, let's have look, they recommend us to use this kind of source for our plug ins. So lip plug ins so we can just follow it and create for our plug ins like New folder. Let's call it Lip and Lift full. Or we can treat another folder and called plug ins because we follow and we're doing everything the right way and plug ins. We can put in our Redux framework. Rename it so right and off course Now it should work. Or it should not work because we need to do one very important thing. It's just go here to function PHP. And as you can see here, we need to activate or TDM plug and activators so we can do like this. Just it's copy it because we are doing everything the right way and just let's say loads tkm and R T g M plugging activator is Let's have a look it's here. We have to get them right. So we we are long This fire this folder Then we go to T g m. And yes, we called Redox team. So rename it Read X theme. Save it! And now let's have a look on our website. So let's load it and were long. This team requires the following plug in Oh, okay. This is not what we want. It should say. Like the name, The plug in name. Yes, off course. Let's say reduction. And here the plug in typically the fuller name that just three ducks, hoops, Redox and version and so on. And we can put in. But let's save it end now let's ever So when the customer you bought the theme activated it , she will see. Like this team requires the following plugging Redux and she will know that she should install Redux and there won't be any trouble. And yeah, let's install it. So as you can see, it's pre packet. No, let's have look after installation. Yes, successfully and return to plug ins installer. And this is how it works. And off course we don't have Here are Redux. Where is it? And yeah, we will work in the next chapter. Wolf read ICS so we can make our website dynamic. 9. Activate Redux with TGM: Okay, now let's work with our Redux file. So we need to go to the folder. Here we are, like, back here Redux VP content. And then now we downloaded Redux, and it's right here in plug ins. Then you can go to read X. And here this is the Redick's file. So we can go here to sample and just copied the sample come thick. So let's go back to our redux and to like, we can create you Fuller. Okay, we're already year. Oh, I see Inc and here we can paste it. So sample conflict. Let's see every name it's and call it, read its conflict. Okay, And now go back to functions PHP and here called p the TM activation and put in, like here, read X, set it down. And then here we have to put in in and instead of Redux team are Redux conflict on the So that's safe it And is it working? Let's have a look and no Oh, read X is working and we have here our options and yeah, we will work with this and yeah, let's have a look. We can go note, visit our website and just used the customizer and this is very nice, like you can create. So nice themes orbit because, as you can see, everything we are using in read ICS in the sample options, it will show up here in the customizer. So, as you can see, here are the basic fields we can use Check boxes. We can use the color selection, the yeah, fields, the spin. Ah, and so on. So everything. Yeah, from the sample files, sample options will show up in the customizer and you will create Oh, awesome. Very nice themes with it. And yeah, and the next chapter, I will show you how to use all the stuff we need for the Hera and Food er So the cast UMA or the user of the theme can also define all the stuff in the customizer. And it's very simple and very powerful. Redick's is just amazing, and I will show you how you can use read X in your theme and make a really nice premium WordPress theme. All right, 10. Creating Header fields: Okay, Now let's work with Redux. So we have our sample options, and we want to design some fields, create our own fields of this are the basic ones. And here we want to use some of them for our website off course with delete a lot of them. And yeah. So, first of all, we need to goto our fuller like redux ink and open our redux conflict. Here we go. And as you can see here, this one is important. Let's change it. Let's call it read irks theme. And yes. So this one is very important because this here's all the data start and yeah, we will use it in our Hera and our Fuhrer. Now let's grow down. And here, like here, start basic fields. This is important. So we will design our own fields. Let's copy. Just like the 1st 1 It's copy on the stuff. And then we will ever look what we need. So let's take all these and create our own feuds. Okay, so this is the easiest method. We just copy it, copied the example, and I will explain it. So this is the title we concoct with and head of feuds. These are the Hera Fields. Is the scripture the I. D. This is very important. Should be like head. Oh, we need to change it. The Iten. Okay, It's good home. Or maybe we can change later then we have, like, our being. Yeah, OK. Oh, I d subsection And yeah, this is the subsection with the check boxes. I would say we don't need check boxes, so let's remove it then. We have the radio boxes. We don't need them. Okay, then some sort herbal ones and the text field. And as you can see on our website here, we need some text fields. So we have a phone number or email some Aiken's and Yeah, So we were working with these. Mm. Let's have Look, what kind of Texans These ours. So we have text field, fence, text field, text field. I would say we need, like, the 1st 1 with falled text like looks pretty good. So we don't need to placeholder. We don't need this one. Yes, this one we can work off course we need This is very important. Always changed the i d. So instead of basic text, we can so header text and instead off I d tech stick sample, we can say text hetero and safe. This of course we need to change the subtitle the title and the script Chine and so on. But I just have a look How it looks like so Oh, you can see Here are our Hera feuds and we have our text here. Awesome! And also the fall it. And yet and now we can work like these. We can just say Put in your email so we can say this one will have, like title e mail and the description put in your e mail and full text We will have like this. So let's copy it paste and safe And let's reload. Okay, I think we need to change it later. Reset all because yeah and Allah, we have, like putting your email subtitle. We can remove the subtitle. We really need it. I would say it's not big deal. So now we have our Yeah, we have our email. Then, of course, we need also a phone number. So that's another field. Just copy it and paste it and that's a text. Instead of text herro, you can call it phone text phone and here I D. Pigs. No, this is text email. E mail. This is text foam. Make it like this one. And this one's this and also make like 12345 writings. How can we make Aiken's very easy kissed? Take it like this and one to free for five because it's also text. So we had for picks. It's called Just Head. Oh, Facebook. Head off Twitter. Cool, head up linked and oops and terror YouTube. And now we can just say instead off and put in your email instead off what we change here. The fourth number. Let's put in this. So we have number. Let's have a look on Facebook, and I can what should be paste in. So we have, like, far, far Facebook and take it and just put it right here. This one is for Twitter. Course we can so open just the Hera. I think it's easier here. We have a phone, your Twitter, Google and read X conflict. It's open it Google for Lincoln and last one for floor YouTube. Okay, now let's safe it and let's have a look. Is there any mistake or is everything working. All right. Off course again. Reset. All because we made some changes. Okay, Okay. It's working off course. We need to change a little bit text, because now you can see years everywhere. Email, email, put in your email, put in your email. Let's change it. And yeah, So let's work with the hair a little bit off course. Also here should shouldn't be just text. Let's change the title and say, like instead off just title. We will put in the head up then and instead off this kind of stuff, we need to take all of fit, remove it and put in here You can foot in all your, um, head of details. Safe it, and then we should also put it in your phone full or put in your number. Here we can title Facebook. This one is titled Number Phone Phone. Put in your Facebook I can or your Facebook have a better idea. Let's put in your Facebook link. Put in your and twirling. Put in your cool the Ling title. Do I would, uh, and put in linked in and put in your linked in link. Put in you chuckling and title you to end. We will make it kind off smart. We don't need the fall like far, far YouTube. We need a huge uplink. So that's just put iss deformed this stuff. So let's remove it. Course, we will make it kind of smarter. We will program it like if it's empty, it won't show up. And if not, it will show. Like this is the normal stuff. Moment. Programming Que line twin 295. What's in hetero text? And okay. Here, snow here. No working. So we have no put your number put in your Facebook ling putting twit telling everything. All right, reset. All Okay. So let's have a look. Okay? Yes, this is working. And now we just need to make a dynamic back because now we can't work with it. And yeah, how to do this? I will show you. No 11. Dynamic Header: hope, more hair and a peach p. And we have let our in for at mark up Stop i o and we I can just say like we have, like, move top email and we just say And here use some PHP and say, If the dollar Redick's we call the team, um and then we need the I. D. So it's old stored here, as I mentioned before, here we have, like Redux. No, relax, calm. It's opened it come thick and s you can see like when I scroll to the top you can see here Redick steam. So I copied this and yeah, it is here and now we need to know how to use it. And it's very simple. So we have, like, here, our text humane. We just copy it and paste it. So if it's not empty, if it's not empty, there should be. Let's here some PHP. That's close it right here. So we have like, if it's empty instead of this, then we say we make dynamic and use H p Dollar Redux theme and then our fixed e mail and off course. Don't forget the ICO, and it won't work. Why let or let's have a look. It won't show up here, as you can see. So don't worry. We just need to do one little They more. But now it's kind of working because now it's not showing because there is no real X team with yeah, with it. So this is will happen. This will happen when this stuff is empty. So we need to go to our top and say here P H p and type in. No, no or yes PHP you right? No, Here, we need to go global. Let's go on top you the package. We have some. I think it's better place. So we have a global and we say Redux the so we can now use it. It's a global variable. So no, let's have a look. Is it working now? And now it's working all right. And let's do the same here. Let's just copy this line. Go here and pace int. And just instead of text email, we say text phone. Then we also need course this one and put it here. So this will be printed if there is a phone number and we paste it. Copy this. What a tear and say Redux team text full. Okay, save this. Let's have a look. And don't worry about the color. The color change because of relax. A notable change color. But this I will show you later how to do it. So now we have also our Facebook, and here we can just use the same logic. So we go here and say, if named it text Facebook or no, we named head on Facebook. Okay, so ive Hera Facebook is not empty. So let's take on some clothes. The if statement. So if this one is not empty, then there should be the had a Facebook so kind of this. And now we need to do it for everyone for let's just have a look if it's working, but yeah, off course, it's working. So let's copy this and yeah, I know it's very simple. Just do it for every link, Put a tear. It's year. And now we just need to change your instead of had a Facebook Twitter head on. Good had a linked in in terror you. So now we can Korpi it Or just take this, take this patient everywhere and put it Twitter and linked in and, of course, YouTube. Okay, how safe it. And let's have a look. It should work this stuff, this stuff okay, looking good. And now let's click on sample options. Or let's even instead of clicking on sample options because it's a very visual and the user should see what's happening. So let's click on the customizer and use it because, yeah, more obvious what's happening and we won't see right now how my T read X is because it's a very nice optional panel. But, yeah, Hera is kind of ready now. We will also need to yeah, make the menu working and also off course, the Fuhrer. Now we can see we have right here, our head of feuds. Is it awesome, or is it awesome? And now we can click on the era off course. We get make like it's section like Hedda or like phone and email and like social likens. So in what happens, we re wolf like Facebook. So if you don't have Facebook, you don't need to put an end. Yes, so I would say, Let's go to read X con thick and write it also down, put in your head a Facebook link. And if you don't half Facebook, leave it empty. Kind of this and just made for Twitter. So because what? Everyone's using Google Twitter, YouTube. So did you do good linked in and have you? You, too. Leave it empty, safe and yeah, that's it. That's the headem. Now we also need to make this kind of stuff, like, more dynamic or make a dynamic so the customer can also put in here everything and also let's make the navigation. 12. Dynamic Navbar: Now let's make our Nef Bar navigation bar dynamic. So first of all, let's remove this. And here we have our list off items, and I would say we just remove everything from here and there is already the navigation pre mate. Let's have a look in our function of PHP, and here we can see Here is how you can re guess the your menu. It's already done, so we just need to use Menu one. It's our primary menu, so it's really you stood. And now we need to go to Hera and lets you use the function called PHP and just down here that's close it. Then go right here and let's type in VP Nass menu. And here we need some arguments. So we type in, that's type it here array and let's put in the array light on a theme location and let's say it's men you want. And also we can just cool here and type in main class. Oh, a mistake. You're what's wrong? Theme Locational Here. So this and then that one and we can say menu Kloss. And in many class, we have to put in Nef Nef Bar. So the classes we need. So I need Neff Bar Nef Neft border right? And mainly so that's it. If you don't know how to use like this function, you can just google it so I will show you. You just put in and worked pretty put in at work. Chris. Developer, Developer. It's very good site. And here you can actually see all the Yeah, how the function is working. So you can also make it like arcs and put in arcs and arguments. Hold stuff you need so you can see you can put a container container class contained I d everything you want, everything you need and yeah, So if you don't know how to do it here you can see you can item rapper theme location and so on. But we just need the menu class. So it's wrapped in the class and yeah, also, the theme location should be many one and we re just that many one. We will also reduce the food. So no, let's have a look. I would say, How does it look like? Is it working? And yes, it's working. Here's our menu. We can go to customizer or you can also create a menu. I think it's even here. You can see we have, like, create new menu, Ford's menu. The implication Next and we can put in here some items put it like home sample page and so on and published so we can work with the Customizer. It's very nice, So off course we will create some more women. We will create the block page, the contact page. We will create the gallery. It will be very nice and you will learn a lot. So now we have our menu and we should work with the Fuhrer because here we have, like one menu here we have another menu here we have a contact form. This will be also great create. And here we have just some simple information like you can. There are two different ways to do it. We will just can create Vigee. It's or Ocon go for the Redux or for another way. And instead of creating widgets, we can just say Yeah, let's create yeah, some fields and just say like this one. You can put it in. You should put in, like one navigation here, one navigations here you should put in your contact field and here you should put in all your like information. So let's do it 13. Adding contact form to TGM: The next step is to download the Contact Firm seven. So we typed in contact for seven were press click on the first link and don't put it. So now we have our contact form. So rename it Just contact form and we should open folder like some h two dogs read ducks, VP content themes read ducks. And we also need our um you Where is it? Off again? Redux theme Hope Met with over coat at a time. So yeah, we put it in lip plug ins. Okay, so we go to lip plug ins and here we put in also or contact form. So we copied this parade and put it right here. And what's called contact for seven. It's look contact form. Of course, we can put in this right contact form and here we need to put in the name off the contact form. So just copy the name instead Off Redux Framework, contact form. We can also put in the burden if we need that. Also, put in here the version. It's not a must have. So first situation. True. Now let's safe it and let's have a look. So now let's refresh the webpage. And as you can see, this theme requires the following plug in contact Form seven. Begin installation. So it's also pre packed. Very important. If you want to sell your teams on the forest, that should always be pre packed and diversion. Yeah, you should use. Okay. Don't know. Failed. Valid. Ural was not improved. Trended. Quite plug ins. Okay, let's have a look. Lip plug ins. Okay, just one. Here. Let's look on details. Just copy. It's and put it right here. And then remove a lot of the stuff here. Here. And then again, the name so kind of this and now it should work. So it's update again. Pre packed and stall. Don't know. Don't know. C h e dog sweep out here. Here. We have a problem. Of course. Don't forget to put in here the dot Zip. That was my mistake. So now save it and return. And now, off course, plug in, installed, successfully returned to require plug ins, so yeah, Don't forget. Pleased to put in here after the name the dot Said Okay, that's it. 14. Adding Footer fields in Redux: Now let's go back to our relax conflict and create in other fields. So for under for our Fouda, just copy first and let's have a look. So title now it will be for our fields I d Scinto these on the food fields And here it's what can just put in Google Redux Aikens and then click on Aikens and we can select one of them And let's just use I don't know about So just put into your boat you can use all of them. So now the subsection we can say What do we need we need? Like I would say there will be like two menus so we don't need her put in there. We just need let's have a look So how do so this one? My legs reload the page. So here on top, we will We have already like our main menu and here on yeah, at the fuera we should have, like, another two menus. So here a main issue money so we don't need to put in every anything and we need our Yeah, we needs to put in here like a text field because we can do it with short coats and also here we can Yeah, we just need text feel its 12345 five text fields. So we have, like here for our text and here we can put in all your food er details and then just 1st 1 should be. Let's call it the idea should be text contact, pipe text, title con ticked and here description. Put in your contact form shot cold Here we can put in like the details. For example, ST phone website email so ST Phone website. And he made off course. We will also need I see Food Street full of phone, a website for the email and this too we don't really need. So let's delete them. And so we have, like text contact pipe text title contact here we have titled ST or address Put anger Head Druce Phone titles, phone put in your number. They lead all the stuff. Then we have food or website. Put in your website link for your website just upset. Also rename it website and last one for your email type. No, no, no title email and put in your email also, let's change right before things here website or yeah, website and your phone and the street. And of course, we will also use the same technique. So if the yeah user is putting in hiss headdress, there will be the address shown. But if he Yes, he does not want to show his address. Why ever okay or no? He does not want to publish his phone number. We just don't show it. So again we will work with the if statement. But right now, let's have a look. I was working is working well. Shit like Oh, wait. Yes, it's working. So we have, like our header fields for our fields. We could also separate them like, say, like put in and the first, like separate the food er fields and instead off putting all together just Oh, it also space Herrara we can use. Where is it? Yeah, the Fuhrer and share instead of the head. Oh, we could use to off this subsections, so no, we have, like, here, everything. Everything off course. It's not showing because we're accusing them, but yeah, let's let's do it like I mentioned. So let's just Korpi all the stuff again from here. Yes, copy it then. And put it all here and let's have a look. And this one, we will use only the contact. So this this also we will need to change it like food text to let's update. Okay, it was a mistake for on the 26. So this this closing this and maybe it's because this one is missing. Yes, of course. We need to also one more. So here. This is closing. This is closing here, this one. So we are missing right now. One more. So let's put it here. Now let's have a look. No slowing. So don't forget the brackets. Very important. So them right year. Okay, so we have, like, our for our fields also. Yeah, for a text to and Oh, yeah, I fall started text text contact. Let's say year because we will change it. Um why is it in the throwing? Because let's say to how reload Because we have to change also the i d. So now it will show up and we will need to delete this text contact is pregnant off the briquettes. Yes. OK, so now let's have a look. You need to click again on four fields and just look it up. And now you can see we have, like, two times the fuera We can rename it instead of the four. Or we can say contact. Let's say contact section your contact said she and Mase information like information for oops. Information section. Okay, here we have this. Hugh has like this. Put in your contact form short coat and we will also need to change. The now can delete it. This one, It's because change it on and here we can instead of default, we can just put nothing. So Okay, all right. Now we will need to work with over Fouda and make the foot of dynamic. 15. Dynamic Footer: Okay, Now let's make our Fuhrer dynamic. Let's go to for a typing. Over here we have our forum and let's create another menu. So from this stuff, we just put it again P h p the p enough menu. And for the arguments we will put in the array. And here we put okay, we will need to close off course our ph here, close brackets. And then let's write down theme location, occasion and the location. We will also create one. Let's go again to function PHP and here reduced enough menus. Just copy it two times Pace that here and here. Let's call this for a so one and for ah to Okay, and let's call this menu to and menu three. Now we can just safe it. And here, theme location, Let's say, yeah, this is menu to when you to and copy on the stuff. Pace isn't here and menu three. So we have two menus right here. Off course. We could make also this information, um, dynamic, you know how to do it here. We have all use letter and we can put in our contact form, so let's go. And here on the website. Let's click on where is it Worse or contact Form. So we have, like, plug ins settings and here we have, like, over contact form. So let's copy it or yeah, that's copy it. And we need also off course the global variable. So type in Lowell DA law reduction theme so we can use the global very well. And now we can paste in all this stuff so worse, whole steps, right Buttons year We have oh, subscribed form and then we just put in a year Oops. Lead it PHP. And how to put in a short coat Very easy. Just go to hear like and putting do shot coat and then our redux theme and we name it Redux conflicts. So we have to for two text contact to so type in text con Picked to of course, if statement p h p if it's it's not empty, Do this stuff. And here And what if contact oohs and empty Do short court text contact to All right, safe it then off course, our normal information. We just need to go here se ph each he cool and type in. Don't know Redux theme. I can't call it. It's conflict. So you I d Food street with the phone from the street. Let's copy it and that's remove it or we need it. No, this one. We don't dreaming to do so full of ST, then phone. You can Korpi it and put in. But this this this also don't forget if statements very important. PHP if there is for a street, isn't everything corrects. I think we need to. Let's copy this blessed with mistake. So here we go soon it's putting ST If there's Fuller Street, then, dude, this so kind of dead. And here we need to copy it sometime here, here and holds here. So if it's working and we'll need to copy here and put it's right there and, of course, change here like food. A phone is dried. Yes, food phone for a website for the email. All right, let's do it. Food foam foam off course food website, website and food. Her email e mail pasted right text contact to text contact to text Contact to is correct. So now it should work. Of course, we will need to work a little bit on the contact form, so let's have a look. Okay. No, it's lowering. We have hope. Here's little mistake. Okay. I said, look, the if statement it is correct. OK, there was a little mistake. Just remove this kind of brackets and put in these. So let's do it like this. The moth. And also here. So right there. Now it should work. All right, now it's working off course. Now we will work with the contact page or with the contact form. 16. Adding the Contact form to the Footer: So right now, this is how the contact form this looking like and yeah, we need to change it. So we goto our dashboard, and here are contact contact from one off course, we will need to copy this shot coat, go to sample options our Fuhrer feels and put in here our contact information or short coat you put in your contact form shop. So right now we need to go back to our contact conduct for one, and we don't need this kind off stuff. So let's remove a little bit. So the first thing I would say that we need to remove ISS? Yeah. Name? Yeah. Also the subject we don't need. And the message. We just need the email and the submit button. But now it bones look good because there are no classes at it. So it's very easy to put in some classes. Just yeah, put in here. We need to use Look, Kloss, Right, Plus And let's type in move. Subscribe, But And here we need to type in class and class. Waas. True things. I had no class. Let's have a look here. We need to put in form Yellen. Let's have a look. Let's say like this, I would look. Okay, Open it again. All right, now there's off course here. You should not have the gap just removed the gap safe and no, ich it work. 17. Challenge dynamic All Rights Reserved: Now, I have a little challenge for you. You have all the knowledge. Try to make this dynamic. So stop the video and try it. Okay, Now I will show you how I will do it. So first of all, that's kindred off it. We don't need it. So just take this on and we don't need it so kind of this and go to read X conflict. I would say here, Well, it's also in the for us. So in this section, this just copy this section. So we have, like, food or text three. And here you can put in a lot. Uh, yeah, Just let's Yep. This is so right. Just changed the pipe or the A D. Let's text, um, bottom and text Tyto all rights reserved and put in your text or leave it empty and fold. You can put it all rights reserved. 2019. Okay. No, we go back for Sarah, and let's say the whole section won't show up. So again, PHP. If it's copy, it read X team text. Bottom is not empty. That would. So we have like def, def, def, def, def, def. Years. Right. So kind of this. And of course, we need Ph. P and he Cold Redux Theme picks bottom. So now it should for hundreds trying parse readers conflict. A little mistake, this form. So we have for you here for this, then for that. Shouldn't be there. This, then. Yes. Now it should work. No, it's empty to it's customized export in. So we have, like, photo, then. Okay. You should No, no, no, it's showing. Okay, all right. And let's rename it the all rights reserved. So kind of this. So perfect. No, let's go on. 18. Redux adding Switcher Fields: Now let's work with our logo. The user should decide between light. It's up more hair file and Redox conflict here. He should decide between, like, this line of code, so just he will just type in this local name and choose in Knighton or upload that PNG file or image whatever. So let's have look how to do it with Redux. I would say we should like more sample options and then let's have a look here we have our switch button, and I like this one so the user or the owner of the website can decide between the two types between, like the image and normal spend. So let's have a look how to do it. We just need to open our Redick's conflict, and yet type it search for the switch. Then we just need to copy all of it. Let's just take it all like this and then put it unpopped type in. So we are here and after our for ah, or is it you all rights reserved and then just put in our switch off course. It's not showing up, not right now, because we also need to change at the I D everywhere. Like say, like here. Switch buttons It one and switch button said put every well, one. And here option. But one that's changed the I. D one. Because otherwise it won't show up. Postal can't or we should not use the i d again. So now let's have a look. Here we go. Hour switch, button set. And now we just need to change its We have like us. Which button said, but off course we will rename it to logo. It's just head uh Lubell. Okay, this is a header logo. Then we have buttons. Heads. This is this kind of title, So just name it ruble changer. And the description Put in your upload your logo, upload your local subsection. True. Then we have dated, but yeah, the option 400. Oh, here, little mistake. We don't really need this stuff or let's have a look. Do you need this array? But I think we should use only Yeah, this is the local changer. No, we don't need the local. We need to switch so and let's remove it. So we have all the coats year and removed so and just change here. The title to Noble switch. Just take like this Lugou description. Upload your Lubell. No update upset again and year. Here we have our sweet Okay, 400. Again. Same mistake. Yeah, we have, like, our switch one. Switch one off and on. But we don't really need this switches. We just need this switch parent and the to switch child. So I would say, Yeah, we just need this sable and enable stuff, So let's remove this too. Switch one. So let's have a look which are here. Required switch parent. And we named that which one? And so, no, we should update the website again. And also got change year everywhere. The coat year instead off titles which I let's call it switch Teoh or let's shoes between the, uh, global. So you know, it's working or just Mm. Yeah, no call switch. So your subtitle That's changing. Swell. Just say, um, you can upload your Louisville and here we have tied to. So, um upload Title two. Okay, so we have let this and here we should happens that instead, off another switches we should use our and yeah media files. So let's have a look how to use them. Okay, this one we will do in the next chapter. 19. Redux adding Fields to the Switcher: Now let's work with our local. So what we need is go here. And as you can see, we have, like the switcher, the logo switcher. And we need to Yeah, we don't need this to switcher. And but we need the media upload. So we need this feel. So let's just copy it bends put a coherence. Just take out this field group, this array. So let's take this Korpi IDs Back to Hera or switcher, which here are switch No, on top. You're this one. And let's put in our media upload. So let's put it here. No, All so change the idea from opportunity Dia logo type fluent. Also, it's very important to change the title. Put in your luego upload uploads description. Here, you can upload your local and we have also default image. And then we also need this line off coat the required array so the switcher will work. So here we have required switch current one safe. So more for this too switcher. Okay, safe and reload the page. No, we have our local year able. No, it's working. And we need also, um yeah, here. Just a normal text field for our normal. So when someone's when this is disabled, he can just write down ISS Louisville like diversity. And when it's enabled, you will up or users can upload hiss. Luego. This is the logic behind it. So let's do it. Let's say you just take our text beret and put it here soon. This may be a 2nd 1 for, but I can so se text noble and takes or text Iten Text Lou and change Aiken for the Lobo tight, too. The Google text, Ford Person and you D Ford's can just change its your take Worse are Louisville here Far Far University. So let's put it in okay, No safe and look so working abled and then were able it. And we can put in this. We can also let's take this route quiet, and I just want to test something. Maybe it's working. Let's say if it's zero zero, no would be amazing if it's working, but it's not necessary because, um, yeah, we will. We can do that even without the suit. Quiet. So it's a look perfect. No, it's you can see the customer. The user can just if he's this Ebeling, the Louisville you can upload. You can just use the Eiken or enable it. And a flotus luego. All right, and now we just need to put it all here. 20. Redux adding Logo: Okay. I opened the documentation off each of this sections, for example, for the switch and for the media here, you can just click on it, and then it will open up. And you can just read the documentation. For example, for the switch, you can use this line of code, and then you will see what is happening. What's is printing out this and the at field. So let's have a look. So, for example, if you wanna use your local, you need to Yeah, if you're global, variable and then it's Yeah, the array. And you should use the I d. And then for me you're else. Oh, okay. Understand this. And here we can just copy this line and have a look how the switcher is working. So course over P h. P. We have Redux. The and the switcher is called. Um, and this oneness, this is the logo upload. And this is the switcher. So parents one. So look, zero. And if we change it like to okay, it will print old one. So now we can work with it. So where is it true? Like it's abled and disabled. So if we and a bullet safe, for example, It shoot, print out the one soon look, Safed. And yes, all right, now we can work with it. Let's program a little bit. So I would say ph. P is Oh, Redux the, um called name. Which parent? One. A switch parent. One equals one. This one. Um then you're cool. It should work, and then we just need to put in here. Okay. Off course year now work. And we will need Yes, it's working. All right, let's make it like this. And if one it's if it's an abled, we will use this line Close. It's year. Oh, it's right, you're Ph. And now we shoot. Put in. Yeah, the else statement. Els, just take this for it. Here, Corson Ph And so now it should work here. Yes, this one should print out this stuff. So also, we need goto our readers conflict and use our media option local up to global. So let's put it here. Copy this line. And there just so this in. All right, Reader Team Mint off course. We need the u R l. So just copy this line and put it right here. - So this so if it's one it will quoting this local and l's if it zero it shoots, print off the normal one. Also, let's make another if statement. If you're go, I would just leave. It may be you don't need it. Even so, let's try uploads to refresh over safely. Yes, so now we have. Why is it like this? Because we have a PLO que global and so disable it and safe, Dangerous. It's put in old. So yeah, noble save changes. Let's old So equaled our statement or switch parent to year say equal sweets. Okay, so it's disabled and said Look okay, I see. I see the problem. It's the option logo, I think. Is that our Logan? No, it's true. 69. So look again, Just how to find phone? No, just go. Your pidge p and switch parent and bqool. Okay, it's zero. Okay. No, it's working. Strange. So the else statement is working and now we switch on able it if we don't. This is normal. Lugou, remove this line. Yeah, it said so. We say here if our no print Lubell and then so we can just look up here and upload or mobile Goto files select files here in our assets. Image taken. Use our local Select the file uses safe changes. Okay, No safety and we can upload it. Save changes. Okay. Setting saved now it should work. So looking customizer you are Well, all right. I think you you can also go to the readers. Come. Oh, is it safe? No. Saved. Um and we can your worst default. Yes. So it's default enabled. And here we can also change the default statement. So let's look every move, you click on it. And that's very important that it's zero. Um because otherwise there will be this mogul instead off no one. So care host. So disable it. Okay, if we disable it, this is working right? You see, you can just published it will change. Then we also need okay, It's not changing. Let's fix it. Okay. To fix this problem, we just need to put in here. ICO rejects theme Opti local. You were l. So now safe it. We can go to the up loader, upload our logo, and voila. Now everything is working so we can save lit here. It can see this is like a local text right now. Off course, we will. Yeah. We can also put in here our Redick steam like before you just put in P h p p h p and your ended. And we just need instead off option luego we need Oh, are text I pinned or no text? Lubell? Yes. Taste noble. And here we just need Oh, Ph, Ph p Who's just take this and for in the text. No, I can right now. Now it should work. And that's a look. We have our next Aiken Lubell, and it should work. It's like a local into You were able to how to disable it, then just change all the stuff, All the textures here. You can see it's working, So publish it. And, yeah, course in our panel, we can Yeah. Updated. Okay, so that's a look here. The user can also go to the panel here. Of course it's working like this. So very nice. And let's go on. Now we are We need to make our front page 21. Creating Pages: Now let's create our pages. So go to pages and at new. So the 1st 1 moved home published. Also, let's create Block Gallery and Contact Contact. Okay, publish. We should also goto our settings reading and but choose aesthetic page and home pitch should be home and post page should be block safe changes. And let's also create some posts. A new it's called him. Put one publish all its put in some Logan Ipsum. Just a little bit text. You're also let's put in an image slept files and here we have some one select update. New post close to text. Let's old so sets and featured image. So let's take a look too Publish and the last one post free, post free sit featured image. Upload this one all rights and publish s Well, let's have a look on all posts. Hello World. Let's lead it also pages and let's delete the sample page. All right, that's it. And no, let's go on 22. Adding Advanced Custom Fields to TGM: for our front page, our home page. We will use the advanced custom fields, so it's also plugging, So let's use T G M. Let's open our read X theme. And, of course, let's download our it bronze custom fields. Type in advance Custom foods here that's downloaded down Note. Right portal that stopped. And here we go. Let's put it also on our folder lip plug ins and here we, g, O and I would like this changed the name advanced costume fears. It's look advanced custom fields, and it's put in the name of it. So this quite true version in Put in. But we don't need for situation. True force. Let's save it and let's update our website. You can see we need to install it installed plug. And so when the customer for the user bore to your theme, he can install the plug and very easy. And it's game is very nice. Plug in and must have it like every professional themed developer is using it. So my advice is to use it as well. Okay, No, we can go on with our front page and work with the custom fields 23. Installing the Show Current Template Plugin and creating Navbar: First of all, we need to create our new page. So let's our front page. So let's copied the index PHP and let's rename it to front page. So now this is our home page and index is our blocked page. So let's hope from Page and yeah, that's it. Now we can work with it and, yeah, use over casting feel. So as you can see here, this is our front page. There is a very nice plug in called and show current template. And yeah, we can use it to see on which page we are. So show current templates. Yes, and it's install it and activated, activated. Go back to our front page unless you can see the front page ist our home page. All right, let's also change a little bit. Our menu put in some. Yeah, some more pages. Let's remove it. And all of these also removed home page. And you it should be primary issue. Remember, it's on top, so save Woods. Let's have a look. Yeah, no, we have order pages here on the top off our navigation bar. Let's go on 24. Creating Custom Fields: Let's work with our custom feuds. So click on Add new. We could also make our home pitch dynamic for freedoms. But advanced custom feuds are more professional, in my opinion. So and I also want you to show you how to make professional WordPress themes premium. So let's miss your page is equal to and year we can She's page type front page. All right now we need to a field feuds labour. Let's open it up And let's say we need feel group title slider and it's type text. Okay, here. This one should be life here we need well in background image. So it's a image. Food name, image top. Where is it? We need the type image. So here and re quiet. Yes. Image your l sighs like let's take full size library All. Okay, perfect. Let's at a new one. Next one should be the text. Welcome to that's called it. Well, come text u g o type text. Oops. Here. Fuel name. Welcome. Text text required. Yes, And at a new one field text to its name. It required. Yes. Okay, heads another one Meds. Prudence. You're like text free. It's free. Course. You can choose another named for the label, and the last one should be. And but he text button texts. Your g o quiet. Yes, So save it and let's have a look that's updated. We have the image. Welcome text text to text three and the button text. So let's go to our pages and look our home page. And this you can see here. Slider. We have like slider image. Welcome text text two takes free button text. So let's make another slider because we have, like, two images. So go here. Let's say at a new it's called or should we? You could just used the same one because it's the same section. It's the slider section. So click on slider and front page and let's field tied. That's used again. Our text field or let's use here. Or image, um, slider image to required. Yes, you around flute size at new slider texts. Call this one slider text at new, smarter text to it. New slider text that takes two. I'm the last one should be Oh, we should change it to text area off course. We can also put in a construction, but I think can boot on your own, so I don't wanna waste your time. So slide a text three text area and last one should be normal text, slider link or button text to bucking thing. It's called a button thing, but Lynn to required. Yes, all right, it's updated, so we have image. Welcome text takes to take three button text image to slider text lighter. And let's also change this text. Three. Off course. It's not the best name like we should rename them, but yeah, let's change it takes area. So now the user shoots hit the texts and the images So let's have a look going back to our home page And as you can see, we can over more slider and then image Welcome text through text three takes to then we have image to slider and OK in the next chapter I will show you how to use it 25. Dynamic Slider Section: Let's move on and make our front Patriot dynamic. So let's go to home our home page. And as you can see, we should fill out all the Texas all these stuff. So let's upload Slider one select Welcome text. Let's just call Piers from our home page. So welcome, then we have our picks to and takes three. I said Lou longer. Let's just copy it. All right, in. Yeah. Okay. Here can just make this hashtag But you should put in your real link, then. Here, upload files. That's choose this one. Slider text this this and this text here, the hash tick. Okay, let's save it. It's update and let's work with it. So let's go to our custom fields. Click on it. So let's have a look. So we have our slider and we should to the top. And here we have to put in the fear and off course, the field. And here we have our name image, the feet image. Is it working? Yeah. Yes, You can see this is our image and off course. We can just copy it and put it here. Here, this is a little bit longer. So this piglets fill it out. So welcome text instead image. I would have text to 6263 Thanks. Three. It's Copy it again. Put in right here or button, but text and looking old. So have a look. Save it and no, let's look. And yes, you can see it is working. So when we change for example Here, let's say we will help you and an update. Let's see, We will help so and again. This is how it works. Of course we can do it also for this one. It's just remove everything here. All right? Said, look yeah, yeah, I m Let's just put it in every where. So this will se a lot off time. And you then we should just put in here the image, then off course, our slider text Put it there. Slow text to six to text three, three and button. Also create the button. So save it and it should work. Yes, it can see everything is working and yeah, we can just remove the 3rd 1 So it's just removed this and then we have our to Slater update, and yeah, and this is how you make your website dynamic. and yes, off course. You You should do it for this and all the other sections. So yeah, I will show you also on this example how to do it. And yeah, now it's your task. Try it on your own. Make this kind off section, um, dynamic and yeah, I will show your whole I did it. 26. Dynamic Service Section: Okay, let's work with our service section. Click on custom feuds at new entered title service. And the first I feel it should be labeled service Aiken and type off course text. We can put in instruction birds. Yeah, just leave it Required. Yes. And also another field. Next few should be the tighter so fire field label that service Tyto and type off field off course Text quiet. Yes. And just put in like, um, type in your title title and then that new and your can if you label service, text and put in text area. This is for longer texts. So required years and okay, no. Here. All the same. Service image or serves Aiken type text required. Yes. And new service. Tired to type title Two off course. We can't use the same. Did he? Did we move here? Way Can't use the same. Here will be here. We used serves. Aiken, don't make this mistake. We can't use service. I can again, because this will be like the i d. And we can't use it two time. So it's put in sort of Satan to and then at sealed. And here we should use service um, text two. So service text to yes service or let's rename service title. I think it's better. Title tired toe. All right, close it. Here. Service text two takes two course. We can require t years close the feared then another one service I can three and quiet service and titled Free Quiet and service text three and of course, quiets and all right, that sits No, we can ingest Publish. So we have our meter boxes and let's go on the pages or Yeah, let's go pages. Oh, pages and you fill it out. So we have our home page off course. We could also Yeah, remove the service, Aiken because, yeah, maybe the user off the website. Um, yeah, it's not knowing, like front Awesome. And yeah, not knowing how to based there some Aikens, because now we we'll do it kind of this. So let's close this one. Custom fields Feeling groups here we have to go to service and also for gore. It's We need to say that here the location. So it's equal to, um page you page template and then home. And now we can update it and we will see this Aikens Onley on the home page, not on the other pages, because the other pages they don't have um yeah, this section's they will have their own sections off course. So we go home, and now we should have our Yes, of course. You know, we go. So we have our slider section and our service section, and now we should fill it out. So we put in here we g o for Facebook, then online this text. As I mentioned before, we could also, huh? Um yeah. Don't use this, um, service, Aikens, because the user may be is not knowing fund. Awesome. And yeah. So you will have some troubles to use it off. Course we can put it in the instruction, like right down here. Please put in your front awesome Aikens like forethought book and yeah, but some people are not reading the instructions, so Okay, let's put it again off Facebook. Smets here is You can see this is the instruction. And here we could or should put in in the instruction, like please poor in your front. Awesome. I can like Facebook and the front. Awesome. Aiken's You have some examples on the front. Awesome. dot com website so the user will know. Okay, this is how I can use my items and just choose my own Aiken's okay? This was wrong. You're just putting in three time. And here we can just put in light I use Okay, we table maybe steak, but doesn't mirror best classrooms. And so we filled it out. Now we can update it and just moving fast. And you just copy again to safe your time. It's going here and put in the field slider. And instead of slider text, we can go off course and or costume site. But of course it's this soon. Put it in that Korpi it put it here. I can too. And I can. Three service title. We can just soon's Thai through So his title and last one. And of course, this long text we could sure also use instead off. Yeah, we used their text variant here, son. A normal texts, but it doesn't really matter. So you can do it all we wound. It's won't change anything. So those here you just have a little bit more space. We have service texts that this text Terry and this is a normal text normally used for long attacks. Of course this one. And for titles this foot just do it. How you want? It's here. We so takes three. So OK, and now let's have looking our what pitch. So we update it. Of course. Nothing changed because we just call Pete. Everything okay? Here we have every we'll learn on London Online course we can change it, but yet I don't want to waste your time, so let's go on. 27. Dynamic About Section: Let's also create our about a section and new it about as off course our page template, um, paid home. And now we can add some fields. We need the title and it about title or about title like this require ts, and we also need the about text like this Tyne. Just put in our label a boat text and we can use instead of text or text area. We can use, for example, the editor. Be quiet. Yes, and we also need here our image. We need video about video image and this should be image. Be quiet. Yes, emits u R l and we also need the video link about video link. So let's type in here. Just let's select it field text required. Yes and yeah, that's it. So let's publish it. No, go to our pages or pages and select the home page. And this you can see here we can just put in all our stuff. So let's here select title copy Paste, then our who's, uh, here It's copy it like this and yeah, I'm not sure if it will work. Let's have a look. Uh, maybe we can instead of visual weaken like this. Yeah. Now, as you can see, we can just choose the text and then work, then selecting image. Just go foils and I am G. And then let's select this one. Let's choose it. Video link. We can just put it this way. We don't have a link right now, so yeah, that's it. Off course update. And let's copy this line off cold and paste the tear and call it a about title. Then remove on this stuff and poor in the field service. I know about text in boats. Texts. Remove it. Here. We have to take like this and foreign our about video link. So I've been about video link and your we can choose and about video image. So step in about video image, save it and no reload. And as you can see, it's working. Now we have our video and yeah, let's move on 28. Dynamic Counter Section: No. We need to create our counter section and our features sections said she. So here, off course update and go to our custom field groups at new Let's counter. And we need, of course, like, oh, number end subject number. Students number moron left. So we call it, um, here we need at field number. Oh, it's type it here. Counter number that text required. And at new counter text required. Of course. Again. Counter number two required. Counter it's counter ticks to required. Counter number three, counter number, counter text three. And the loss, of course. Quiet and lost. One counter backgrounds. Inmates required off course. Okay. We can also put in the instruction and select a background image for this section. Okay, Now you can publish it. Go to our rules. Select again. Oops. Select again. Page home update going Toe pages select the home page. And here we can put in our numbers. 80. Uh, here. Here we go. Five hundreds, 68 subjects and your this text 65 more wrong that this You okay, off course. Let's update it. And let's change over background image. I mean, our field type. I made a mistake. Of course, we should choose here instead. Off you're That's a look. Instead, off counter background image instead of text we have to use were image. And let's also select image You are l update. No, we can just go through all pages, select our home page and yeah, here we go. And now we can select our background image. So let's choose it. Let's take like this and no, let's make it dynamic Hopes Copy again this line, but a tear counter number tone to number, then can carpet it again and put it here everywhere. Counter number to come through number three and then here. Off course. Counter text, text. Copy it again and put it right here. Here we go. Text three and okay. Or a middle mistake she is for Let's just make last one like the first. This culture counter texts. Um, this is should be counter text counter number. Of course. Yes, this And what else should we do? We should place their background image. The background image should be placed. Um right here were the section ists starting. So here we should put in style and then we type in background emits you are. L here we should poor in our Ph PHP line years, and we call it counter background image. Okay, so we check in counter background, image it, and you go like this. This is everything. Correct? Just checking. You're this looks right. So let's look, is it working off course here? We need to update our boat. A section. Let's have a look and updates. Okay, Let's have a look. Why is it showing background image, background image the field? Oh, I here is my mistake. Background. So now it should work. Just a little spelling mistake. That's a look. Even call p it. Yeah. Now, as you can see, it is working and let's go on. 29. Dynamic Features Section: The last section is our feature section, and let's have a look how to create it. We just knew Enter Tyto features sex. No, just features here we can equal to home then at Field Features title require it features title description. We can say it's also required or we can also, I will show you how to use third this meter boxes when we put in that it's not required. So it's one we need. No, I can ty to text and drink more. I won't do it for all of these because it will take too much time. I would just show you on one example, So I will put in item futures. I can text required features. Um, that's called it Or let's call it this is features title. It's called US Teachers. All that's called this one Features features head on instead of title. Yeah, required features text spelling mistake features takes It's copy it movement, Um, and also the button. So let's put it this year, um, features button them. We can also create a button name, but I think we'd Morris good enough so it's on top. Publish and, as you could see, features title features, description and so on. So back to our pages. Some like the homepage and now we can. I've been all our texts. So our features again. This could be also text area, but it's not necessary. So we can just use our text field than features I can again here. We should also put in the description. So let's take it head on. Professional takes. Let's take on this stuff takes than the button link. Okay, this this safe and no, let's again this line of code let's called features title features. Tyto, Your Lordship, put in on futures title description. Teachers tired to description futures itin off course. Shit. Also use futures. I can features head. Oh, I had, uh, this out off year and put features, text the truce. Pigs and features link true's funding button. Think Oh, okay. Button link. Okay. Safe. Of course. Say this also and go and let's have a look. It's everything working. Yes. You can see everything's worth working, all right. And yeah, we can just move on. And now it will be very interesting because we will learn how to use the loop, But before learning how to use the loop. I I want to show you one more thing here, as you can see. And where is it's? Or service service features that service. Okay, this is should update it. Waas Right here. We used, um, a non required field. And if we do it like this, it was on the feet futures title description. We always have to write lying more so we have to write down. And if statements. So if this line of cold then second So this is working unjust just like this nosing here. So if statement so because, as you can see, let's close our here. Here we go. It's non very quiet. It's not required. So we should when we use a field, there is not required. We can use the if statement and also put in here, for example ends. So yeah, that's it. Now we can do over block section 30. Adding Blog Posts: Now let's have look how to display the posts on our webpage. We will use the loop. And yet, off course, you can make this title in the title description. Also dynamic with our custom fields. And yeah, so let's have a look how to use the loop. We have, like our column before three times, and we'll loop through it so we don't need it anymore. Three times we just need one. So let's delete the article and call them D. And here also article column D. Let's lead it. And, yeah, so now we have our block content, our road. And now let's work a little bit. So let's type in PHP. Let's make a variable called loop and or let's call it arguments, arts and type in a raid. All right. And here we need put in. I wanna type posts because he wanted display our posts. So we created our array, this declaration, and also let's put in posts per page, Page three and yeah, so we have our arguments. That's close or PHP. Okay. And now we need our blue. So we say, you know, new VP query and arcs. So we put in our arguments this so in our repeat query and save it in our loop. So let's move on. And Nuland, here we have our if statement if now this loop were the query is safe. So you say the very the loop here have posts, so it won't show anything if there is no post. So this and then we say do, um, something And what should happen then we have wild. First we check if there are any posts. And if there are any posts we say, Luke, the posts, uh, half posts. If posts this and open it here and close or PHP. And now we need to here Pooran loop, then the posts. All right, So when when we are like in the first loop, it will show all the information from the first loop from the second and the second and so on. So yeah, And now we need to go here in our images and let's say delete it all and use here the work , press function, the post, some name, and here we can put in the size. But I won't use it. I will just maybe use this and then we have our Titan there would be Oh, PHP the part two. Then we have our Edmund. So there is the also in declaration the offer. So let's use it. And the course PHP the offer PHP the date and also use here. PHP Comments number. Here we go. Then we have our close it here we have our excerpt. So PHP the excerpt and let's use here the WordPress function, the perm link Let's close it swell and how we need to close our bracket. So let's have a look. We have, like, over diff then Our article It's here. Oops. Here we have our article. Where is it? So that if is starting so article def. So we need to go under here. We need to close it right here. P h p and while and PHP. And if all right, because here the article is ending the and yet, so no, it should worked. Okay, Nurse, a little mistake out here. We need to put in a size and maybe we can or Oh, no. Here, this little and 307 307. It's our And while and if, of course, we need to take this out and put it here. This was correct. But when we're using and if and And while we can use this type off coding so we can see it better. Okay, let's have a look. What? Save it now. It should work. Yes. Can see our posts. Our page and everything is working. Let's move on and yeah. 31. Creating the Blog and working with the Widgets: let's move on and create our block page. So when we look right now on our block page, we can see that the template index PHP this hour and block template. So let's old mitt and let's open our HTML file so we can copy all the coat. Because this isn't how our website are blocked. Page should look like So this and our index page. Here you go. All right, now that's open. Blocked up html. And this is over. Head on. And here we go. No, this No. Where should we take it? We need have a look year here. Curse content or leads? Just take also this cold. So let's have a look. Skopje on this stuff. Of course Here. Or is it? And remove or this? Copy it off course We don't need the food. Let's remove the filter on. Now we have our section. Here is our section and here we have our block and let's so removed This one and this I thought so. This and this line off cold. And you let's leave it like this. And OK, one. Now we need to work with our block and here we need to work a little bit more. So we have our row. Then we have over called and these six. So here is where our lube should start. So it's been PHP and again have posts now without because we are on the block page on the block page we don't really need. And the loop only on other pages For example, the home page Or maybe later on our single blocked pages we will also meet the loop soul. But right now we can just nuke the ruse it posts with those and the problems. So this and you go the post and course Elit and it's here. All right. Now we have our column. Six columns six and again Let's remove it on type in PHP the post some and oops and it's here and then off course, the title P h p, the title tied to we can also use here permanently. PHP the per mulling. And Okay, so here we have the p h p, the author. Here we have the date PHP date. Oh, let's make this like that. So the function will work and here we have our block description we can use again. Ex ERT PHP the exert. Okay. Oh, here or comments? PH mean the Commons comments and number. All right, Hugh, we have over for milling PHP the for mulling. And you so are tico spending. But here we have No, we can use our And while and after the while you can use Ph p, and it's let's make it here. So and also remove this column because we are using the loop. Thank que So what is happening? We are looping through all posts. Off course. We could also use arguments and say, like post per page is 345 using the loop. But we can just say please show on posts. Now, let's have a look. This is over. Index page, reload and have a look. So, as you can see, here are our posts. All right, also. Oh, are cyp are is not dynamic birds. We can change it. So, for the sidebar, we need to remember that it's in the call empty three. And it also contains this move site worked us. You can see this this height thus so yeah, we can just remove for this because it's not dynamic. A single site bar, Of course. Uh, this stuff. And now we can say PHP Get sidebar! Let's have a look on this. So we have get sidebar! Um, yeah, Let's all too copy this one aside. Remove this aside and let's open over Get cycle because gets Ieper is opening this file. Where is it? Site Barce Hyper Here. Here we go. It is opening this pile, and we can just Yeah, change is something. So move, sidebar. And and Yeah, and I just want to explain a little bit. So this is what our theme or child theme generated our underscores. And, as you can see, dynamics hyper cyber one. It's a widget. So you can open. We're widgets, dynamic as a re guest here, we can see this is our Seiple cyp er i d cyber one. So, yeah, this is what is happening in this function Dynamics height bar. We reduce that here. A widget reduced this hyper. And now we're using this type are this is the name off the site bar. And yeah, we have some some H two texts which a title and so on. But it's not very important, but this is how you can create your own widgets. and use them here. So now let's have a look. You can just play around the store more than this height bar. Just compete this function and resistance that off cyp er one, you can reduce the food er or whatever side bar. So let's have a look. And that's seen. Yeah, okay, this is our site bar here. We can change it. Of course, we can go to customize and work a bit with our site bar. - You go. Let's have a look. No working off course. Change our sidebar. We don't need to use the surge and so on. We can just type in here and let's remove it. Recent comments also, I don't need it. Yeah, why is it yellow? It's because off the Redox theme, but at the end, off the tutorial or the scores, I will show you how to change the colors and so on. So from worry, we can also add a widget. For example, we can put in right you're maybe this widget calendar typing Kim. It's the lead it's on. And so did this meat. Maybe just use in the Big H and let's select menu menu so you can just use all the, um yeah, on the widgets you want. So it's a weight and Yeah, this is off course. You could style it a little bit in style. The C s s. But this is how it works. Let's go on. 32. Working with the Single Posts Page: Let's work with our single blocked page. So with Silicon, for example, post free, we can see it seen up looking. All right, so we need to make some changes, as you can see. Single dot PHP. Okay, let's work with our single dog. P H p. Some HT dogs read ex VP content themes Redux and that's open. More single of PHP generated by our theme. Underscores and off course. Let's open our block single HTM l so we can make some changes. Here we go. We have, like, or Hedda, then the menu Stop search. Let's take again our I would say course content here. Boots. Just take this and just let's take all this stuff. Here you go. Section here. Okay, Here's the poor section. Let's copy it. Okay. A copy. Go to our single of PHP. Let's remove. I would say we should remove this part are just removed on and it just on this and put this But also we'll need to remove our Cyprus so we don't need this column. The three. So let's remove here. We have our site, So let's first remove everything toe side so we will make any miss takes So course, then called three. And here we have our article. It's moved this art, too. Or let's leave it just right now. And let's have a look how to work with our single. So, first of all, we will need to make again our Wydell. Why have posts? It's not a diluted chest while so it's while while and put here. The Post opposed and and it's here and now we have our content. Container row column D Rip All right area Row column D nine and now the course content container. Um, and here we have another role. So this is our column denying and as you can remember, column the three plus 9 12 for so column Denying this the left side and column D three is the right side column. The three is the sidebar. So let's have a look how the Web setters, right? No, 33. Adding the Wordpress Loop: Okay, let's update the website. He had missed a cough course, you're We need to close our wild. So it's just Yeah, are just don't We are not using right now our post, so we can end it right here. But we will need it. Or just remove it right now. We don't need it. So this is how it looks like, Not how we need to work a little bit on it. So because it should look like so we need, of course, some changes. So this is how it should look like left side. So we will need toe work, a little bits on it. So first, we need to go here and put it again. Oh, wild. So PHP pitch you posts and the post. All right. And so now we have our wild. Now we can use and yeah, this thumbnail title and so on from this site so we can just go here and use the post some name. This is the trump name, or we don't even need to put it in the So the post thumbnail IDs. Um, here we have the post some day, Que so right here, then off course here we need to put in our title the tighter and or PHP. Here we go. Then we have here old author here. We should put in our date the they here, we need to put in our pitch p comments number. And here we can just put in the content. So let's removed all this stuff and just put in Ph. D. Content the contents so and know what's going here. The container and let's and here, our white and why Here we go se and update. So when we are using the post without any declaration of use, as you can see the picture off, this posed the image, the post thump name, the title and so on. And if we wanna use, like here, we want to use all the posts. So we need to yeah, right down here that you have some use, some arguments, you know, to put in like and say, I wanna have all posts and like, how many many. And yet so let's do this. So we have right here, our post, and here we have our related news and we want to show here all the posts. So what should we do? we should put right here. We have column B and sheer. Right again. We see the call and six, and we want to put all our posts in the column D six. So let's have a look. Now again Leads you some arguments and put in some. So we want type used the ray type posts. So I wanna show Oh, posts and also posts Page I would like to use against three. So it's this here and let's end it. So we now we have arguments, and now we can also use again our loop. So that's a loop loop we have. Are we peak? Very. And here we need to put in our arguments. Okay. And now we can use again our if Luke if loop post And while Why? Half posts? Oops. And she conduce this one again. And here we can just say the post. All right. No, we can use on the images. So here we g o p h p the opposed some made and also put in here. We can use and say the thumbnail should have the size 500 to 211. Of course, we can leave it empty like before, But you can also choose how the height and width should be. So here we can use again the title pitch p the title and the permitting Perma link and off course PHP the author and you Ph comments number. And this war's you should put it here and here. We should put in the date, save it and steer. We need to go. And the description. So that's remove all this stuff and put in ph exert here again. PHP the Perma link. All right, now we can remove all the other Call them the six. You would go again, You can say P h p Let's end it rich here. And we should not forget about our sidebar. So we have all of the sudden be here here, then we have some gifts and related course. Um and we should use No, that's have a look. Save it. And we need to copied gets Ieper. And so we're here. So article, then we have 12 steak 111. Que closing it. Um, of course. We just need to close the here. Where is it? Here. If so, this is why I like to use end well, and if because we can just see the ending better, So let's save it. And off course, we need our call nd three. So here is our call. And the nine. This all the column, the nine. And in our row, we on the right side. We just wanna have our called and the three. So let's put in here. PHP gets hyped bar again. All right? No, it's update websites and s a C on the right side. We have our sidebar here. We have posts and everything is working. 34. Creating the Gallery Page with taxonomies and custom blog posts: Now let's create our gallery page. So as you can see right now on our website, we have way. Have no gallery page dot PHP can open peak, pitched the PHP, copy it, paste it and rename it page gallery. So look there and that's open it. So now we have over gallery page and we can move on this stuff. And now also, let's remove this, but save its and reload the page. And, as you can see now, the template ISS page gallery. So everything is working. Now we will need to open our gallery HTML and copy some coat way have or we have for gallery section. Let's copy on this stuff. Here we go. Copy, paste and safe. So now we will have our hysteric page and let's make it dynamic. You can see the pictures on the world off course. Off course, we have our sidebar, and we don't need our sidebar. Let's remove it safe. Okay, Perfect. So how we could also use here our custom fields to make this dynamic, but you know how to do it. You just need to select the gallery page and instead of the home page, so nothing special, and I would like to work with Exxon Amis and post types. This is a little bit difficult. So now you will learn a lot. That's close it. And we will need to goto our function the P H P fire. And we need to yeah, create a function. So let's go down here right there and writes the function. Let's call this function function costume in its So And here we have some arguments are dicks and this arguments we have Ray probably so couldn't public. True. Then we have off course. Our label we laid loads. It's late. Blitz gallery. Okay. And so what is it supporting? So supports Array. Title title is also supporting our editor. It is supporting offer and some from the also exert. And yeah, that's it. So this is our ray on. No, we'll need to close it off course. And yeah, no, we have our arguments and we need to register Useful function register post type. Let's reduce the our gallery, Hillary. And here we go and put in our arguments. All right, so, off course this work dysfunction because we need to put in here at action and we need to in it it So we will use in it the function. And how is this? You can see it's everywhere toe work with the function and hours your costume in its is the function called. So we have like this and now we can save it and have a look on our redux page that's on our dashboard. So let's open it. And as you can see, here is our galleries. This is This is why I created the post type. But we can't really work with it. Course we couldn't create no new items here, but we will also sort them. So we need something to sort them. And for this we will use also something more advanced called taxonomy ease. So function because we're creating awesome premium WordPress themes, not just normal one. So we will use against up private Take Sana me. Here we go. New function off course can just copy this code here and instead off label. It's gallery lately soared and yeah, that's it. We can also put in some more arguments. Rewrite Yes, true. Or that's putting rewrite falls. So this okay and now rig esta, take son of me. This is the function we call it soared and yeah, we will also use gallery. So you created our gallery. As you can see, we reduced the gallery. And now we're registering in this gallery in this post type taxonomy called Sword. So we will be able to source everything because we have a gallery. All right. And also our arguments, This arguments, Okay. No, we just need to put in here our at action, funky that to and in it. And here, we need to put in re guest private. Take sewn on. Okay. And no, but save it. Oh, I guess. Yeah. I would just copy it and put it to you. Okay. Saved and updates online. 102 100 35. Okay, the end. So we have mistake right here. So let's have Look, what could be the mistake, Ray. Title off. Oh, I think we will need to put into your zero. Let's have a look. No. And I will fix it first. You need to change something. We need to remove custom. It it goes. We don't need second function. Our function. And we can also remove this, dear. Oh, so let's have a look. Save it and update or look lost and know everything. Iss working. All right, so let's here. You can see now we have sort and yeah, let's work in the next chapter with this stuff. 35. Working with the Filter on the Gallery Page: Okay, now let's work with our gallery. So let's click here at New and Slits Created Post. So how it should. It looked like we can go to our folder and let's have a look here we have over gallery, so it's open it. So here we have this style, and so we have title and yet you're last room and so on. So let's sort So we have to go back and let's create the Post called Let's Create a Title. It will be like, um, you're look Web design. What design? And then we have to consort it so we can type in, for example, design selecting. Let's just let's upload, for example, year you can go to oops in our some folder HD Dogs Read, irks BP content themes Redux. And in our essence, we have images and just upload this three forks. So let's take this one. You're set featured image, and here we can put in like our attack and we will sort everything by Tex. So we put in here our tech design publish. Then we create like a new one that's colleges design also put in the tank design. And here, of course, we need to put a future damage. So let's take this one. And here instead, off design can use for example, Um, this I don't know, Graphics update. And this 3rd 1 I s C O sort s CEO and and set featured image. This one. Okay, no, we can also go to sword. And as you can see, we have our design graphics and S e o. So we can food toe it. Let's have a look how to do it. We can just close this and open our page gallery and let's work with the page. But it will be a little bit complicated, but you will learn a lot. It's ah, a little bit advanced programming. So let's let's do it. So we have here our food and food are active. We can say Oh, okay. And then we need to remove all off these. Let's remove them. And here we need to type in P h p. Get Ket or yeah, it's called Kit and then get terms. So we want to get the terms were created, soared. So we want to get all the terms from this soul. I will show you here we have our sort and we want to get all the terms. This three so ended here and or it's here and let's use of for each and then let's say get cat Oh, verbal as kit So it will go through the loop or for the forage and it's it's a year and then move on So and we can say, Well, let's so tear You're putting some PHP And here we can also use that I class food. Okay, then Datta food through toe, everything by you would go darts because we always it's at plug in. So let's just use dot And then after the dot we need to put in each Ekho dollar can't and May. So we will get the name and here we need to end it. And also P h p PHP Geico can't name. So here, go and end it Swell. And okay, this is a little bit maybe complicated for you, so I will explain it. So, first of all, we need to get all the terms. So as I showed you, the three terms were created or text and yeah, in the sort taxonomy. So we will want to get them the three. Then we will go into this for each. So we go in the first and the second and the third. And yeah, so we can display all three or not display. We can fruit of them. So we have all the three and yeah, So here we display them and also filter them. So we get here our classes, we get the dot like the 1st 1 waas dot design dot graphics dot see you and off course we get just the names. So let's have a look. Save it. And was it our website? Then click on gallery. As you can see, all design graphics seal off course. No, it's not filtering but the oldest pilfering because yeah, there is. So let's go on. I hope you understand. Off course you can google it like the terms and how for each is working and so on. But I just wanna show you how to work with it and explain. So now we need to move on. And here we have our gallery off course, single gallery image and so on. We don't need this stuff because we will use again our loop because we want to make everything dynamic. So we need to this this. Of course, we should not remove too much. This here, this stuff, all the images. Okay, so now we have only one left, and we can work with it. So we have our container, and then the single and again we will use the loop. So we go in here and type in PHP. Let's create some very do. Or in there, Ray, we won't a have post tight, not normal, post type like post who want to have the post type gallery because we created not normal post type. We created our post type gallery, as you can see here now, a function of PHP. We have rights here, reduced a post type gallery. And we created right here our post types. You can see post type gallery. This is the normal post step. This is our created post type. So Okay, we created our post type so good to go and ended, and then we just need to say that we would like to loop a little bit, so create our loop equals two new weepy who worry and put in our arguments. Okay. And then we go right here and say, while no half posts while you pet posts and you, let's This is also learned complicated. Just follow me and I will explain it. Let's call it TS or T's Lux T's Lux Array, and it's empty. Don't worry, I will explain it in a minute. Then we create our loop the post. So we are in every post and no, it can end it. So let's run year or this one ship like no. Okay, your PHP No terms or let's go. Next line terms he quotes to get the terms. And then we put in our new and we won't know, have the i. D and soared by sword from salt the 80. So now we get the terms and we can go into the for each and se terms. Yes, turn and also put in here terminus term. And now let's use over array this one and and this equals two term and we wanna have this luck off it. So this and here are for each. So now we can create a new one terms slug string and let's say join. So we get when we have, like more than one join tia dollar t s Ray. So this is joining and all right. And here, off course, we need to end it. Okay, Now, let's explain a little bit, because maybe someone it's not understanding what's happening. So, first of all, we created our arguments. Post type Guillory created our post time gallery, and now we want a future. Everything. So we go into loop again. Nothing special. So this is easy. Okay, then we have our wild have post because we want a loop through every post we created in the gallery. So the three posts, then we create our array. So after we loop through one array, it's it's empty. So if we would remove this line, then the TS or the T's Lux area would always get another and another yet another and another a term, because it's not to reset it. So this is the kind off reset er Okay. Now get our loop. The post normal function. And here we are, creating terms get D terms from Yeah, the I D and sword. So, yeah, we get all the terms we need, and then we say let for each terms because we can create, like, several. It can have like design for here. Our we have created here our for example, See you. And now it has only see you, but it can't could also have design and graphics and so on. So not only one, it can have several. So we go in for each, so we Yeah, he would get in the array like more than one. And then we just use our for each to Yeah, I have it in the ray. So now we have tears. Lux array. So we have all the terms from the post in the array and yeah, no, we create in and new one. It terms slack string. And yeah, we just say join this. So we get all the terms with a gap between So we have We get all the ts A T slacks array. Um, your names will ever get in. So for some CEO, that gap design gap graphics off course. If it's too complicated for you and you don't understand, you can play around with and just Or if you're really not into programming, you can just use it So you can No, I showed you. And you can just use it in your themes. and yeah, a lot off programmer or WordPress developer would just copying and pasting lots off stuff. Let's are functions. Lots off coat. And you can also copy my coat. So not a big deal. Okay? And now what we need to do, we need to go right here. And the column D here. You can see we have the mix and leapt, for example. And right this we wanna have Hugh. So we say terms slug string. All right, So we as I mentioned before, now we have all the slacks or terms tax right in this verbal and yeah, So we are posting it so we can fit it. Then we have our here we can go and single gallery, then single item, single image. No can, I would say, Let's remove it and put in P h p the post some need. Right? And then we go here and in Ah, and the title intense. That title. We can use our PHP function. Nothing special. PHP h p the title. Okay, then we have our for example, what design and we can also put in here our PHP terms slog. It's so this. Of course we don't need Web design and more. And here we should put in again. H ref, Let's use year here it's moving and use here. Our function the opposed some new you are l we dough. Then we just You're everything is so right and here we can use. And I would say here the Permal ng h p the Permal Ling do you the link and okay and no, let's have a look worse our while ending No, it should not end here it should. And after our list. So we get a lot off this items Ph p and you need to this. And now let's have a look on our website and on our food. A little mistake here. We need to add the class mix. This is sold the plug in works. Yeah, so here it's updated and as you can see everything, it's working. And it's very awesome because now you can Also, for example, it's goto dash pot, and we can just say, for example, gallery. We have our seal and we can, um, shoes. And here putting also design and update and let's have a lawful it's update the website and this you can see everything is working so again, just four people who would like to understand it. So again, post type gallery Easy. We peak very nothing special here. Our is every time it gets reset it. This is how to reset a race. Because if we don't like, let's remove it. For example, this line of coat Now let's ever look no, we have You can see they get more than they should have classes because the ray is always Yeah, saved. So there is something in it. So if we sorted by design or he graphics and seal So one class or one? Um, yeah, and the next item will get a loss. Ah, a new class. So yeah, it's It's a little bit tricky to explain, but I think you should understand that every time we are in the new post we should reset our array so all the classes get removed and yeah, so everything is all right. And we don't have some extra classes and some elements. Okay, then we get in our loop, then we get the terms of far removed. Then we're going for each so we could way. Look how many classes there are. So many terms. So like or tags here for some here, too. So we say go for each and here, save it on the ray. And then just put it in another's drinking by joining. And here we have been both and then we just placed them here. So it's nothing very, very confusing Births. You shoot her? Yeah, have some knowledge and PHP. But you can always copy and paste this code my coat and use it in your teams. And yeah, hopefully you can now use takes on amis post types And you learned a little bit the boat work, press and PHP. 36. Creating the Contact Page and adding the Shortcode: Now let's create a contact page. So let's go to pages at New and let's call it contact public. Then let's also create some custom fields it new, uh, contexts. Hey, and then it's a feud. Contact title. Quiet. Yes. A new field contact description and contact shot. Cold. Okay, Greek. What? Yes, and let's publish it. Let's make it also required for Okay. And now we need to go to our folder here. Let's copy the page templates. Let's rename it to contact a page Contact page contact. Now let's open it in our coat, editor. And also open the contact template. Your Where is it? The H T m l Fire. It's open it. And this is the gallery. The wrong one here, contact. That's open it. And no, we need to copy and paste a little bit. We need here. Let's just take this. And here that's room for this paste. Or to remove this list. And here we need to also remove this. Okay, No safe and yeah, no, we need to create also over contact form. So let's go to contact form at new. Let's create a new one. Let's call it contact Contact page that Save it. Let's copied the short quote. Go to page is then to contact. Um, yeah, we need to go to custom fields again. Back and here we need to here to change. Page is equal to contact. No, we can update and visit our contact page again. So let's have a look. Let's go patriots again and to contact And here we go. Now let's paste our short coat here in the description we need to poppy this line and it could be also ah, text futons. Insert off, text the contact description and get in touch. OK, that's updates and then we need to put in here some PHP PHP the field. It's close it. It's called periods. Remove this and slits place here the field contact page contact page and your contact the script Ching and and here we need toe put in PHP And now again, our short coat Geico do short coat And now we need to use get field because we need the shot coat in those things so we don't need to use their fields we need to use now get field . So let's copy it. You can try it out. Play it with it. So you understand. What's the difference between get field and the field? Because we do short court, we need kind off this we need. We use shot coats we always need and this kind of cold and this. Yeah, you can achieve with the Iko do short foot and then you're get fields and now we can use contact. Short code. All right, that save it. That's was it. Website. It's update you date everything. It's goto over navigation you were. Is it servings design menus? Tress. Let's at their our contact page. So move this. And here at menu safe. No, let's update the website and click on contact. Yes, you can see everything is working, but here the feuds contact page and here contact description. I think we used um yeah, the wrong custom field I d. So let's have a look. No, we have a contact page, and here we need to copy contact tighter. So instead of contact page and you contact description, you're this safe, and we also need to change here the button and remove the site bar. So let's remove the site bar and how to add a class to our to our button. Let's go to here to our contact forms. And then we need to late on our contact. HTML. And here we need to search for our button. So the pattern here this is the clause we need to add to the button. Click on Contact Page and it the button Rights year. So let's just put in class and safe. Now let's update saving. No, Stopped it again. Here, you can see Get in, touch the text and everything is working, all right. 37. Remove unnecessary Fields: Now let's work a little bit more with Redux. It's okay. More Folder Year Inc and Redux Conflict. Close it. And as you can see, for example, here we have our sample options and I would like to rename it and let's search for options . And here we can just remove it Foreign Redick's options and you're s well, all right. No, you can see everything's working and now let's remove some cold. For example, this this limes only for altering the demo. You can remove it. Also, we don't need some fields. For example, the basic few routes. Um, where is it? Um, that search for shake box and this It's not necessary. So let's remove it. Okay, now let's update. I would say we should remove everything up to on typography. So that's cruel. Don't and remove all the feel. It's move. It's you're select fields. No, or slide over spinner. I need to remove them a swell wait date. Additional type o here. Up to here. All right, let's save it and let's go down here. We have start the search for advanced bones futures. So here we need to remove swell. And here you can upload your documentation, but yeah, that's also remove it. We don't need it right now. Here and save it updates. Let's also remove this notification. So search for Edmund bar links and remove it to here. Safe. All right. Duck human station. You could Don's here. And as you can see, he is the content path. So here, you need to put in your documentation your file direction, filing. Then read me and d right now we don't need it because, yeah, we don't have a recommendation, but if you have a documentation, put it here and here. The Paul's for examples. Here, there. Read me, MD remove it. And now update. All right, now we can work with the typography. 38. Redux adding Font Family and Color: Now, I would like to show you how the typography is working in Read X. So, as you can see, we have our body fund and our typography H two sides description. And now let's have a look too. Here are Redux and full typography and type pool. He and then down here and here you can see that you can shoes the class you're out put. And here you can put in your class, for example, site description. And we can also put in hte to age three h four, for example. I put in h two and now I save it and let's update it. And as you can see, it changed because this is h two. So you have here h two it changed. And now you can use, for example, even the customizer and change every h two. And you just need to write down here a subtitle. For example, here you can change all your age too. Um, yeah, takes and yeah, this is how it works. You can just get as much as you want. You can also add, for example, for H two special class and then you can say h two for I don't know for the about us section, so you can play around with it. Here we have our, um, pornography. Okay, You need to I think it's not available. Writes year butts. Um, you can use it from here and your in Redux options. You're relax options and then just change other everything you like so you can change your the color. For example, Redd's It's for every h one h two h three h four. Now the color changed. Yes, you can see now it changed. But of course, the H two. It's here and you can just play around and you can selective fund and so on. And it's very nice and very easy to handle and play around. And you can also add here instead of h two p and make your WordPress site really nice. Because here your customer can change everything and yeah, so hopefully you understand it and just change the progress With the subtitle. The title check. You can change really, ever everything that's show you, for example, how to do it for, like p Tex. It's called Pete this on here, and you can just put in if you title for Pete Tex and then five p properties. And then just Putin's P and safe it and no update here. You can see we just add it. It's updated. Here. You can see all p Tex. So here you can. No. Mm. Feuds. Yes. This is how it works. You know, you have all p, Tex. Maybe yes. And off course you need to changed the i. D. This is very importance. Otherwise, it's home work to know you have body formidable P tex typography site description. And here you can see congest change it however you want and old. So years select phone safe and no update. And as you can see, it is working. So this is how it works. But right now I don't need Yeah, just change it How everyone's congest here. You can also put in some classes. Like if you're p takes have loss and yeah, just put it in the old put p and then the class like here p and then dot site description and so on. So this is how can you how you can change the fund family, the color and so on. So very nice and yeah, 39. Redux workng with Additional Types: Let's also work a little bit with additional types. Goto our error term. And here we have additional types. Let's remove the date. We just need this sort of. So here's Sota raw. That's swell and start required. Remove it And you're this one. That's for move it years. This all right? It was okay. You don't need this. And that's a look. So now we have our sort. And here a home pain layout. H lay oats. We have, like, the normal you home page layout manager on page they wrote The Olds manager. Let's remove this field group because we just need and this layout manager advanced. Okay? And also it's from here a little bit. We have We don't need this limits movements. They have old. So IHS So let's save it. Send. Let's have a look. Okay. All right. Okay. Let's remove something back. Think we need this disabled and back up so it's or we can if you want. You can off course remove it. But I would let it like this. And here we can know work with our columns. So let's look the documentation sort of. So what we need to do is here. We need to, um, use this. Which case? So we need to create some more pages. It's get in. Oh, template parts and Skopje The content. 12 Really Four times. So we have our slider about us counter futures and block. So five sections by sections. I spoke to one more. So content Slider. We have our content Slider. Then we have our content about a boat. Then we have our content counter Come to then we have our content feature you too. And the last one will be our content. Block. Name it Content. Look. All right, so let's open all contents Lighter. Off course. We need to remove everything and save. And then we need to goto front page. Well, let's for every contents boat us blow come to and future. All right. No, let's boats removed. Everything se blow. Move Safe counter Move. Save slider. So and of course boat move safe. Now we go toe read the front page and now we just need to copy a little bit. Copy, pasting but cold. We have all oh thing slider pace that remove about us called you removed. Come to quote P and features futures hope he in and our block? Yes, well, p and put it right here. So no over from Page is empty. But save it that safe over both, let's say, for our futures that safe or block and all the other pages. And now let's work a little bit Here we have, oh, sorter. So we need to and use this coat in our front page. So let's goto our front page and just paste. It's cold p. And if PHP so this is our coat. And then we say your content, slider content, feature content, said block content counter. It's copy this line. Contents, um slider counter block. Um, it Baltz It's both. And then it's changed this boat counter bluh feature, and let's change them in a bit. So block Waas last and you save them. Then let's have a look. Oh, so we have Redux options and we need to use instead of read X theme. So Logo Redux theme. Then we need also the i D. So let's have a look right here we have and a boat here in the ideas option Home page layout and additional Salter. Um, look the example. So they used I d home pitch blocks, fields I d home pitch blocks and here home pitch blocks. So we need to do it a swell. So we have I d option home pitch layout and use it here and and Ebel's And here we have and Ebel's home pitch Blocks and abled. All right, let's save it. And that saved us well. And now let's have a look over Redux Page. It's update highlights. Light aesthetic service. Um, think with there is one more slider. Of course we need to goto Redux year. We need to change this as well. So we have slider future slider, slider feet, true feet. True. Then we have tone to home to counter. And the boats. You're both swell. It's populace long and last one was blocked. Okay, right? Yes. And let's up ticket again. Put it here. Safe changes. Okay, I think. Then let's fix its here. Off course. We need to change the Redox options to read it Theme. Okay. And now we can update our website. Yes, you can see everything is strolling up. So now we can play here a little bit around. No, that's updated. You can see slider, slider about us. Both us counter come to feature and block. So no, it is working. And we can just play around with bits. And here, for example, we can able this will. You're can see we don't have any about us anymore. So nice. All right.