 Hi everybody. My name is Jonathan Ross. I'm actually an instructor at the local community college, which is AB Tech here in Asheville. I teach digital media, which means I teach a lot of different things like animation, multimedia, video production, graphic design and some web development. I am also a freelance web developer, designer, front-end developer. It's really the proper term to use. And I'll be the first one to tell you that I don't know that much about PHP at all. I really am not a programmer. I'm a front-end developer. It's a big difference. And so what we're going to be talking about today is building themes in WordPress. So we kind of have to also talk about how WordPress works, like how... What are the different pieces of WordPress that you're working with when you develop themes? So everybody knows that you can go out and buy themes, right? You can buy these extremely fancy, beautiful themes. And if you start to look into them, they're really quite attractive when you look at the fact that they're fully responsive. You know, this one says it installs really easily. It's got a hundred plus theme options. Woo-hoo! That's a hundred opportunities for you to not know at all what you're doing, right? And then you have short codes. And what the heck are short codes? And SEO-friendly, which is great, and PSDs, if you guys are Photoshop people. Awesome. Now, I challenge you, go in, mock up, take their mock up of the Photoshop document, make it exactly the way you want it, and then try and make their theme fit that. It's going to be fun, right? So I've used this one. This one's really kind of cool. It's called Infold. It's one of the really fancy ones out there. Somebody was talking about Divi as well today. And these things are beautiful. I really admit, I cannot do what the designers that created these things can do. I really can't. To make parallax and full-screen images and stuff, of course I can do it, but I do it by brute force, and I do it by lots of research, finding the right code, troubleshooting that code, trying it without putting it into WordPress first, and then putting it into WordPress. And then it works the way I expect it to work, which is wonderful, instead of me using this thing. And then of course what happens is you put in the slider just the way it is built into Infold, and what does your client do? They say, you know, would you, you think it'd be possible to add a little arrow at the bottom, or maybe, I saw this other slider on this other website. Can we use that slider instead? And I don't really like the way that the three boxes work. Can we put a picture up on top of them instead? You're like, no, I can't, because this is what I'm dealing with. And I know you guys can't see that code, but this is the actual Infold index page code that's there. And if you look at this thing, it's got filters for, oh, I don't even know what this stuff is. The aviabilder l, no sibling paginate, ah! And to go figure out where to change that in the code is really complicated. So me being somebody who feels as though you should develop all of your themes from scratch. And once again, I go back to me being an educator. And the reason I say that is because I have a real problem with people using themes, not because you cannot do amazingly beautiful websites with themes, but I'm an educator and I feel like you've got to learn how to do it yourself. And then you can go evaluate whether or not a theme is the right choice. But being able to do it yourself is kind of like my mission, and of course my mission in classes. So, you know, sometimes to understand how themes work, you feel like you have to be a mathematician and be able to do all this complicated stuff. However, here's the problem for us, and that is there is a shift for us as designers. It used to be that you are a front-end designer, right? You're no longer a front-end designer. You're now a front-end developer, which means that you have to do a little bit of code. You don't have to be amazing. You don't have to be like your friend Laurel, is that? Laurel is the coder and then Nick is a designer. They were just talking about it. And if you were at the status-forward presentation that was before this, this presentation is a perfect follow-up to that particular one, because we're going to kind of look at some of the building blocks of WordPress. But nowadays we see this amalgamation of the two roles, of developer and designer, and they call it a front-end developer. And so the thing is you can get scared when you go, oh my gosh, I have to learn code. I'll be the first one to tell you. I know about three PHP tags. Echo or no, PHP info. That's about all I know. And Echo is some code. Other than that, I copy and paste code that I find online and I modify it as I need. And then I've kind of built a little library of things that I do over and over. And I go, wow, if that works once, I probably can make it work another time. So let's first look at what is the difference between a template versus a theme. If you look at WordPress, you really don't need that much to actually make a fully functioning content management system. This is all you need. These three files over here, index, screenshot, and style CSS. In fact, you only need two of those files. If you look at a theme, it's a collection of a whole bunch of files and we'll talk about what those files do in a minute. So your simplest template requires three files total. It requires two files, but the screenshot is just so that it comes up and you can see something visual that shows you what theme that you've chosen. That's really not too complicated. The first file you need is the style CSS file. Now, we typically, as designers, don't go in and put a whole bunch of comments in our CSS, but this is one thing that WordPress requires. At the top of your CSS file, this is your style.css file, you have some information that describes what this theme is, including what the name of the theme is, description, author, and actually the only thing you actually have to have is the name of the theme because it needs to know which theme is currently the one that's being used that's installed and it uses the name that's up there to be able to show you that in WordPress. You don't actually have to have the name match the folder, which is pretty good. Some other content management systems, if you had the name not match the folder name, then everything would break and it wouldn't install. But you have to have this information at the top of the CSS file in order to install that theme. So that's the first thing. The next thing that we need is a simple HTML template with a few little PHP tags here. Now you guys probably recognize this, right? Everybody here knows basic HTML, hopefully. Okay. So at the top of the page, we have the document, our head section, and then we have our body section, we have an article, we have our navigation. Now, all we have to do is add in a few little template tags for WordPress and we have a fully functioning content management system. The first one we have is WP head. And what that does is say, let's load all the stuff that WordPress says that we're required to load in the head section of our document. The next thing we have is loading our style sheet. Now, you don't actually have to load your style sheet, but it sure does look more attractive when you actually have some styles to your website, of course. So that's the next thing. The next thing after that would be this, a menu. And we're doing just the simplest tag there, WP menu, nav menu. And it says load a dynamically generated menu. That way it's not static, but it changes as we change things in WordPress. The next thing we have is what's called the loop. Is everybody familiar with the loop? Okay, we'll talk more about it. But understanding the loop is very, very important. And then the last thing is the WP footer. With this code right here, we can have a fully functioning content management system in WordPress. Does that seem too complicated? Not really. How many people have done WordPress websites without like blogs and all that kind of stuff? And without commenting, then this right here will do just fine. It doesn't have any comments. It doesn't have blog posts. Well, you can have blog posts, but it doesn't have to have them. Now it has very little other things added, but we'll look at some of those building blocks as we go forward. So once again, this is all we have. We have WP head at the top. We have our style sheet. We have a menu. We have the page content that's done through a loop. And we have the footer. And the footer, by the way, is required because sometimes JavaScript, especially when you use plugins, plugins will use both the header and the footer. And they'll inject some things at the top, like CSS at the top, and then they'll inject some JavaScript, jQuery or something like that at the bottom. For example, WordPress uses it when you log in and you have the admin menu when you guys see that big black menu at the top. If you don't have that WP footer, then that can't load. So it's very important that you have those on the two sides. So we have required code, style sheets, navigation, content, and then the required code at the bottom. That's pretty much it. Now that doesn't take you too far because you start to look at trying to make fancier projects where you have post pages, and you have a static page, and then you have a page for something else, and you want a page for just when you come to a particular type of post like the news post, and so we get into what's called the template hierarchy. And the template hierarchy is why we have all these different pages. That's why we have all these files in a theme because each of these themes uses or each of these files are used by the template hierarchy, the theme hierarchy to determine which page or file is loading when it's required. So the first thing is understanding that a lot of these things have all these multiple pages or multiple files and that each file sometimes has only a very small part. For example, the header.php will have just the stuff that goes into the head, and the footer will have only the stuff that goes into the footer. And typically those are going to be the same for pretty much every page of the entire website, right? So every page that uses those will be the same so if you want to change something in the header it changes for the entire website. This is a wonderful, you know, method of working. It reduces duplicate code and all sorts of stuff. There's a fancy term for it which is I shouldn't know. I want to say encapsulation that's not really the right term for those of you who are real programmers. Huh? Yeah, what's the right term for having code only one time? Don't repeat. Okay, that sounds good to me. Dry. So it's the dry method. Okay, so some of these other files in here like comments or archive 404. Let's see. These are going to be used at certain times depending upon the template hierarchy. Now, if you look at the documentation it says this is how you should include files especially the header, the sidebar, and the footer. I'm going to tell you that's not the right way to do it and the reason why is this amazing plug-in called what the file. If you are starting to get into WordPress theme development it's difficult to figure out which files being used at the right time until you've kind of learned the hierarchy and even after you've been doing it you add one other file and you're like, whoa, what's it doing now? It's kind of cool. This right here, this plug-in really does help you figure out that stuff and it requires, and here's what it does basically, this is from last year and you can see what the file in the top right and what it's showing me is that I'm on my custom page and it's showing me all the different template parts that are loaded into this. Then I can go to that one individual piece and all I have to do is click on sidebar.php and it will automatically open that particular file in the editor so that I can make the change I need. So what the file requires get template part instead of get header, get footer. So just one little tiny thing. Now these are some of the different types of files that you might see in the theme. Front page, home page, page about, page our mission, single, single news, archive and finally get down the index. Do you guys know about the template hierarchy? You guys heard about this? So this is one of the big fundamental things about how WordPress works because what happens is as soon as you go to load a WordPress page it says, what kind of page are you on? And if you're on the front page and it finds a file called frontpage.php then it will use that page to load the website. It will look at what the structure of that particular PHP file is. If that file does not exist then it will go to the next page that it would use, in this case index. Now if you were going to come in and you were using a series of posts and your posts were called news that could also be an ID, an ID would be five. Let's say that we had one called category and the slug right here was if we had category-news and I went to a page that was news posts then it would use that file. But if that didn't exist and it did have something called category-five because ID of the post was five, if this makes sense, then it would use that. But if it didn't have that and it had a page just called category then it would use that. And if it didn't have that then it would use one called archive and if it didn't have that then it would use index. Now you can see this gets a little complicated, right? But you don't really have to use all these. You can use maybe ten files, eight to ten files pretty much in any theme that I've ever built because they really don't have to use. You don't have to have fifty files to be able to have a very successful and complicated custom theme. So the new documentation, if you look at it, is actually a little bit more complicated. But what I love about this graphic and the reason I have the other one is that you can't really read this one from where you are at all. What I love about this graphic is that it does show you, there, it does show you a little bit more about all the different pages that would default to this page if those other pages didn't exist. So the information graphics side of it is a little bit more accurate. So once again, you can create a very successful content management based website using one file, index.php. All the other files that are here are all if you need to use them. They're not required. That's the beauty of this system. It only uses the file while it exists. And if it doesn't exist, then it uses whatever would be the other hierarchy or actually lower hierarchy file. So once again, this is the front page. That would be the home page of the website. Home would be the main posts page. Page would be any page that you've created like an actual page versus post, which we'll talk about in a second. Then what if you had a page called about or a page called our missions. And by the way, if you have two words that are a page name, then it just puts a dash in between it. So I just wanted to show that. Then we have single for a single post like you want to go to one news item. And then we have archive and we have this, the custom page name, because I wanted to have one place where I created just a custom template. Custom templates are extremely easy. You just create any file like any other file in the CMS and you just put this little tiny tag at the top and you give it a template name. Once you've done that, the WordPress will automatically detect it. And then when you go into a page editor, you'll see the properties over there that say would you like to choose a template. And that template name will show up only because you defined it at the top of the page. It's really very easy to do. And then you can use that particular template for any page and it will override anything else that it would have automatically chosen. So we're going to get into some of the common functions that you'll see as you start to develop WordPress themes. We are not going to get into many of them because there's just too many to cover, of course. But it's all about recognizing what they are and kind of what they do and we'll kind of give you a hint about that. So one of the most common that you're going to see is this. It's called blog info. Do you guys know what this is called? What that would be called in WordPress? Is it a function? Is it a hook? Yeah, so that's a good question too because if we know what to call it, then we know how to look for it, right? So it's really called a hook and we'll talk about that in a second. But even looking at this, this is just a simple head section of a website. We'll notice that we have blog info character set. And so how many of you do PHP? Basics of PHP. So the others of you need to learn a little PHP but it's not too difficult because if we look at this right here, this is a PHP function or a hook in WordPress and right here in the middle, you can put what's called an argument which says, well, I want a name but am I talking about the first name or the last name or the middle name? So I could say I want name first name and I'd put it in the middle there. So with this blog info, I can do blog info character set. I can do blog info name and that's the name of the website as it's been put in WordPress. And then I can do this, blog info style sheet URL and then another one is blog info template URL. And all these things are automatically generated by WordPress. You just have to know, hey, I need to find out what the URL of this theme is and so blog info is one of those that you'll find yourself going to all the time because it's so incredibly useful. Another thing that you'll have to do is use navigation and there are two main ways to do navigation, a nav menu and list pages. So the first one, the WP nav menu can be just like it is. Have you guys all used menus where you create a menu yourself in WordPress and you do it over on the left-hand side and you can add pages and re-sort them however you want, right? So that's what nav menu uses. In fact, you know that you can create multiple menus, right? And so right here you can just say I'd like to use the menu main nav versus footer nav or side nav or whatever else, what other menu you've created. Now you can even output that menu in a certain way like I can output the submenu with sorting it using the menu order or maybe I could sort it alphabetically or however I want to sort it. Of course, if you sort it differently than you see it when you create it that could be a little confusing. I probably not tell you to output your menu in a different order than the order that you've created it. But then you can also output the container class for CSS and I could say I want to use the subnav and I want to have a class around it so it says submenu so that I'm actually able to make it output the way I want it to. So the WP nav menu uses the menus that you've set up in the sidebar in WordPress. The other one that you have is WP list pages and this one is all about you creating pages and it doesn't matter if you've created a menu for them because it'll just go through and find all the pages that you've created and then output them the way that you want and you can output them with the sort using the menu order and the depth is one which basically says do all of them and then the list title or the title li here says nothing. I'm not going to go into what they are just going to say that what you're doing is you're taking this core function called list pages and then you're able to add options to it which are called arguments and that's really important when you're getting into WordPress because this is where all the magic happens it's you making decisions about what tag you want to use and then how you want to alter how it works by default. So the other one that you would use for navigation quite a lot is this the permalink and the permalink is really essential if you have like a post that you want to be able to link to where that post is and that permalink is what travels with every single piece of content that you create whether it's a post or a page they all have a permalink that goes directly to that page or to that post so that's another navigation element that's three tags total that you have to be able to use to be able to navigate to any page on your website that's not too complicated right? Now things get a little bit more interesting when you get into this file called the functions.php file because if you want to do anything fancier beyond like the simple template which has the navigation and the page content like you want to be able to have widgets or featured images which you guys have heard of I'm sure then you have to get into using this file it doesn't have to be complicated but it has to be there so the functions.php file helps you do things like enabling and creating widgets enabling and creating post thumbnails altering the default WordPress hooks functions like that blog info or get excerpt creating custom functions and more which we're not even going to talk about so the official term for what these things are called are called hooks hooks are that thing like blog info that's a hook that I guess that they gave it a fun title so you can kind of I guess even with CSS they're called hooks too the official title for when you have class equals header that's actually called a hook officially so hooks and WordPress come in two different types actions and filters so we have an action called get excerpt and then we're able to change the way that excerpt works by creating a function and the filters allow me to do things like change the length of that excerpt from 150 to 200 and modify how that particular hook works this is something that takes a little bit of getting used to in WordPress but it can be pretty cool the next thing we have are widgets and widgets are so that we can create our little sidebar items so here's got the widgets and this is how you might see them used here's a sidebar and a footer social and then these are the available widgets you guys know that when you do a lot of plugins they create widgets that you can use well you can't use them at all in your theme until you put this code into your functions php file and that says register sidebars why they call it sidebars here and they call it widgets somewhere else I don't really understand but just realize that sidebars are widgets now you have to have this that says let's create sidebars but it doesn't tell you how many sidebars you have and what those sidebars are called so in order to do that we would actually have to register the sidebars and give them names for example this one says I'm going to do sidebar main, sidebar extra and this is really cool this one says I'm going to do a module and I'm going to do two of them so we do module one and two because it creates it twice kind of cool now you can also do more where you register a sidebar and you give it a name and you actually change the output of that sidebar as well like whether or not it might have a class before it or a title a lot of times when you use widgets they use h3s as titles is that correct and this you can change to an h4 if you prefer h4 so kind of cool once you've got those created then to use them in your template all you have to do is say if the function exists use a dynamic sidebar or if you really want to one on I output an individual sidebar or an individual widget and anything that I've put into that widget in WordPress will then be output through my theme once I've done that so once again I have to create the widget in my functions file then I can use it in my template file make sense so if you don't want to go through and do all the code yourself I did find this awesome website it's called generatewp and this is one of the best resources you can find what this allows you to do is generate a whole bunch of different things like sidebars I'm not really sure what happened to the sidebar there it is, sidebar generator so I can go to the sidebar generator I can choose what I want to name my sidebars how I want to output this stuff and then I can update the code and it will give me the code to just copy and paste I don't have to go into the functions file and start typing things away it's a lot easier when you use a tool like this because it can get a little complicated but it's not so complicated when you use a tool like this to output the code for you the next thing we have to use are post thumbnails everybody loves using featured images right featured images are one of the foundational awesome things about WordPress and so in order to enable featured images like the one that we have over here on the right hand side we have to have the support for those added into WordPress so in the functions file we add theme support post thumbnails once we do that the featured image box magically appears and we can start to use it it's awesome but we can also do more in there for example we can set custom post thumbnail sizes or we can even create new custom post thumbnails so we can create a banner image that is a particular size I want it to be 1280 by 600 images and you see that little true there's not true or false the true says I want it to crop it automatically so for example if somebody gave me an image that was 1200 pixels by 1000 pixels wide or tall it would just cut off 200 pixels from the top and 200 pixels from the bottom so that it was 600 pixels in the middle which is great and there's a plugin which you should know about I should have mentioned it but right down here it's called post thumbnail editor that will actually allow you to go in and after WordPress automatically generates all those post thumbnails you can then go in and re crop it if you want which is super super cool so to use the featured images not too difficult we have the post thumbnail now we can modify that we can say if it has the post thumbnail use it if it doesn't, don't output anything and then we can also get a particular size that we've created in our theme as well which is awesome this way you can have a background image that's large a featured image that's small you can have maybe on the home page you have a banner image which is using the exact same featured image but just a different size of it so WordPress will create 10 different sizes for you for every image if you ask it to which is incredible you just want to make sure that you create the sizes before you input your images because if you haven't created the sizes before you upload your images it doesn't know to create the different sizes you can generate them after the fact here's another bit of code this one says if it has a post thumbnail show it if not show a placeholder image because you wouldn't want to have a design that's dependent upon a nice image and then not upload one you want something that's a fallback so that if that image doesn't exist you at least have something there that looks nice and then here's a short way of doing that as well now that's a lot of code because you can find that code online 100 different places you just have to know to look for it plus you'll have it in this presentation after the next thing you have is the loop now some of you said you know the loop which means some of you don't know the loop but the loop is one of the foundation things about WordPress you guys know that it's primarily or at least it was primarily a blogging tool right and so blogs are meant you create a blog and then you create another blog so all of a sudden you have three or four or five or a hundred blogs and you have to be able to find all of them so you have to do what's called a loop which says I want to find all of the posts that are blogs or all of the posts that are news and I want to show all of them and for each one I'd like to show the featured image and the title and an excerpt of the text you have a link to the permalink of that particular blog post and so WordPress looks at the database and it says oh this is easy I found all the stuff that matches this criteria of news items and let me output them all for you so I use posts for everything this one is for recent news this one are for the people that work at this particular business these are the people that work there so your basic loop without anything else is this if have posts while have posts get the post and then you echo the content of that post and then you say end while and that is while you have the post and end if because you had a beginning if statement you'll find this code everywhere online that you look for how to do the loop you probably won't find it this simplified you'll find it with all the fancy bells and whistles in there once you have run a loop then what you have to do is say I need to stop that data because I'd like to run something else now and so you need to reset the loop or reset the query or reset the post data something the one that most people use I think is reset post data so here's two ways that you might look at the post get post and WP query because we need to now sort our posts so we get the types of posts that we want because we just can't just do a general if have post get the post because I want to know if I'll have news items or people that I'm looking for so we have get post and WP query to do this so the first one get posts says I want to look for post for page 2 the category name will be news and what it does is it just finds the news items that I want and only does two posts for page and then it allows me to do my loop with just that information what's called a filter now this one has a for each loop in here not going to talk about the difference between for each and the next one which is while because they're essentially the same thing I just wanted to show an example of what you'd see this one is using WP query and it says let's do a WP query using category name news post page it's exactly the same thing the only difference is that I'm using a WP query here and the other one I'm using get posts which are two different hooks which one do you use honestly it doesn't really matter however the one that you see most people talking about is WP query because it seems to be the most popular as well as the most powerful of the different types of ways to filter posts now you can also generate all these things automatically once again using that generate WP if you want to be able to use posts or pages or types or taxonomies or authors or I want to find all the posts that are written by a particular author then you can use this to write the code for you you don't have that complicated query yourself it's actually pretty easy when you use this now we can't get into posts too far without talking about custom posts and taxonomies because this is one of the other things that makes WordPress so cool and until they put all these features in here you know it was still just a blogging tool now we have this powerful information organizing database that it can do and so Nick was talking about this earlier today right about you use custom posts and everything right Laurel uses them you design it but Laurel uses custom posts in pretty much all websites that they create because that's what that's the way clients think they think about their content they think about their menu and they say we have a menu and we have appetizers and then we have main dishes then we have desserts and so they can match the way that the organization of the website and WordPress is organized to match the hierarchy of information that that client has so for example with this one they have locations people, knowledge base and portfolio that they need to have in here so I can create a post type in my functions that says I want to register a post type called people and I want to call all of them persons and I want to have a singular one called person so now when I go back to use it I can say I want to find a post type called people and just output all those people that way I can customize my loop to just use that custom post type and the only difference is adding post type equals people instead of what was it post category or category name equals something. You guessed it generate WP allows you to create these custom post types now it can get a little complicated when you look at the code so I even suggest using a plugin for this a custom post type UI is really really quite good I've used it a number of different times and it simplifies this process here's what it might look like being used. This is a client of mine and they have projects and here you can see all of their different projects so that they can see the information the way I need them to see it. For example they can see what the title of the project is the featured image of the project what date they added it the type of project who the architect was where the location is. That way it's very easy for them to look at it and understand what that information is instead of me using WordPress just out of the box or using some sort of a commercial theme that I have to brute force make work the way I want it to. This way I customize the information for their needs which makes it a lot easier for them to be able to edit the website and a lot easier for me to be able to get it designed the way I want it to be. So one of the ways that I do this is custom fields and it's with custom post types and custom fields that I think the biggest magic happens. Custom fields is actually the bottom of every page and post that you go to you might not have even noticed it was there but you can create custom and I'm sorry these are a little bit light here but you can create a custom field like custom image sample jpeg ipsumurl ipsum.com and the associated presentation ID I was looking at using a HTML5 presentation tool and so it generated that custom field for me. Now the problem with custom fields is that it's just text and sometimes you need to be able to show the client no I need to fill in this text I need to fill in the first name the last name the location their email address their phone number what title you want to call them what their main image is going to be what their qualifications are all sorts of information so I'm actually going to skip forward just a little bit because Nick and Laura were talking about this earlier which is called advanced custom fields best plugin in the world it is absolutely amazing what it does because it allows you to create an extremely powerful way to create custom fields for your clients on a page so here's the way it might look here's where you go into edit one of those projects I was talking about earlier they have the project title the project type locations project description and it keeps on going down the page and they fill in all the little blocks of information and it even has the featured image now in order to use those what you want to do is get the post metadata that's what it's called this get post meta is one of those other WordPress hooks and then I'm adding the argument where I say I want it to get the message well this is kind of funky code I don't like that code so I've often created a or use a simple function to be able to simplify that so that all I have to do is say get the custom field message it's just a lot easier than get the ID and all that kind of stuff but it's a simple code to put in there now if you are using the ACF the advanced custom fields it makes it even easier because it says get field message and that's it it's extremely simple to use custom fields but it's an incredibly powerful and to me with custom post types and custom fields you can pretty much create just about any database structure for any client you would ever need it's amazing what it can do another building block are short codes anybody use short codes what do you think of them they're awesome but are they also a pain have you ever given them to a client and what does the client do the client goes because it looks like code to them so even though short codes exist I kind of avoid them there are short codes are already kind of built into WordPress for like some of the typical things like embedding a YouTube video or a blip TV video or Ustream a lot of them are embed type things but you can create your own there are two basic types there's enclosing and self-closing enclosing means you have a tag at the beginning and you have a tag at the end self-closing means that you have one tag and then you just have the argument inside and then you close it with the bracket at the end now in order to use a short code or create your own short codes it's actually pretty simple in your functions file here you say I want to create a bold text short code and I'm going to return strong strong content and strong then when I want to use it all I have to do is put the little B in brackets in WordPress pretty cool can scare clients like you wouldn't believe and I promise you if you rely upon short code then you will probably find that they will mess up the site like menus menus are really really hard to do for a short code type thing I would actually put it in an editor that would be embedded into the page that the client couldn't even see because if they saw all these like code-ish type things they'd get confused and they want to see just content and that's why custom fields does that it shows them just content no other programming stuff so if you want to generate short codes with generatewp it's there as well so doing it yourself does this sound like it's going to be impossible? no it really isn't we haven't gone over all the different tags but who cares you'll learn those tags as you get to them what you have to have is a plan of attack and a method of working that allows you to minimize confusion so you got to know some HTML and CSS you have to know just a little bit of PHP just a little bit just to be able to recognize what's going on and you have to learn how WordPress works which we've talked about today what are posts what is the loop what are short codes if you don't know what those building blocks are you don't know how to put them in there how to put them into your theme go through the codecs of WordPress and you want to find all those little functions that you think you might want you can search online of course but copy in only one tag at a time just one at a time even into a blank page just to see what it outputs try not to go out and find all the other resources out there and just copy and mess a code you can go to something like this a cheat sheet which shows you all the individual little pieces without much other information or you can go find all the snippets that are out there the problem is with snippets is that you'll often feel like this you'll be trying to find a snippet to do a particular thing and you'll find a snippet that does that one particular thing and twelve other things and it might not be what you want and that's why when you're testing things out go and copy in one at a time that's it then get yourself some sort of editor I don't know if you guys know brackets but it's really quite good I'm just using it nowadays because it's a really powerful one but it also has a great little feature which is if I can get out of this thing it has the ability for me to add snippets oh of course this thing is there we go for example this is a great feature right here snippets manager and if you're using Dreamweaver or Sublime all of them have this kind of feature if you want to look for it but if I want to be able to add a certain piece of code I can actually add it just like that because it understands it then you can create snippets of code that you know what they are for example wp- what is this template directory or wp- loop and I can create these little pieces of code these snippets of code that I understand and then you can just use your library of code to inject the little template tags that you need instead of relying upon going to snippets online and trying to find every single time you do it the new code that you need how many people have done it that way come on we've all done it where you go straight to the web instead of using code that you've done before and you understand by building a little library of snippets and having them at your fingertips at any moment I promise you you will speed up your development time and you'll be able to add in new features as you go forward by developing fancier features now if you need more on WordPress about how to create themes and you want to walk through I have a whole series on YouTube there's 14 files or 14 videos and then I also have here which are the link to the files that are online as well and I'm going to share this presentation with you right here at the end so you can watch the videos and you have access to all the files with all the code in there that you could ever want that walks you through everything including child themes on the description which I didn't get to today because I went oh I don't think we're going to get to that I think this is probably enough so this is the link to the PDF that this presentation has and if you have any questions now is the time to ask any questions yeah well what I love about this thing again brackets is that this particular database actually creates it for me right here so all these little yellow tags are ones that I've created myself and if you want to know the truth I don't always practice what I preach because I have my snippets somewhere I usually use themes I've created before and I beg and borrow and steal from themes and I've created they were talking about Twitter Bootstrap earlier today I'm a foundation person I just like it so I've created like a starter theme in foundation that I install first and then I modify from there but I certainly after starting to play with this I'm like I really need to make these snippets so that I can speed up my development without having to always go back to that theme and it's just a matter of trying things out finding the things that work for you and if you looked at some of my first themes there's like three files in the entire theme I mean some of the websites that we create for smaller clients are really simple websites but they're simple and elegant not simple and and basic but it doesn't take that much code in WordPress to create a fully functioning and very effective website so that's something I want you to leave with for sure is that you don't have to have the complexity of frameworks to be able to have a very effective website oh yeah yeah please sure thing it is O 4 D N V M C and that's tiny url forward slash once again that's O numeral 4 D N V M C and those are all lowercase and so when you go to that basically it just loads up a box PDF and then you can go and grab all the different code that I've talked about today alright go out and make themes go out and make your own custom themes I promise you I promise you it's very rewarding when you get it done and you will find that you will never go back to commercial themes afterwards because you have so much more flexibility in what you can create when it comes to creating something for your clients that fits their mental model of their content that there's no turning back well if you use something like foundation there's it's easy foundation does it for you now this is CSS is not responsive or let's say that responsiveness is about design not about content and what we're really talking about is structure and content today not really about design frameworks like foundation and twitter bootstrap help you make responsive designs which are absolutely wonderful I can't tell you enough good things about foundation since I started using it I developed my own framework I'm like why did I do that after I learned foundation really well I'm like man this is so much easier and it's great it makes beautiful websites or it can help you make beautiful websites yes sir honestly there aren't that many and that's the thing if you stick to the basics you won't have too many problems I have websites that are 6-7 years old and they haven't had a single problem where they have problems are with plugins frameworks and plugins do not gel well together when they update from WordPress 3-4 and the plugins 2 years old that's when all bets are off and that's when websites need to be redesigned but since I started doing my own custom ones and using functions for post types instead of plugins and stuff I don't think I've ever had one ever crash so the only thing that ever has been a problem has been links to a CDN so any other questions if not I think we are at the end so thank you remember that all of these will be on our site afterwards so if you ever do see a slide that you'd like to read it you can go later and pull that up so