Skip to content
This repository was archived by the owner on Jun 19, 2026. It is now read-only.

Home

Jump to bottom
Jose Castaneda edited this page Jul 27, 2016 · 1 revision

Alpha Theme

The alpha theme is a starting point for theme development. It provides a lot of flexibility. You can create a child theme or build upon it on your own. It comes bundled with susy toolkit, CareLib drop-in library, and Theme Hook Alliance support out of the box.

Installation

Prerequisites:

  • git
  • php / composer
  • npm / node / grunt / grunt-cli
  • bower

From a terminal or a command line use the following:

// creates a new folder named my-theme with all the alpha theme files
$ git clone https://github.com/wpsitecare/alpha.git my-theme
// we move to the newly created direcotry
$ cd my-theme
// This install the node dependencies
$ npm install
// Installed the bower dependencies
$ bower install
// Creates all the files
$ grunt build
// Monitors all the files and folders for any changes
$ grunt watch

What you've done so far:

  • created copy of alpha
  • bundled carelib framework
  • bundled theme-hook-alliance hooks
  • bundled susy toolkit

The theme uses the grunt watch method to monitor and see if there are any changes to the files. This is beneficial when working with SASS. Alpha uses susy as a layout helper.

Basic Template load

Alpha uses alpha_framework() in order to load your template. The basic template structure is as follows:

<!DOCTYPE html>
<?phptha_html_before(); ?>
<html <?phplanguage_attributes( 'html' ); ?>>
<head>
<?phptha_head_top(); ?><?phpwp_head(); ?><?phptha_head_bottom(); ?>
</head>
<body <?phpalpha_attr( 'body' ); ?>>
<?phptha_body_top(); ?>
<!-- header.php ends - template-parts/site-header.php begins -->
<?phptha_header_before(); ?>
<header <?phpalpha_attr( 'site-header' ); ?>>
<div <?phpalpha_attr( 'wrap', 'header' ); ?>>
<?phptha_header_top(); ?><?phptha_header_bottom(); ?>
</div><!-- .wrap -->
</header><!-- #header -->
<?phptha_header_after(); ?>
<!-- template-parts/site-header.php ends framework.php begins -->
<?phpget_header(); ?>
<div <?phpalpha_attr( 'site-inner' ); ?>>
<?phptha_content_before(); ?>
<main <?phpalpha_attr( 'content' ); ?>>
<?phptha_content_top(); ?><?phpif ( have_posts() ) : ?><?phptha_content_while_before(); ?><?phpwhile ( have_posts() ) : the_post(); ?><?phptha_entry_before(); ?><?phptha_entry_top(); ?><?phptha_entry_content_before(); ?><?phpalpha_entry_content(); ?><?phptha_entry_content_after(); ?><?phptha_entry_bottom(); ?><?phptha_entry_after(); ?><?phpendwhile; ?><?phptha_content_while_after(); ?><?phpelse : ?><?phpget_template_part( 'template-parts/error' ); ?><?phpendif; ?><?phptha_content_bottom(); ?>
</main><!-- #content -->
<?phptha_content_after(); ?>
<!-- sidebar.php begins if used -->
<?phptha_sidebars_before(); ?>
<aside <?phpalpha_attr( 'sidebar', 'primary' ); ?>>
<?phptha_sidebar_top(); ?>
<span id="sidebar-primary-title" class="screen-reader-text">%sidebar title%</span>
<?php// check for widget goes here ?><?phptha_sidebar_bottom(); ?>
</aside><!-- #sidebar-primary -->
<?phptha_sidebars_after(); ?>
<!-- sidebar.php ends -->
</div><!-- #site-inner -->
<?phpget_footer(); ?>
<!-- framework.php ends - template-parts/site-footer.php begins -->
<?phptha_footer_before(); ?>
<footer <?phpalpha_attr( 'site-footer' ); ?>>
<div <?phpalpha_attr( 'wrap', 'footer' ); ?>>
<?phptha_footer_top(); ?><?phptha_footer_bottom(); ?>
</div><!-- .wrap -->
</footer><!-- .site-footer -->
<?phptha_footer_after(); ?>
<!-- template-parts/site-footer.php ends - footer.php begins -->
<?phptha_body_bottom(); ?><?phpwp_footer(); ?>
</body>
</html>

Alpha uses Theme Hook Allaince hooks for its semantic hooking system. For example if you wanted to hook an action before the opening <header> you would use tha_header_before or if you wanted to run an action after the content but before the sidebar you could use tha_content_after to hook to.

Layouts

Alpha has four built-in layouts.

  • One wide column ( full width )
  • One narrow column
  • Two column with a right widget area
  • Two column with a left widget area

These can be changed by not only the user but via filter as well. For example, if you wanted to force a two column layout with a left widget area, you could use the following:

add_filter( 'alpha_get_theme_layout', 'alpha_force_left_sidebar_layout' );

Or if you wanted a full width layout:

add_filter( 'alpha_get_theme_layout', 'alpha_force_full_width_layout' );

You can add layouts by using the alpha_register_layouts action hook to register more layout options. Say for example you wanted to add a three column layout. You would use:

add_action( 'alpha_register_layouts', function(){
carelib_register_layout( '3c-r', array(
'label' => _x( '3 Columns: Right Sidebars', 'theme layout', 'alpha' ),
'is_post_layout' => true,
'image' => '%s/images/sidebars-on-right.svg',
) );
}, 15 );

Examples

The following are simple examples to give an idea of how Alpha hooks and filters work.

  • Removing sidebars
remove_action( 'tha_content_after', 'alpha_primary_sidebar', 10 );
remove_action( 'tha_footer_before', 'alpha_footer_widgets', 10 );
  • Removing the secondary menu
remove_action( 'tha_header_after', 'alpha_menu_secondary', 10 );
  • Changing the Menu toggle text
add_filter( 'alpha_menu_toggle_text', 'prefix_menu_toggle_text', );
functionprefix_menu_toggle_text( $text ) {
return__( 'Toggle Menu', 'text-domain' );
}
  • Adding additional widget areas
add_action( 'widgets_init', 'prefix_register_extra_sidebar', 10 );
functionprefix_register_extra_sidebar() {
carelib_register_sidebar( array(
'id' => 'template-hero-widget',
'name' => __( 'Hero Template Widgets', 'text-domain' ),
'description' => __( 'A widgeted area which displays only on the Hero page template.', 'text-domain' ),
) );
}
  • Removing featured images
remove_action( 'tha_entry_top', 'alpha_featured_image', 4 );
  • Removing the post/page author
remove_action( 'alpha_entry_header_meta', 'alpha_entry_author', 14 );

Clone this wiki locally