In this video, I’m going to demonstrate WordPress Theme Development Tutorial with the Underscores Starter Theme.

Table of Contents:

3:17 First Look at the Files https://youtu.be/LdTWGvP1k2Q?t=3m17s

3:48 Style.css File https://youtu.be/LdTWGvP1k2Q?t=3m48s

5:53 Index.php file https://youtu.be/LdTWGvP1k2Q?t=5m53s

7:38 The Loop https://youtu.be/LdTWGvP1k2Q?t=7m38s

12:28 Sidebar.php file https://youtu.be/LdTWGvP1k2Q?t=12m28s

13:12 Header.php file https://youtu.be/LdTWGvP1k2Q?t=13m12s

19:21 Footer.php file https://youtu.be/LdTWGvP1k2Q?t=19m21s

21:28 Content.php file https://youtu.be/LdTWGvP1k2Q?t=21m28s

22:30 Template-Tags.php file https://youtu.be/LdTWGvP1k2Q?t=22m30s

26:07 Comments.php file https://youtu.be/LdTWGvP1k2Q?t=26m07s

26:44 Developer Code Reference Website https://youtu.be/LdTWGvP1k2Q?t=26m44s

31:07 Functions.php file https://youtu.be/LdTWGvP1k2Q?t=31m07s

38:13 Page.php file https://youtu.be/LdTWGvP1k2Q?t=38m13s

38:47 Content-Page.php file https://youtu.be/LdTWGvP1k2Q?t=38m47s

39:27 404.php file https://youtu.be/LdTWGvP1k2Q?t=39m27s

39:56 Archive.php file https://youtu.be/LdTWGvP1k2Q?t=39m56s

40:27 Search.php file https://youtu.be/LdTWGvP1k2Q?t=40m27s

40:44 Content-Search.php file https://youtu.be/LdTWGvP1k2Q?t=40m44s

42:30 Custom-Header.php file https://youtu.be/LdTWGvP1k2Q?t=42m30s

44:00 Extras.php file https://youtu.be/LdTWGvP1k2Q?t=40m00s

46:25 Theme Handbook https://youtu.be/LdTWGvP1k2Q?t=46m25s

I chose to demonstrate this using the Underscores Starter Theme for WordPress because it’s actively maintained and will be kept up to date which means you won’t be learning outdated code.

This video is meant for people new to WordPress Theme Development. I will walk you through the various files, folders and give you a general sense of what the code is doing.

You will need a few tools and resources to help you along the way.
https://www.mamp.info/en/
http://www.wampserver.com/en/
https://atom.io/
http://underscores.me/
https://developer.wordpress.org/reference/
https://developer.wordpress.org/themes/

Developing your first WordPress theme can be a task that can take months just to get started. That’s why I created this video that will give you a tremendous head start by introducing you to a starter theme developed by the WordPress Team from Automattic.

The Underscores Starter theme provides you with the base files, folders and code you need to get started. It is also actively maintained and free to use on your projects.

These are a few of what the Underscores Theme provides you to get you started with WordPress Theme Development.

A just right amount of lean, well-commented, modern, HTML5 templates
.
A helpful 404 template.

An optional sample custom header implementation in inc/custom-header.php

Custom template tags in inc/template-tags.php that keep your templates clean and neat and prevent code duplication

Some small tweaks in inc/extras.php that can improve your theming experience.

A script at js/navigation.js that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry.

2 sample CSS layouts in layouts/: A sidebar on the right side of your content and a sidebar on the left side of your content.

Smartly organized starter CSS in style.css that will help you to quickly get your design off the ground.

The GPL license in license.txt. Use it to make something cool.

If you want to keep it simple, head over to http://underscores.me and generate your _s based theme from there. You just input the name of the theme you want to create, click the “Generate” button, and you get your ready-to-awesomize starter theme.

Domain Name & Hosting
http://shop.pixemweb.com

Premium WordPress Theme
https://www.pixemweb.com/evo-pro-wordpress-theme/

$99 off Realtors IDX Setup Fee
https://signup.idxbroker.com/d/PixemWeb

Don’t forget to Subscribe and follow us @

https://www.patreon.com/pixemweb
http://www.youtube.com/c/Pixemweb?sub_confirmation=1
https://www.pixemweb.com/
https://plus.google.com/+Pixemweb/
https://twitter.com/PixemWebDesign
https://www.facebook.com/pixemweb
https://www.linkedin.com/in/pixemweb
https://instagram.com/pixemweb/
https://www.quora.com/profile/Joel-Rivera-2

source

17 Comments

  2. Been a WordPress dev since 2014. Stepped away to finish my computer science degree. Coming back none of this was new but good job helping people get into WP Dev the proper way.

  3. Nice tutorial but the question is: Should we create a child theme of Underscore so we can easily update it or is not worth it if we make a lot of changes?

  5. This video was very helpful! The underscores theme has been updated since this video was made, and everything shown is still relevant. I now feel confident to experiment with applying my own CSS as well as using CSS frameworks. Thank you!

  6. This video is not a tutorial but a documentation of _s functionalities.
    Either change the title or write Part 1 at the end of the title. Nevemind about part 2 as I could not find it.
    You need to watch a tutorial about making an youtube playlist. 🙁

  7. Wow, this is helping me tremendously…I have tried other ways to create my own them with my minimal php knowledge and it has been a headache…this process so far is ver helpful thank you

  8. Thank you so much for the explanation. I went through some bootstrap tutorials with others that was a wee bit over my head. I feel this gives me some basic structure to work with as a beginner theme developer and you make it all seem doable in the way you explain everything. Thanks again.

  10. I am planning to create a personal website using WordPress as one of my portfolio project. I am going to design and customize it with HTML/CSS/JS skills. is there any starter theme will you recommend? Thanks.

Leave A Reply

Please enter your comment!
Please enter your name here