TWD 25 WordPress Day 8 - Underscores 1
What is underscores? _s, or underscores , is a WordPress starter theme. It is a code base for building custom themes. 2
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. 3
WordPress Custom Themes You don’t build custom themes from scratch… …you build your theme on a solid foundation . 4
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. 5
Advanced Options Click “Advanced Options”. Apart from the Theme Slug , these fields can be changed in style.css later. 6
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! 7
Advanced Options - Example Type in your theme name. Type in your unique theme slug... lowercase with no spaces. 8
Advanced Options Check the box if your theme will support WooCommerce. Check the box to include the Sass files in your theme. 9
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. 10
Start developing! You now have your own version of the underscores starter theme that you can edit to create a custom theme. 11
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. 12
Lacks most styling At first glance, it looks bad. There is no styling other than the basic structure. But the code foundation is solid. 13
style.css - Theme Details You can update the theme information in the style.css header comment. 14
style.css - Table of Contents Use the table of contents to find where to edit or add CSS. Remember… the structure and order matters. 15
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, Header 1 or Footer sections. You would create those yourself. 1 There are default styles for the header navigation menu though. 16
File Structure The file structure is well thought out and allows for easy customization and DRY development practices. 17
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 18
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. 19
Use the Template Hierarchy Use the Template Hierarchy chart to see what files need to be edited or created. 20
Page page.php The page template displays page content content-page.php as well as comments, comments.php if enabled. Page 21
Single Post single.php The single post template displays post content.php content as well as comments.php comments. Single post 22
The Blog Index index.php By default the “Posts” index is typically the content.php content-none.php landing page for WordPress sites. Blog index 23
Archives archive.php By default, all archives (lists of content-[post-type].php content-none.php posts) except the Blog index are Archives: handled by Category Tag archive.php. Author Day / Month / Year Custom Post Type Index Taxonomy Term Index 24
Search Results search.php Search Results are displayed in a default content-search.php content-none.php loop using their own search.php template. Search results 25
Semantic Structure Main semantic #page .site structure. #masthead .site-header It is featured on all template pages in the #primary .site-main #secondary .widget-area (Optional) theme. Each element has an ID and minimum one #colophon .site-footer class . 26
Semantic Structure: #masthead header.php <header> #masthead .site-header <div> .site-branding <h1> .site-title <p> .site-description <nav> #site-navigation .main-navigation <button> .menu-toggle (for mobile screen) <div> .menu <ul> .nav-menu 27
Semantic Structure: #primary Base template <main> #primary .content-area files: index.php, <article> #post-[ID] .[post-classes] single.php, <header> .entry-header archive.php, -title + post meta (date, author) etc. <div> .entry-content -content / excerpt + post paging navigation + <footer> .entry-footer content.php, -post meta (categories, tags, edit link) content-page.php, etc. <nav> .navigation .post-navigation <div> #comments .comments-area 28
Semantic Structure: #secondary sidebar.php <aside> #secondary .widget-area <section> #[widget-name-ID] .widget .[widget-type] <h2> .widget-title <ul> <section> #[widget-name-ID] .widget .[widget-type] <h2> .widget-title <ul> 29
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. 30
Set the content width 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
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… 32
Custom header Place the sample code from /inc/custom-header.php into header.php or wherever you wish to display the header image. 33
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/ 34
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. 35
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' ) 36
Block Editor Resources LinkedIn Learning Tutorial: WordPress Content Blocks: Working with Themes Official Documentation: Block Editor Handbook: Theme Support 37
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: 38
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 . 39
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. 40
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. 41
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. 42
Single post Index/Archive 43
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. 44
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. 45
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. 46
Recommend
More recommend
