Building Themes:

A Primer

php[World] 2018

 

obm.io/phpworld2018

 

@DavidWolfpaw

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?

php[World] Building a Child Theme in WordPress

By David Wolfpaw

php[World] 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.

  • 20
Loading comments...

More from David Wolfpaw