Although WordPress has made it very easy to create a custom WordPress theme, but it still takes time to learn and build it. So I’ve created a Base theme based on the free Basic theme from Themify. I’ve stripped out the framework and the extra functions that you might not need. It includes only the basic styling, responsive design, custom menus, and widgetized sidebar. This Base theme is intended to let you build your custom themes using it as a foundation. The main goal is to save your time and simplify the work flow. It is great for non-coders and quick client works.

Download Base Theme

Base Features

• Simple and easy to extend
• Responsive design
• Basic column grid included
• Animated back to top button
• Custom header and footer navigation
• Custom comment template
• Pagination (page 1, 2, 3, 4.. navigation)
• Localized for translation
• Child theme support

Documentation

Templates

The list below explains all the template files in the theme folder.

• index.php = template used in archive, tag, search pages, etc.
• single.php = template used in single post page
• page.php = template used in static Page
• search.php = template used in search result page
• 404.php = template used in 404 error page
• header.php = header part
• footer.php = footer part
• sidebar.php = sidebar part
• includes/loop.php = the post container part (<article class="post">)
• includes/post-nav.php = next / prev post link (included in single.php)
• includes/pagination.php = pagination used in the index pages (the function is in functions.php)
• comments.php = comment form (note the comment list markup is in functions.php)
• functions.php = contains the theme functions such as: sidebar widget, menu registration, pagination, etc.
• style.css = theme style.css
• media-queries.css = responsive design CSS
• js/respond.js = add media query support for Internet Explorer
• js/theme.script.js = jQuery functions used in the theme

Responsive Videos

There is a filter in functions.php file (themify_add_video_wmode_transparent) to wrap the video embed with <div class="post-video">. This filter only applies to the video embedded via the post content using the video URL method. The .post-video wrapper is required to make the videos responsive. If you are embedding videos manually using the HTML embed code, wrap <div class="post-video"> around the embed code to make it responsive.

Mobile Navigation

The mobile navigation jQuery function is in ‘js/theme.script.js’ file and the styling is in media-queries.css.

Column Grid

The basic column grid (col4-1, col3-1, col2-1) is included in the theme. The .first class is only required in the first column for spacing and clearing purpose.

<div class="col4-1 first"> 4-1 </div>
<div class="col4-1"> 4-1 </div>
<div class="col4-1"> 4-1 </div>
<div class="col4-1"> 4-1 </div> 

<div class="col3-1 first"> 3-1 </div>
<div class="col3-1"> 3-1 </div>
<div class="col3-1"> 3-1 </div>

<div class="col2-1 first"> 2-1 </div>
<div class="col2-1"> 2-1 </div>

<div class="col2-1 first"> 2-1 </div>
<div class="col4-1"> 4-1 </div>
<div class="col4-1"> 4-1 </div>

How to Add More Sidebars

If you need to register more sidebars, simply copy and paste the register_sidebar() function like the sample code below (you need to rename the sidebar name and ID):

	if ( function_exists('register_sidebar') ) {
		register_sidebar(array(
			'name' => 'Sidebar',
			'id' => 'sidebar',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h4 class="widgettitle">',
			'after_title' => '</h4>',
		));
		register_sidebar(array(
			'name' => 'Custom Sidebar',
			'id' => 'custom-sidebar',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h4 class="widgettitle">',
			'after_title' => '</h4>',
		));
	}

Then in your template file (eg. sidebar.php, header.php, footer.php), you need to call in the sidebar:

<?php dynamic_sidebar( 'custom-sidebar' ); ?>

How to Add More Navigations

To add more navigations, copy and paste the code from the register_nav_menus() function.

	if (function_exists('register_nav_menus')) {
		register_nav_menus( array(
			'main-nav' => __( 'Main Navigation', 'themify' ),
			'footer-nav' => __( 'Footer Navigation', 'themify' ),
			'custom-nav' => __( 'Custom Navigation', 'themify' ),
		) );
	}

Then you need to specify where to display custom navigation in the template file. The theme_location parameter should match the location ID in the register_nav_menus() function in the step above. You can change the menu container, menu_id, menu_class to anything as you like.

<?php wp_nav_menu(array('theme_location' => 'custom-nav' , 'fallback_cb' => '' , 'container'  => '' , 'menu_id' => 'custom-nav' , 'menu_class' => 'custom-nav')); ?>

How to Add More Scripts

To add custom Javascripts or stylesheets, you can use the following code in header.php or footer.php:

<script src="<?php echo get_template_directory_uri(); ?>/js/custom_script.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/media-queries.css">

For best practice and to avoid conflicts (in case other plugins are included in the same script), wp_enqueue_script and wp_enqueue_style is recommended to include scripts and stylesheets. You may add the wp_enqueue_script in functions.php file.

// enqueue script
function my_scripts_method() {
	wp_enqueue_script(
		'custom_script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

// enqueue style
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/custom-style.css' );

Other Templates

The Base theme only incudes the basic template files. You may create your own templates for more specific pages. For example, you can create a home.php template to be used specifically on the homepage or category.php for category pages. For more details, read the Template Hierarchy documentation.

100% Free License

It is completely free for any purpose.