Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
TWD 26
WordPressDay 8 - Underscores
1
What is underscores?
_s, or underscores, is a WordPress starter theme.
It is a code base for building custom themes.
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.
WordPress Custom Themes
You don’t build custom themes from scratch…
…you build your theme on a solid foundation.
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.
Advanced Options
Click “Advanced Options”.
Apart from the Theme Slug, these fields can be changed in style.css later.
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!
Advanced Options - Example
Type in your theme name.
Type in your unique theme slug... lowercase with no spaces.
Advanced Options
Check the box if your theme will support WooCommerce.
Check the box to include the Sass files in your theme.
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 option in WordPress.
Activate the theme.
Start developing!
You now have your own version of the underscores starter theme that you can edit to create a custom theme.
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.
Lacks most styling
At first glance, it looks bad.
There is no styling other than the basic structure.
But the code foundation is solid.
style.css - Theme Details
You can update the theme information in the style.css header comment.
style.css - Table of Contents
Use the table of contents to find where to edit or add CSS.
Remember… the structure and order matters.
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.
File Structure
The file structure is well thought out and allows for easy customization and DRY development practices.
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
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.
Use the Template Hierarchy
Use the Template Hierarchy chart to see what files need to be edited or created.
Page
The page template displays page content as well as comments,if enabled.
Single Post
The single post template displays post content as well as comments.
The Blog Index
By default the “Posts” index is typically the landing page for WordPress sites.
Archives
By default, all archives (lists of posts) except the Blog index are handled by archive.php.
Search Results
Search Results are displayed in a default loop using their own search.php template.
Semantic StructureMain semantic structure.It is featured on all template pages in the theme.
Each element has an ID and minimum one class
Semantic Structure: #mastheadheader.php
Semantic Structure: #primaryBase template files: index.php, single.php, archive.php, etc.
+
content.php, content-page.php, etc.
Semantic Structure: #secondarysidebar.php
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.
Set the content width
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…
Custom header
Place the sample code from /inc/custom-header.php into header.php or wherever you wish to display the header image.
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/
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 or disable those options too.
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' )
Block Editor Resources
LinkedIn Learning Tutorial:
WordPress Content Blocks: Working with Themes
Official Documentation:
Block Editor Handbook: Theme Support
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:
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.
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.
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.
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.
Single post Index/Archive
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.
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.
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.
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.