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

Made with Slides.com