WordPress Day 8 - Underscores 1 What is underscores? _s, or - - PowerPoint PPT Presentation

TWD 25

WordPress

Day 8 - Underscores

1

2

What is underscores?

_s, or underscores, is a WordPress starter theme. It is a code base for building custom themes.

3

Why use underscores?

Maintained by Automattic developers. This is the recommended starter theme for both WordPress.org and WordPress.com. Regularly updated and kept up to the standards.

4

WordPress Custom Themes

You don’t build custom themes from scratch… …you build your theme on a solid foundation.

5

How do you start?

Visit underscores.me Add a name for your theme and this will replace all the _s namespace prefixes and create a theme for you.

6

Advanced Options

Click “Advanced Options”. Apart from the Theme Slug, these fields can be changed in style.css later.

7

Pick a Unique Theme Slug

Before selecting a Theme Slug, search for it on https://wordpress.org/themes/ If it already exists… you will get update notifications in WordPress that aren’t for your theme!

8

Advanced Options - Example

Type in your theme name. Type in your unique theme slug... lowercase with no spaces.

9

Advanced Options

Check the box if your theme will support WooCommerce. Check the box to include the Sass files in your theme.

10

Activate your starter theme

Click “Generate” to download your zipped theme folder. Extract the theme and add it to your wp-content/themes folder or use the Upload theme

• ption in WordPress.

Activate the theme.

11

Start developing!

You now have your own version of the underscores starter theme that you can edit to create a custom theme.

12

Exercise: Create a starter theme

Follow the steps from the previous slides to create your own starter theme. Install and activate the starter theme on your local Vancouver website.

13

Lacks most styling

At first glance, it looks bad. There is no styling other than the basic structure. But the code foundation is solid.

14

style.css - Theme Details

You can update the theme information in the style.css header comment.

15

style.css - Table of Contents

Use the table of contents to find where to edit or add CSS. Remember… the structure and order matters.

16

style.css - Comparing to TWD Theme

The twd-starter-theme used for the Mindset site is a variation of Underscores that has more styles. Underscores does not include any Layout, Header1 or Footer sections. You would create those yourself.

1 There are default styles for the header navigation menu though.

17

File Structure

The file structure is well thought out and allows for easy customization and DRY development practices.

18

Development Files and Folders

The following files and folders are specifically for your development environment. WordPress does not use these so you can remove them or ignore them if you are not using them: bin folder composer.json .eslintrc package.json .stylelintrc.json phpcs.xml.dist

19

Folder Structure

inc → PHP files to be required into functions.php. js → JavaScript files to be enqueued in functions.php. languages → Translation files. sass → Sass files to be compiled into style.css. template-parts → PHP template part files.

20

Use the Template Hierarchy

Use the Template Hierarchy chart to see what files need to be edited or created.

21

Page

The page template displays page content as well as comments, if enabled.

content-page.php comments.php

Page page.php

22

Single Post

The single post template displays post content as well as comments.

content.php comments.php

Single post single.php

23

The Blog Index

By default the “Posts” index is typically the landing page for WordPress sites.

content.php content-none.php

Blog index index.php

24

Archives

By default, all archives (lists of posts) except the Blog index are handled by archive.php.

content-[post-type].php content-none.php Archives: Category Tag Author Day / Month / Year Custom Post Type Index Taxonomy Term Index

archive.php

25

Search Results

Search Results are displayed in a default loop using their own search.php template.

content-search.php content-none.php

Search results search.php

Semantic Structure

#page .site #masthead .site-header #colophon .site-footer #primary .site-main #secondary .widget-area (Optional)

Main semantic structure. It is featured

• n all template

pages in the theme. Each element has an ID and minimum one class.

26

Semantic Structure: #masthead

<header> #masthead .site-header <div> .site-branding

header.php

<h1> .site-title <p> .site-description <nav> #site-navigation .main-navigation <button> .menu-toggle (for mobile screen) <div> .menu <ul> .nav-menu

27

<main> #primary .content-area

Semantic Structure: #primary

Base template files:

index.php, single.php, archive.php, etc. + content.php, content-page.php, etc.

<article> #post-[ID] .[post-classes] <nav> .navigation .post-navigation <div> #comments .comments-area

<header> .entry-header

• title + post meta (date, author)

<div> .entry-content

• content / excerpt + post paging navigation

<footer> .entry-footer

• post meta (categories, tags, edit link)

28

Semantic Structure: #secondary

<aside> #secondary .widget-area <section> #[widget-name-ID] .widget .[widget-type]

sidebar.php

<h2> .widget-title <ul> <section> #[widget-name-ID] .widget .[widget-type] <h2> .widget-title <ul>

29

30

How to start development

Check functions.php and see what the starter theme supports by default. Examples: Featured Images, Custom Background, Custom Logo. These can be deactivated by deleting the code if you don’t want the feature in your theme.

Set the default content width in the functions.php. This value controls the max width in pixels of media elements like oEmbeds and Images.

31

Set the content width

32

Custom header

Underscores has a feature for a custom header… …but you need to add some code where you want to display the custom header…

33

Custom header

Place the sample code from /inc/custom-header.php into header.php or wherever you wish to display the header image.

34

Block Editor Support

Underscores currently doesn’t include code to fully support the block editor. Use add_theme_support() to opt-in to the features you wish to support, then update your CSS accordingly.

https://developer.wordpress.org/block-editor/developers/themes/theme-support/

35

Block Editor Opt-in Examples

add_theme_support( 'wp-block-styles' ) add_theme_support( 'responsive-embeds' ) add_theme_support( 'align-wide' ) add_theme_support( 'custom-line-height' ) add_theme_support( 'custom-units' )

You can also change the color palettes and font sizes

• r disable those options too.

36

Block Editor Styles

To add front end styles to the back end block editor use the following functions: add_theme_support( 'editor-styles' ) add_editor_style( 'style-editor.css' )

37

Block Editor Resources

LinkedIn Learning Tutorial: WordPress Content Blocks: Working with Themes Official Documentation: Block Editor Handbook: Theme Support

38

get_template_part()

Underscores uses the fallback feature of get_template_part() to limit the number of files you need to create. Open index.php, archive.php, or single.php to see:

39

get_template_part()

If we had a post type named ms-work, the previous code would look for content-ms-work.php in the template-parts folder. If that file did not exist, that code would fallback to using content.php.

40

Styling

Write your CSS mobile-first. Use media queries for larger screen sizes. Put your general styles in the first few sections of style.css: Typography, Elements, Forms, etc. Put your page specific styles using the body class in the Content section.

41

Styling - Where to begin

Start by styling the header and footer to create the framework for your content. Then set the generic styles for your site and its content. Then move on to styling specific pages and sections.

42

Styling - Single then Archive

Style the single blog post template and any single custom post types first. These same styles can then apply to the archive pages as well and only minor changes need to be made.

43

Single post Index/Archive

44

Styling - Pages

Your general styles should apply to Pages and then page specific styles can be added in the Content section of style.css. If your home page reuses content from throughout the site, style it last to reuse the already created styles.

45

Styling - Search & 404

Don’t forget to style 404 page and change its content in 404.php. Don’t forget to style the search results page for when it finds results and when it does not find results.

46

Sass in underscores

If you checked the _sassify! checkbox when creating the theme... underscores creates the necessary Sass partials and has them organized into subfolders in the sass folder. Note: We will cover Sass in underscores during the Capstone Project, use regular CSS for now.

47

Underscores Tutorial

LinkedIn Learning:

https://www.linkedin.com/learning/wordpress-building-themes-from-scratch-using-underscores-2/

Note: Some aspects of the tutorials may be out of date for the current version of Underscores.