david wolfpaw
WordPress Maintenance at fixupfox.com On the Internet, everyone knows I'm a dog. They/Them/Woof
Building Themes:
A Primer
WordCamp NYC 2018
obm.io/wcnyc2018
Setting Up style.css
Title Text
Text
style.css
/*
Theme Name: WCNYC Workshop Theme
Theme URI: https://fixupfox.com
Author: wolfpaw
Author URI: https://fixupfox.com/
Description: WCNYC 2018 theme building workshop
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentyseventeen
Tags: one-column, two-columns, etc
*/Enqueue Stylesheets
Title Text
Text
functions.php
<?php
// Enqueue Parent and Child Theme Scripts
add_action(
'wp_enqueue_scripts',
'wcnyc_wp_enqueue_scripts'
);
function wcnyc_wp_enqueue_scripts() {
wp_enqueue_style(
'twentyseventeen-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'wcnyc-child-style',
get_stylesheet_directory_uri() . '/style.css'
);
}Modifying the Header
Title Text
Text
header.php
<header id="masthead" class="site-header" role="banner">
<?php get_template_part(
'template-parts/header/header',
'image'
); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php
get_template_part(
'template-parts/navigation/navigation',
'top'
);
?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->Title Text
Text
header.php
<header id="masthead" class="site-header" role="banner">
<?php // get_template_part(
// 'template-parts/header/header',
// 'image'
// ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php
get_template_part(
'template-parts/navigation/navigation',
'top'
);
?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->Add Header Widget Area
Title Text
Text
functions.php
<?php
// Add Header Widget Area
add_action( 'widgets_init', 'wcnyc_widgets_init' );
function wcnyc_widgets_init() {
register_sidebar(
array(
'id' => 'header-widget-area',
'name' => __('Header Widget Area', 'wcnyc'),
'description' => __('Show Header Widgets', 'wcnyc'),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
)
);
}Add Sidebar-header.php
Title Text
Text
sidebar-header.php
<?php if ( is_active_sidebar( 'header-widget-area' ) ) : ?>
<div id="sidebar-header" class="sidebar-header">
<?php dynamic_sidebar( 'header-widget-area' ); ?>
</div>
<?php endif; ?>Sidebar Header Styling
Title Text
Text
style.css
.sidebar-header {
display: grid;
grid-template-columns:
repeat( auto-fit, minmax(250px, 1fr) );
grid-column-gap: 20px;
}Title Text
Text
header.php
</div><!-- .navigation-top -->
<?php endif; ?>
<?php get_sidebar( 'header' ); ?>
</header><!-- #masthead -->Secondary Menu Function
Title Text
Text
functions.php
// Add Header Secondary Menu
add_action( 'after_setup_theme', 'wcnyc_after_setup_theme' );
function wcnyc_after_setup_theme() {
register_nav_menu(
'header_secondary',
__( 'Secondary Header Menu', 'wcnyc' )
);
}Add Header Menu
Title Text
Text
header.php
<?php if ( has_nav_menu( 'header_secondary' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php
wp_nav_menu(
array(
'theme_location' => 'header_secondary',
'container' => 'nav',
'container_class' => 'header-secondary-menu',
'depth' => 1,
)
);
?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
Style Secondary Header
Title Text
Text
style.css
.site-navigation-fixed.navigation-top,
.admin-bar .site-navigation-fixed.navigation-top {
position: relative;
top: 0;
} CUSTOMIZER SETTING & SECTION
Title Text
Text
functions.php
add_action( 'customize_register', 'wcnyc_customize_register' );
function wcnyc_customize_register( WP_Customize_Manager $wp_customize ) {
$wp_customize->add_section(
'section_archives', array(
'title' => __( 'Archives', 'wcnyc' ),
)
);
$wp_customize->add_setting(
'show_excerpts_in_archives', array(
'type' => 'theme_mod',
'transport' => 'refresh',
)
);
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'show_excerpts_in_archives_control',
array(
'label' => __( 'Only show excerpts on archive pages', 'wcnyc' ),
'section' => 'section_archives',
'settings' => 'show_excerpts_in_archives',
'type' => 'checkbox',
)
)
);
}Use Customizer setting
Title Text
Text
content.php
<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content(
sprintf(
__('Continue reading %s', 'wcnyc' ),
get_the_title()
)
);Title Text
Text
content.php
if ( ( is_archive() || is_home() ) &&
get_theme_mod( 'show_excerpts_in_archives' ) ) {
the_excerpt();
} else {
/* translators: %s: Name of current post */
the_content(
sprintf(
__( 'Continue reading %s', 'wcnyc' ),
get_the_title()
)
);
}Gutenberg Support
Title Text
Text
functions.php
// Adds Gutenberg Theme Support
add_action( 'after_setup_theme', 'wcnyc_setup_theme_supported_features' );
function wcnyc_setup_theme_supported_features() {
add_theme_support(
'editor-color-palette', array(
array(
'name' => __('strong magenta', 'wcnyc'),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => __('light grayish magenta', 'wcnyc'),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => __('very light gray', 'wcnyc'),
'slug' => 'very-light-gray',
'color' => '#eee',
),
)
);
}Title Text
Text
functions.php
// Add Gutenberg Wide Image Theme Support
add_theme_support( 'align-wide' );
// Add Gutenberg Block Style Theme Support
add_theme_support( 'wp-block-styles' );Questions?
obm.io/wcnyc2018
@David Wolfpaw
Building a Child Theme in WordPress
By david wolfpaw
Building a Child Theme in WordPress
If you’ve ever wanted to build your own theme for WordPress, this is the session for you. We’re going to start from scratch and work our way up. This tutorial assumes HTML and CSS knowledge, though there is no level of PHP requirement. We’ll go through all of the core files needed for a theme; some supplemental features that can be added; and how themes should be structured for clients, public free release, and sales sites. We’ll also cover some tools that can help with your theme development.
- 1,698
