WordPress Theme Development with UnderStrap for Beginners. Step By Step Guide – 2017.

Hey, what's good y'all This is Arjun and welcome back to my channel

Today we'll see how to set up UnderStrap which is a Bootstrap based WordPress theme framework and how can you use that to start building your own theme Now, I know that this is not something basic, you gonna need a liitle bit of expertise in order to start building your WordPress theme We'll be just discussing about the installation process today and in upcoming videos we'll be discussing about the other things like developing our own theme And speaking of UnderStrapit's based on Bootstrap, which means it's gonna work on your desktop, laptop as well as the mobile devices without any problem So, withour further ado, let's get into it First off, fire up your browser and search for UnderStrap Click on the very first result and you can download the latest version right away

Actually, a detailed documentation is available here, so if you get stuck somewhere, you can always refer to this guide and what I'm gonna show to you guys is pretty much the same So, for some reason you can't access my videos, then you might wanna keep a copy of this or print it or you know, just have it with you so that you can alway refer to it even if you're offline Now, after you've downloaded your copy of UnderStrap the next thing you'll need to do is upload it to your WordPress theme directory For this, you need to login to your WordPress dashboard using your username and password then navigate to the theme section and click add new then upload your zip file if you've uploaded succesfully, then you'll see a message like this

Now click activate to activate your theme Now that you've your basic UnderStrap theme applied to your WordPress website and now you might wanna teak it So, before you do that learn CSS and SASS If you know it, We're cool! But if you dunno eh? Haha, Just Kidding! If you don't know it, then I definitely recommend you to learn it A lot of resources are available online and you can watch videos on YouTube and learn it then comeback and start tweaking your theme

Otherwise you might get stuck Now, let's see how to setup UnderStrap, before you do that you need to install the dependencies So, to do that you have to type in ternminal in the Spotlight and it'll load up the terminal and now navigate to the menu where you've installed UnderStrap In my case, HTDocs, WP, WP Content, themes and UnderStrap So, UnderStrap and drag it to the terminal and it'll give you the path

Now, hit return and type in npm install You can find all these commands in the documentation that I mentioned earlier, it'll start the installatiion and it gonna take a while, because it's around 130 MB of something like that So it gonna take a little time Once your installation is successfully completed, you'll see a folder called node_modules in your UnderStrap directory like this So, if you're seeing this you've successfully installed Node and all the dependencies needed to work with UnderStrap

Now that we've everything ready, now we gonna work with the SASS here I'm just going to show you, how to change something that comes with the default UnderStrap using SASS So, open any text editor here I'm using Sublime Text any text editor is fine and add a project folder Have to navigate to HTDocs, then select your WordPress folder, WP Content, themes, UnderStrap then select SASS and click open

So, you'll see a directory like this and inside theme folder, there is a _themescss file, this is where we define our custom style So, let's define something here Body, background Uh

background red Double F, four zeroes and set it as important Now, let's see if this change is applied to our website, Let me refresh this

No! The change is not applied It's because we haven't compiled our SASS file To do that, we need to go to the terminal and navigate to the folder where we've installed the UnderStrap This time you have to navigate to the SASS folder inside the UnderStrap directory So, WP Content and themes, UnderStrap and inside you can see the folder called SASS

Now, drag that right into the terminal Okay, now hit return and you've successfully entered into the SASS folder Now, type in the following commands sudo gulp watch and if you're seeing something like this wnter your administrator password and yeah, once you get this it means that it's watching for the changes Now, let's save it again and let's go to our browser, refresh BOOM! The changes have been successfully applied This way, you can perform as many tweaks as you want and I'm gonna show you something I did for a client of mine and this is something that i did with WordPress and UnderStrap and I've made a lot of customizations here

I've added a loader using PaceJS and you can see here, down here that Yes , theme bu UnderStrap by understrapcom I haven't changed that yet

It's currently under construction so, but Uh This is just an example You can build it anyway you want You konw, with SASS and UnderStrap you have the power to edit whatever you want

This is just the responsive view of my website so, um that's it for today and thank you very much guys for making it to the end of the video If you liked this, share it with your friends and let them know about my channel and do subscribe because, I'm very low on subsicribers So, please subscribe and it'll act as a motivation for me to upload more videos to you guys So, please do that and don't forget to press the bell icon when you subscirbe and thank you very much, have a great day I'll see you guys in my next video

Free Email Updates
We respect your privacy.

affiliate marketing amazon

affiliate marketing