Customizing WordPress – #12 + 13 – About Starter Themes – YouTube Videos

Customizing WordPress #12 – Starter Themes – Intro To Underscores 4:23

LevelUpTuts
Published on Apr 15, 2014

The 12th video in the Customizing WordPress tutorial series. Here we create a new theme with the Underscores Starter Theme.

Create Your Underscores Based Theme at underscores.me . Here is what their home page says:

Hi. I’m a starter theme called _s, or underscores, if you like. I’m a theme meant for hacking so don’t use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That’s what I’m here for.

My ultra-minimal CSS might make me look like theme tartare but that means less stuff to get in your way when you’re designing your awesome theme. Here are some of the other more interesting things you’ll find here …

Learn more about me in “A 1000-Hour Head Start: Introducing The _s Theme” on ThemeShaper.

So once you’ve watched the video and reviewed the links above, move on to the next video.

______________________________________________________________

Customizing WordPress #13 – Underscores Starter Theme Part 2 11:39

LevelUpTuts
Published on Apr 15, 2014

The 13th video in the Customizing WordPress tutorial series. Here we dive deeper into the Underscores starter theme and learn about how the theme is constructed and what it offers.

See also Navigation Menus at the WordPress Codex and from the top of this page see also:

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

So in the last video, we downloaded the _s theme, unzipped it, and ftped it up to our site placing the files in the correct directory–See Installing A Theme, pp 431 433 in WP For Dummies 8 in 1.

You should do the above so that you can follow along on your own site as you watch the video.

And here’s what our bare bones _s theme looks like in our browser:

fig1

The theme is totally customizable with CSS.

1:15 – 2:58 So we notice that we have widgets showing up at the bottom of the page–This is because the theme has a widget area called sidebar and it is displaying the widget area at the bottom of the page.

1:45 – You’ll notice that the sidebar doesn’t display on the side and this is because the theme makes no assumptions about your layout. So we’re going to inspect the elements and see what’s going on and how to change them.

fig2

The side bar is at the bottom starting with Archives in the bottom left.

1:55 – 2:50 So now we’re going to inspect these element, sidebar below:

fig3

And once we find the correct element we can change the style any way we want -this is clearly explained at 1:55 – 3:00. Outstanding.

3:00 – 7:15    So now we’re going to look at the files for our _s (underscores) theme. He gives great detail in this section. Everything should look familiar from earlier videos.

fig4

7:15 There is a good read me file about the _s (underscores) theme. It goes over the themes features and how to use them.

7:25 –  9:35 So now we’re going to look at the styles (style.css) file. The Table of Contents helps you find things and also is searchable. Say you want to search Navigation – just hit command f and search for 5.0, for example.

The style.css file is where you will add your css code to customize your theme.

fig5

9:35 –     Next we’re going to look at our layouts folder. The layouts folder has two different files: content-sidebar.css and sidebar-content.css. The two files are very bare bones but they allow us to easily add code to our style.css

We’d copy the code from one of the above files and put it in our style.css where it belongs.

fig6

“Now I’d probably use a grid frame . . .” If you want to learn more about this check out:

CSS Grid – Table layout is back. Be there and be square. | Web …

https://developers.google.com/web/updates/2017/01/css-grid

May 12, 2017 – If you are familiar with Flexbox, Grid should feel familiar. Rachel Andrew maintains a great website dedicated to CSS Grid to help you get …

Flexbox? Grid? · ‎Defining a grid · ‎Placing the items

 

This entry was posted in Ecommerce, Open Source Software, Website Design And Marketing, Wordpress. Bookmark the permalink.