Home

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>
<?php tha_html_before(); ?>
<html <?php language_attributes( 'html' ); ?>>
<head>
<?php tha_head_top(); ?>
<?php wp_head(); ?>
<?php tha_head_bottom(); ?>
</head>
<body <?php alpha_attr( 'body' ); ?>>
	<?php tha_body_top(); ?>
	<!-- header.php ends - template-parts/site-header.php begins -->
	<?php tha_header_before(); ?>
	<header <?php alpha_attr( 'site-header' ); ?>>
		<div <?php alpha_attr( 'wrap', 'header' ); ?>>
			<?php tha_header_top(); ?>
			<?php tha_header_bottom(); ?>
		</div><!-- .wrap -->
	</header><!-- #header -->
	<?php tha_header_after(); ?>
	<!-- template-parts/site-header.php ends framework.php begins -->
	<?php get_header(); ?>
	<div <?php alpha_attr( 'site-inner' ); ?>>
		<?php tha_content_before(); ?>
		<main <?php alpha_attr( 'content' ); ?>>
			<?php tha_content_top(); ?>
			<?php if ( have_posts() ) : ?>
				<?php tha_content_while_before(); ?>
				<?php while ( have_posts() ) : the_post(); ?>
					<?php tha_entry_before(); ?>
					<?php tha_entry_top(); ?>
					<?php tha_entry_content_before(); ?>
					<?php alpha_entry_content(); ?>
					<?php tha_entry_content_after(); ?>
					<?php tha_entry_bottom(); ?>
					<?php tha_entry_after(); ?>
				<?php endwhile; ?>
				<?php tha_content_while_after(); ?>
			<?php else : ?>
				<?php get_template_part( 'template-parts/error' ); ?>
			<?php endif; ?>
			<?php tha_content_bottom(); ?>
		</main><!-- #content -->
		<?php tha_content_after(); ?>
		<!-- sidebar.php begins if used -->
		<?php tha_sidebars_before(); ?>
		<aside <?php alpha_attr( 'sidebar', 'primary' ); ?>>
			<?php tha_sidebar_top(); ?>
			<span id="sidebar-primary-title" class="screen-reader-text">%sidebar title%</span>
			<?php // check for widget goes here ?>
			<?php tha_sidebar_bottom(); ?>
		</aside><!-- #sidebar-primary -->
		<?php tha_sidebars_after(); ?>
		<!-- sidebar.php ends -->
	</div><!-- #site-inner -->
	<?php get_footer(); ?>
	<!-- framework.php ends - template-parts/site-footer.php begins -->
	<?php tha_footer_before(); ?>
	<footer <?php alpha_attr( 'site-footer' ); ?>>
		<div <?php alpha_attr( 'wrap', 'footer' ); ?>>
			<?php tha_footer_top(); ?>
			<?php tha_footer_bottom(); ?>
		</div><!-- .wrap -->
	</footer><!-- .site-footer -->
	<?php tha_footer_after(); ?>
	<!-- template-parts/site-footer.php ends - footer.php begins -->
	<?php tha_body_bottom(); ?>
	<?php wp_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', );
function prefix_menu_toggle_text( $text ) {
	return __( 'Toggle Menu', 'text-domain' );
}

Adding additional widget areas

add_action( 'widgets_init', 'prefix_register_extra_sidebar', 10 );
function prefix_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 );

Provide feedback

Saved searches