Ever wanted to build your own WordPress theme Development?

Ever wanted to build your own WordPress theme Development? 

Ever wanted to build your own WordPress theme? Well in this video, we'll show you how. Building themes for WordPress is fairly simple. If you've ever wanted to build a theme for your website and not had to buy one or use one of the default themes that come with WordPress, it's not very hard to build your own if you know a little bit about web development and a little bit about coding. So in this article, we're going to explain kind of the basics of how to get a theme started. And then in future article, we'll expand on that. So let's get started. So here on the IdeaPro.com website, we've created an install of WordPress on IdeaPro.com/example. And here, we're using the 2017 default theme that comes with WordPress. And in our back end here, if you go to Appearances, you see 2017 is the activated theme. Now if you'll notice, we don't have any other themes in our appearance here. And the reason is is because we remove anything of WordPress that we're not using. 

As soon as we create a new theme, we'll remove the 2017 theme, just to keep everything cleaned up on the back end. So we're going to go to our editor. And under Example here, IdeaPro.com, under the Example folder, under WP Content, we've got plugins and we've got themes. And here's the 2017 theme. So we're going to close that. On the Themes folder here, we're going to create a new folder. And we're going to call this IdeaProExample. And we'll put it all in one word. So now we have the IdeaProExample folder. And we have nothing in it. So now we're going to put something in this folder. All right. So I have default HTML code here. It says Default HTML 5 Code. 

Now, what I'm going to do with this code is create the structure of the files that are needed for our WordPress. So I'm going to leave this here. I'm not going to save it. I'm going to create a new page. And I'm going to save this new page under-- let me get to the right area here-- examples [INAUDIBLE] content, themes, IdeaProExample. All right. So we're going to name this Header.php. And now in this Header.php file, we're actually going to paste everything from this body tag up. We're going to paste that in there, and we're going to save it. Now we're going to create a new file, and we're going to paste this bottom part into the new file. And we're going to save it as Footer.php. Now, we have the header here and the footer. We can actually get rid of this. We don't need it anymore. So now we have a header and a footer file in IdeaProExample. The next thing we need is we need an index file. So we're going to save this, call it Index.php. And then we need a functions file. So we're going to call this Functions.php. And then we need a Style.css file. 

So we're going to save this and call it Style.css. And now we're ready to get started on adding some content to some of this. So in the Header.php file, some of the defaults that we're going to put in is we're going to put in WP_Title. And what this does is it's the default function for title. And we're going to leave just two single quotes here. And we're going to leave that just like that is. And we're going to hit Save. Now we're going to come into the Index.php page. And we're going to put in get_header. And then we're going to come down a couple lines, and we're going to say get_footer. And we're going to save that. Now in the Header.php page, right before this closing head tag, we're going to put in wp_head and save that. And then on the footer page, before the closing body tag, we're going to put in wp_footer. 

Now, we're going to save that. So now what this head tag does is any plugins or functions that are called to add stuff to the header of the site will be added here. Now, on the footer, this wp_footer, any functions or plugins that call an action to put something in the footer, this is what this will bring in here. This function here brings in any of those plugins and functions. So on the PHP Functions page, we really don't even need anything in there. We'll put in a default PHP open and closing tags. And then on the Style.css page, we're going to put in Open PHP. We're going to put in a-- start a comment. 

And we're going to say Theme Name. And this is going to be Idea Pro-- oops-- IdeaProExample Theme. And then we can put in the theme URI. URI. And we are just going to put in https://www.IdeaPro.com. And then we can also put in the author, which is going to be [INAUDIBLE]. We can put in the author-- oops-- URI, which is [? joshuaherbeson.com. ?] Keeps putting in that closing tag on there. And then that's really all that we need. We can actually add a description. And this is just an example theme. So now we have the Header.php file, the Index.php file, a Functions.php, a Style.css, and a Footer.php. These are the basics that are required to get your theme in there. So now we'll go to here, and we'll click Appearances.

And now you see we have IdeaProExample theme. So right now, we have this theme activated. And if we refresh the page, it's still-- this is the default theme. Now if we go in and we activate this theme, now our default theme is activated. And if we go in here and we refresh this page, it's blank. And the reason why is because we literally have put nothing in our theme. This Index.php page is blank. The header is the body closing-- opening tag here. And then the footer is the closing body tag here. So if we want to, we can go into here and put in Welcome To Our Page. 

And we can save that. And now that is going to show up on here, welcome to our page. Now, one of the most annoying things for me whenever I'm creating a theme and doing development is this bar right here. So really quickly, one of the first functions that I write, I actually have it as a plugin that we install because it makes it super quick. But one of the first functions that I do is I go into Functions.php. Page, and I say Show Admin Bar. And inside of here, I type False. Whoops. I spell it right. So we save that. And now if we refresh this page, that admin is gone. So if we want to turn it back on, we can comment it out. Refresh. And this bar shows up if you're logged in. It's really annoying to me. It really messes up the code, the design. It changes the whole layout of what I want to see the site as. 

So that's one of the first functions that I write. So this is the default to creating a WordPress theme. The other thing that you can do is, if you have a look that you want-- let's say that we want it to look like our main page Idea Pro here-- I can do a screenshot of this. And then I can go into here, I can go to the desktop. I can change this to screen-- whoops-- Screenshot.png. And then I can add this to our website here, IdeaPro.com, Example, WordPress Content, Themes, IdeaProExample. And we'll move this Screenshot.png over to our IdeaProExample here. And then in here, we'll just upload the file, and go into our themes and click Appearance. And now we have a screenshot of what we want the website to look at. Usually, as the designer sends us a layout, or I design it and we have a layout done, I'll take a screenshot. That way, I can have-- it's just quick to see it, and it's good for, if the client logs in, they can see it. So that's how to create a theme using WordPress. And we'll get into more of the details in future videos. Hope this video helped you. Like and subscribe, and please comment any questions that you may have.