GAO-13-303, Export-Import Bank: Recent Growth Underscores Need
Day 8 - Underscores · 2020. 5. 3. · Your general styles should apply to Pages and then page...
Transcript of Day 8 - Underscores · 2020. 5. 3. · Your general styles should apply to Pages and then page...
![Page 1: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/1.jpg)
TWD 26
WordPressDay 8 - Underscores
1
![Page 2: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/2.jpg)
What is underscores?
_s, or underscores, is a WordPress starter theme.
It is a code base for building custom themes.
![Page 3: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/3.jpg)
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.
![Page 4: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/4.jpg)
WordPress Custom Themes
You don’t build custom themes from scratch…
…you build your theme on a solid foundation.
![Page 5: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/5.jpg)
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.
![Page 6: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/6.jpg)
Advanced Options
Click “Advanced Options”.
Apart from the Theme Slug, these fields can be changed in style.css later.
![Page 7: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/7.jpg)
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!
![Page 8: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/8.jpg)
Advanced Options - Example
Type in your theme name.
Type in your unique theme slug... lowercase with no spaces.
![Page 9: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/9.jpg)
Advanced Options
Check the box if your theme will support WooCommerce.
Check the box to include the Sass files in your theme.
![Page 10: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/10.jpg)
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.
![Page 11: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/11.jpg)
Start developing!
You now have your own version of the underscores starter theme that you can edit to create a custom theme.
![Page 12: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/12.jpg)
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.
![Page 13: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/13.jpg)
Lacks most styling
At first glance, it looks bad.
There is no styling other than the basic structure.
But the code foundation is solid.
![Page 14: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/14.jpg)
style.css - Theme Details
You can update the theme information in the style.css header comment.
![Page 15: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/15.jpg)
style.css - Table of Contents
Use the table of contents to find where to edit or add CSS.
Remember… the structure and order matters.
![Page 16: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/16.jpg)
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.
![Page 17: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/17.jpg)
File Structure
The file structure is well thought out and allows for easy customization and DRY development practices.
![Page 18: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/18.jpg)
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
![Page 19: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/19.jpg)
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.
![Page 20: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/20.jpg)
Use the Template Hierarchy
Use the Template Hierarchy chart to see what files need to be edited or created.
![Page 21: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/21.jpg)
Page
The page template displays page content as well as comments,if enabled.
![Page 22: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/22.jpg)
Single Post
The single post template displays post content as well as comments.
![Page 23: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/23.jpg)
The Blog Index
By default the “Posts” index is typically the landing page for WordPress sites.
![Page 24: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/24.jpg)
Archives
By default, all archives (lists of posts) except the Blog index are handled by archive.php.
![Page 25: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/25.jpg)
Search Results
Search Results are displayed in a default loop using their own search.php template.
![Page 26: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/26.jpg)
Semantic StructureMain semantic structure.It is featured on all template pages in the theme.
Each element has an ID and minimum one class
![Page 27: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/27.jpg)
Semantic Structure: #mastheadheader.php
![Page 28: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/28.jpg)
Semantic Structure: #primaryBase template files: index.php, single.php, archive.php, etc.
+
content.php, content-page.php, etc.
![Page 29: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/29.jpg)
Semantic Structure: #secondarysidebar.php
![Page 30: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/30.jpg)
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.
![Page 31: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/31.jpg)
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
![Page 32: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/32.jpg)
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…
![Page 33: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/33.jpg)
Custom header
Place the sample code from /inc/custom-header.php into header.php or wherever you wish to display the header image.
![Page 34: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/34.jpg)
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/
![Page 35: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/35.jpg)
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.
![Page 36: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/36.jpg)
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' )
![Page 37: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/37.jpg)
Block Editor Resources
LinkedIn Learning Tutorial:
WordPress Content Blocks: Working with Themes
Official Documentation:
Block Editor Handbook: Theme Support
![Page 38: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/38.jpg)
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:
![Page 39: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/39.jpg)
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.
![Page 40: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/40.jpg)
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.
![Page 41: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/41.jpg)
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.
![Page 42: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/42.jpg)
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.
![Page 43: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/43.jpg)
Single post Index/Archive
![Page 44: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/44.jpg)
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.
![Page 45: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/45.jpg)
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.
![Page 46: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/46.jpg)
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.
![Page 47: Day 8 - Underscores · 2020. 5. 3. · 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](https://reader034.fdocuments.in/reader034/viewer/2022052003/6016e3e329120862776a31c0/html5/thumbnails/47.jpg)
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.