Part 1 - WordPress Theme Development - Custom Font Icon and Folder Structure

hey what's up guys Alex Sierra thank you for checking this video and welcome to lesson number one of the series of tutorial on how to build a premium theme for WordPress have you ever heard about monster eyed monster ID is basically WordPress on steroids with this product you can build easily everything from a single blog page to a gigantic ecommerce to sell your product online click on this video to learn more and access a 10% discount for Mon stride or whatever other theme you decided to purchase from the template monster repository before starting we need to collect a bunch of files we need to organize a bunch of things and after that we can safely jump to code but because we are building from scratch a premium theme we have to follow some few steps to organize better our files and to know what to do properly we all the stuff that we have to follow so first of all in order to follow this tutorial you need to download this theme that a custom created is called sunset theme and you can find the description the video and all the instructions to download this theme completely for free with all the files that you need in the description below or in these little video here this little pop-up there is going to appear on the top right of your screen if you already have this file great it means that your follow me on Twitter and I'm super grateful for that so thank you everyone the second thing that you absolutely need is an active and running installation of WordPress with the latest version of WordPress the current version is the four point three point one and I suggest you all to download this latest version because it has a lot of improvements a lot of bug fixes and a lot of security holes have been fixed so be sure to have these clean installation of WordPress with no plug-in installed at all and no other themes other than the 2015 so no other code running around that we don't want to mess with we are going to start creating something super cool from scratch so we don't want our their stuff to clutter our code as I said before starting coding I have to organize my files and have to be sure that I have all the source files that I need to create these amazing theme so first of all if you notice in the file I used sometimes some icons like here we have a tag icon here we have a comment icon and also in the sidebar as you know it is a lot I used a lot of icons closing magnifying glass a pencil picks and whatever all with the purpose of making a pretty theme is that I'm using these icons as images or as SVG's pngs or wherever inside our theme I want to create an icon font an icon font is basically a collection on SVG's that we can use and convert into a font so I can recall these as VG's a proper font so I can scale it infinitely without worrying the blurriness of pixelated icons or whatever and I can manage all the aspect of a standard font so color background alignment all of these sorts of stuff that we cannot actually do it with a standard image so what we have to do is we have to go inside our file and check inside all the folders for all these icons grab these I can copy these icon and paste it into another folder that I called icon set in this icon set folder I collected all the four all the icons in one single line and array size them all to match pretty much the same height and width the important thing to create a custom font icon is to have all the icons we'd kind at the same size if we manage to have all the icons with the same size it's going to be easier for us to manage multiple icons on the same section with just one single font size CSS attribute otherwise thing will be like pretty confusing so be sure to at this anyway if you don't want to follow these you can totally skip this because you're going to find all these files ready to be used inside a github repository there I'm gonna put the link inside the description below this video but if you're interested in this process please bear with me for a couple of minutes and I'm going to show you how to do it so to export this from Photoshop you can select file by file or altogether and export them all of these icons as SVG's the SVG's format is a vector format that gives us the ability to import this type of format inside an online application to generate a custom font icon the online application that I want to use and I want to suggest you to use is IQ moon it's completely free and the amazing thing about it is you're not forced to log in or sign up or subscribe or whatever to use this library it's all based on cash so as far as you don't delete your cache all your custom icons and your custom projects are going to remain inside icon moon but just go to I communed I click on the icon moon app in the top right and you're going to be in this section I already created my custom project year called sunset icon pack but you can create your custom project with the name that you want load the project and by default icon moon is going to put like a couple of libraries I deleted those libraries because I don't need it so what I want to do is I want to import the icons that I created here is the full list of icons that I generated as you notice all are dot SVG and all these icons are vector icons that you can custom create or you can copy somewhere else and you can create your library but you can select all these icons together click open and in a matter of seconds this is like totally in real time I command is going to convert all these SVG into a vector font size so if we actually edit one icon is going to open pretty massive it's pretty big it's not like as big as we created the icon but as you know this is super crisp it's super detailed and it not pixelated at all so he created these font that we can use and the even cool thing is like he can handle the system can handle pretty complex sections so here you notice hi f my sunset logo that is pretty complex with all these random shapes that are merging all together it doesn't really matter for him because he created these icon and I can use these icon as a font and not worry about like coloring or not being able to stretch resize and also having a fun icon is really really useful for responsive design because we can resize things without worrying about quality loss so now what we have to do we have to select click check the select option and select all the icons that we want export and click on the bottle rhyme here generate font the system is going to automatically generate a font we'd all the names of every single icon over single font icon exactly the same as the name of your file that you import it so of course you can change name you can customize the name but if your your file already have the proper name you're not going to have to repeat this step of editing the name one by one before downloading a font just click on the little gear icon here and we want to customize a little bit the option we don't want to leave the font name as I community because it's default we want to customize completely these experience this theme we want to create a premium theme completely customized so I wanna call this font name sunset icon and the prefix of my class so all every time I you have a name of an icon for example all your clothes these class prefix is going to be applied before so it's gonna be I con - audio icon - close and I don't want to leave these icon because it's really generic and I could happen that a user that uses our theme can add a zone custom font or another font icon so I don't want a risk to have the same class prefix for my my phone icon we don't have a phone icon so let's create something completely custom and it's going to be sunset this is the class prefix and the CSS selector you have the option to use the attribute selector that in this case will be the attribute icon or the eye that is the wrapper the HTML wrapper around the font or the class I always like to use a class because it gives me the ability to customize even the generic selector of this class and I usually to avoid confusion I use the exact same font name as a class for my selector here of course you have the options to include metadata support ie 7i6 but we absolutely don't care you can if you create a pretty cool phone you can customize the metadata here put your URL your name if you want to put it as a copyright you can do it but this is completely oh it's up to you and we don't actually need it I customize this option because it's like technically it's better to do it like that we have more control and we're sure that we're going to pretty much avoid or type of overriding or issues that could happen in the future so now that we customize all the option we can close this tab and download the font and now inside our download folder we have the zip file with all the icon and all the font icon automatically generated so if we extract the folder we will notice we have a fonts folder with our sunset icon the four different version of the file that is necessary to use a font icon so we have e OT SVG TTS and WOFF as extension and plus we have the style dot CSS that if we open it we're gonna know is there we have all the settings all the classes the preface the prefix the wrapper container for our font family our custom name and all the icons that we generated with the relative CSS tag that we can use and this is great it took sus like four minutes to do it and now we have a completely customized phone icon that we can use however we want after this we can access our text editor in my case I'm using coda bye panic and before starting to create our custom theme let's stay on the basic root on the basic folder of our wordpress installation let's customize the wp-config.php here we have all our option for database name double user and whatever the the part that I am looking for is the define WP underscore debug and this statement is on false by default I want to change the statement this global variable WP debug to through d WP debug basically it's saying to WordPress to in a through statement to print all the error all the PHP error PHP notice PHP warnings that we're gonna have during a the usage of our website by default of of course is on false because we don't want a user or a client to see these errors but because right now we are developing a new theme completely from scratch we are going to for sure do a lot of mistakes and we need to keep track and we need to know if we're gonna if we're doing something wrong so with the through statement we're going to activate the WordPress debugging mode and every time we do something wrong WordPress is going to trigger the full PHP error with the indication of what we did wrong so now we are pretty ready to go remember to save this file and close it now we can access the folder the WP content and the themes folder in here create a new folder course called sunset - theme or whatever name you want to give to your theme it doesn't really matter the important thing is that has to be a unique name something that doesn't exist and if you can do a small research before creating a custom theme you will avoid you name your theme with a name that already exists for another theme so be sure to use a unique name all lower case without any blank space and if you want to separate words you can use at - but you can always write everything out - sunset theme it doesn't really matter in my case I want to put that - because I have two tees one close to another so I don't really like it's just a visual thing Lexus is this folder and let's start creating our folder structure I already know my folder structure and you should know so your folder structure before starting developing a theme you should write down on a piece of paper all the files that you wanted you want to use and all the configuration that you want to maintain in my case I'm going to use a pretty standard configuration so I want a folder called CSS follow my style I want a folder called Jas for all my JavaScript I want a folder called template parts for all the parts that are not related to the standard structure folder but we're going to see how we're going to use this folder in the future lessons and I want to use another folder called Inc where I'm going to put all the functions all the different files the handle different function to avoid to clutter my file functions PHP I want to now create alternative folder called sass because I want to use sass to develop these project is custom theme if you know nothing about sass I suggest you to check the alikat crash course that is a super quick tutorial about sass and you're gonna be pretty much in 15 20 minutes or so ready to go and ready to rock with sass if you want you can find link in the description below or you can check in this little pop icon that appear here on the top right of your screen now that we have the folder structure we can start putting our file inside here so inside CSS I want to create another folder called fonts because here I'm going to put all the fonts the first one that I know that I already have is the sunset fonts icon that I generated so let's hope it is let's open this folder and let's paste any here now we have to create the standard file that a custom theme I think for WordPress needs to be properly activated so we need to create the header dot PHP we need to create index dot PHP and we need to create the footer dot PHP and now to define all the options and name the description of the other we have to create another file called style dot CSS be aware that we are not going to use this file to put our CSS style in here we're going to use sass and automatically sass is going to generate an output CSS inside our CSS folder that is going to be probably called sunset dot CSS but wordpress needs absolutely the style dot CSS file in the root folder of your theme so even if you're not using this file to style your theme you need the file to be there in that location and be called style dot CSS don't change the name of this file or wordpress is not gonna recognize it and here we can start writing the standard information that WordPress theme needs so the first one is theme name and the theme is some theme that would like it a lot the theme you can specify the theme theme URI and here my theme is a HTTP column or slash forward slash alikat comm slash Sansa theme author CAD author URI is the same address but we uh the final part description here especially if you want to sell this theme or if you want to share it on the WordPress theme repository you have to write a proper compelling description so something that could be interesting for the user that has to pick your phone so let's write something something like that it's pretty catchy it's pretty cool right or maybe not especially if we don't write things properly administration I don't know how to write any more definitive Ally for your daily blog perfect okay now we have to specify the version and is the version 1.0.0 doing development sometimes you could write zero point zero point Q alpha or wherever you're like completely free and the more you go the more this number raised but by default I know that I'm not going to raise this theme until until it's complete so let's just start with the version one and we're going to go with that license because I want to release this theme I don't want to sell it I want to release for free I want to use a GPL license that is the standard gnu general public license version 2 or later probably subversion 3 but I'm not sure the version 2 is the most common one so always use this one and specify later because if they updated the version two with an art version you're going to be good to go license URI we have to specify especially if we specify a specific license we have to specify the actual URI of this license and this is the you are either you can put like new dark slash licenses last GPL - 2.0 point HTML pretty standard and the last parameter I wanna put is tags tags are useful for the research inside that WordPress theme repository so let's put blog sidebar responsive clean minimal I can find something else sunset maybe if the user searches sunset is gonna find our theme custom and main options are pretty much the state we can always extend this list if we want some other cool tags that we want to implement but for now we're pretty good to go so by default before activating I want to create also a nice preview for my theme so I have to generate a PNG with 1200 / 900 pixels screenshot of my theme I already created this picture and as usual you can find the source file in the updated github repo if you decide to create featured a screenshot image from scratch by yourself be sure to name this file always screenshot dot PNG otherwise the system WordPress will not be able to detect your screenshot file and will not be able to grab it and use it in the preview of your theme so now just because I want to activate the theme even if C is completely empty we have to implement a bunch of standard WordPress functions and hooks here the first function that a one activity inside the header dot PHP is WP and SCOR had weed no declaration of variables not attribute another file that I want to open is the footer dot PHP and the same pretty much the same thing but of course we the same name as the file the WPE underscore footer we'd know variable past and inside the index here the two PHP tags as usual and the two functions called get header we know string name attached and the second PHP tag get footer and it's here let's access our WordPress installation let's access a word dashboard reload our dashboard let's go to appearance themes and let's check in the list of themes we have our sunset theme with a date available what the hell is happening why is it update there is an update version 1 5 5 details since a theme or we have a sunset theme I can't believe it this theme hasn't been updated in over two years this is madness Oh WordPress is recognizing this theme with the same name so what we have to do we have to unfortunately change this name to avoid conflicts what did I say about checking if your theme already exists in the repository yes I did it and I didn't find is still the sense a theme but ok let's go back in our text editor let's access the Routh folder called themes where our theme is and let's just remove the - because WordPress is detecting that these sunset theme already exists so WordPress checks the availability of a theme or like the legit name of a theme based on the folder of the name folder so I could call this just simply sunset or just remove the - sunset theme after we do that we can access our installation reload the appearance page and you will notice that yeah day it is yet played other it's gone it means that this sunset theme the folder I call Sun setting without any - doesn't exist and we're pretty good to release it if we wanna we can also customize more the theme name and put la cad sense a theme just because we already have a sunset theme inside a wordpress repository for themes so having a slightly different name is maybe better more recognizable for your theme so let's assess here let's refresh let's check theme details and now we have alikat since a theme we have our funeral image and if we resize the screen you will notice that WordPress is fully responsive also in the administration panel so always be sure to follow the guidelines of the screenshot or wise you're gonna end up especially on big screen with a super blurry image that it's not really good especially if you're trying to sell your theme and to create a premium experience having a blurry preview is just terrible for your image so it's pretty much it for today's lesson this was a quick introduction to on how to create the first standard structure of our theme we created all the basic folders that we're gonna populate with our custom files we create the first few files necessary absolutely necessary to activate and legit theme for WordPress and in the next lesson we're gonna start banging our hat on this awesome code and we're gonna start creating amazing things so I hope you enjoy I hope you like this video if you did please give it a thumbs up or subscribe to my channel and if you have question doubts or you didn't understand something just leave a comment below I will try to answer every one if you want to follow a more basic series of tutorial be sure to check the WordPress one on one for beginner developers and if you don't know anything about sass something that we're going to use inside this project be sure to alik at crash course to learn sus in five minutes or even less if you're smarter than me and you probably are so thank you again guys and until next video as usual happy coding

Channel: Alessandro Castellani

Views: 155,918

Keywords: Wordpress, tutorial, permium, advanced theme, admin options, custom options, help, php, development, web design, font icon, icomoon

Id: IZdMWEjbsIo

Length: 26min 53sec (1613 seconds)

Published: Mon Oct 12 2015