WordPress Theme Development Tutorial


WordPress Theme Development Tutorial

Hello everyone! today I am going to be teaching about theme development in WordPress, if you’ve ever wanted to take a HTML page you created along with its styling and its scripts and put it into WordPress today I am going to show you how.

Okay let’s get started we can begin by starting to download WordPress.

In the interest of time I’ve already done that so I have downloaded WordPress Okay, then we can start by going into WordPress there is a number files that’s good now the first thing we need to do once we have downloaded WordPress, is we need to set up our database

So what I will do is go into PHP MyAdmin or whatever to use now here and create our database “tutorial_db” Ok, then we create our database It has no been created, so now we can close here okay then now, what we can do go into the WordPress folder now open the folder in our text editor, you will see a file called: wp_config_sample.php now what this essentially does is: gives basic settings for your WordPress WordPress installation now in a need our database name tutorial_db need a username I’m going to use root because this is a local server so that we don’t have to worry about that Now you’ll authentication unique keys and salts.

This is for authentication it’s for security purposes so you go him and you can help you there generate the keys automatically.

So you go the URL that’s in the file and copy paste that code just paste it in now what we want to do on actually rename this file to not be sample just wp_config.php.

And save that K now on our server want to create a directory upload that…

you can navigate to where we uploaded it on a browser okay now we have the installations screen you can start by putting in the site name title tutorial website.

My username will be admin.

but, because it’s a local server it doesn’t matter Array just use a basic password and put in an email address than don’t allow search engines, doesn’t really matter because it is a local server Array Now I am logged in automatically created all all the tables and we need in the database so we can go into there log in with our login details so now once we are in.

WordPress is installed we can actually have a look, we can go to appearance then themes we can see WordPress comes with 3 pre-installed themes but now we want to actually replace this with our own theme. I’ve created a very very basic website, very basic and now made the this website in HTML and I would like to actually integrate into WordPress as a theme. Now how would want do that is want to actually create custom theme.

So we go into WordPress.

Go into wp-content/themes and we create a new folder and name it what ever we want so then what we’re gonna need for you theme to run for the very basics, you need…

you need two files first of all, we need a style.css file Array and then we also need a index.php file these are the very basics of our site open this in our text editor Array so, now we have these two files, now in the style.css what we need to do is we need to get some information about our theme, so WordPress can actually read it what we do is go to the site here: bring it to you codex codex.wordpress.org/themedevelopment now this is a good starting point it essentially gives you all the basics on how to build a theme and essentially what you need and how exactly you go about it and it will go through a bit more information that this tutorial okay so first we can take this code here.

It is just a comment that actually we can use that WordPress can read and then it actually gives information about your theme first we can give it a name we can name it “tutorial theme” theme URI = unique identifier for your theme theme URI = unique identifier for your theme Array Array doesn’t really matter if you want to put it on a store the author would be me Array Array Array these tags: we don’t really need any tags we can take those out..

there is a few allowed tags, you would actually have to have a look at what tags you can actually use Array So now we have our basics, let’s go ahead and upload our theme Array Array now and go into our WordPress installation and refresh our themes page our theme, is now there and we can activate it Now you can actually delete the default themes but if you want to keep them they are built quite well and you can use them as you see fit, but I like to delete them in the interest of to cleanliness now those themes are now gone refresh this page and you can see we have only one theme okay and what you can do is also in your style.css you can create a screenshot.PNG file and then this will replace this image, but we won’t need it now okay so now how do we actually put our HTML theme files into the theme go here take our template and copy our CSS files and our Javascript files and copy those in now.

We are not going to copy the HTML file in going to actually copy/paste things in there here’s my original HTML and here’s my index.php file now what we want to try and do is we want to split things up for code reuse so we can actually reuse the code, like for example the navigation, the body, the header, it’s all gonna be in every page and so is the footer so what we are gonna do is actually create header.php file inside the header.php file, we can actually copy over all this that we want to repeat in the header.php file and we can create a footer.php file and copy and paste all the footer information now here we actually have the header and footer In the index.php file we wanna actually have access to our header files so we can use this instruction and And now those are in there if we upload everything now Array Now we can view our site, we can see the header information and footer information is that, all the the markup but we you can see there’s one problem here, our stylesheet is not included as well.

so the problem is, if we look here in the header.php file We’re actually using a local reference for the scripts and and the links So what we need to do is we need to actually include these we need to do this in the correct way Because it is not ideal to use an absolute path every time you want to move your theme, it will have a problem what we need to do is we need to actually we need to actually tell WordPress way we want in insert the the code and the the stylesheet.

So we need to make a PHP tag inside there we will put “wp_head();” and what we are going to do in the footer, is something similar just before the closing body tag PHP wp_footer(); This is just because sometimes you want to put scripts in the footer as well, so this just tells WordPress where to put that Now we have our wp_head() Now we need to enque the scripts and style sheets so what we need to do is we need to create a function.php file essentially a function.php file is essentially all PHP functions that your theme needs, so lets go ahead and make that now functions.php Make a php tag, now we need to give the code on how to enqueue code so what we do we can go to the Codex again codex.wordpress.org/functionreference/enquescript scroll down a little bit you’ll see is code snippet here that says the proper way to enqueue script and styles and we can just copy paste that copy paste that into our functions.php file and then essentially what happens is we all the the things that are included in this will be included either the header or footer depending on what you specify now we want to put our style name here so we will call it “main-style” this is just to differentiate between one another this also prevents and things from being included multiple times try and use a unique name…You can use get stylesheet but our stylesheet is not actually in that directory So we will use get_template_directory_uri() So this gets our template directory so we go there concatenate strings of /css our file is called style.css style.css, I am just going to comment this out here And lets upload Array see what happens okay area now our styles are included now So now we just need to include our script is using if you have a look how script is jQuery now WordPress actually includes jQuery by default but the only problem is jQuery is in a compatibility mode.

Essentially it doesn’t use the dollar sign here, so what you need to use is jQuery (not $), this prevents any conficts with other JavaScript plugins, but what you could do is there’s a number of ways could actually fix this behavior in your specific script so at the beginning of your script you can actually, go var dollar sign equals jQuery and then essentially what this will do assign this to this object while you’re in your script you can actually use use that ($) now, that works, so what we need to do is we need to enqueue our script call it “basic-script” Array it is here named tutorial_script.js K now can use this version but you don’t have to here this array here this list the dependencies that your script has So that WordPress knows what order to put it in What WordPress does is, it can look at the name and the versions and can actually order the scripts and more than one of plugins or themes that on your installation if they’re if they all depend on same thing it won’t include them multiple times and will make sure it will use the latest version, but requires jQuery and it is included by default K and then this true here those parameters are essentially asking, do we want it included in the head or the footer true means that included in the footer So we are going to use true there we want to put this in the footer Array refresh the page and there we go our script is now working using jQuery okay so now we’ve got the very basics I’ll getting your theme in Array.

Source: Youtube

You May Also Like

About the Author: admin