Posted on

Create a WordPress Theme

1. Create new theme
2. Some changes to the CSS style
3. Disable the admin panel
4. Change the footer
5. Adding FontAwesome
Additional Links

1. Create a new theme based on an existing one

Lets take an existing theme and copy the whole theme.
./wp-content/themes/twentyfifteen/ copy to
./wp-content/themes/twentyfifteenplus/

During the following steps all changes are done in files within /wp-content/themes/twentyfifteenplus/.

Now we find it in the admin panel under Appearance > Themes. Let’s activate it and play around.

2. Some changes to the CSS style

Changes only requiring some styling are done in ./style.css.

First we update the name of the theme. This can be found at the top of the stylesheet:

Theme Name: Twenty Fifteen Plus

Adding some part to make the code display more visible.

code {
	padding:3px;
	background-color:#f0f0f0;
}

code:hover {
	background-color:#e0e0e0;
}

3. Disable the Admin Panel for logged in Users

I don’t like the WordPress admin panel on the front page for every logged in user and especially as admin I never use it – instead it offends my eye.

Therefore we create an option in the admin panel to disable it. We create a new section Global in the options page where we can add other general options later one.
Edit the ./inc/customizer.php and add the following in the function function twentyfifteen_customize_register.

/**
 * Option to disable the admin bar for logged in users
 * @since Twenty Fifteen Plus 1.0
 */

$wp_customize->add_setting( 'theme_admin_bar_disable' , array(
		'default'     => 'false',
		'transport'   => 'refresh',
) );
	
$wp_customize->add_section( 'mytheme_section_global' , array(
		'title'      => __( 'Global', 'twentyfifteen' ),
		'priority'   => 10,
) );
	
$wp_customize->add_control(
	new WP_Customize_Control(
		$wp_customize,
		'mytheme_section_global',
		array(
			'label'          => __( 'Disable Admin Bar', 'twentyfifteen' ),
			'section'        => 'mytheme_section_global',
			'settings'       => 'theme_admin_bar_disable',
			'type'           => 'checkbox',
		)
	)
);

And then we can process this theme_admin_bar_disable setting in the file ./functions.php.

/**
 * Remove the admin bar
 * @since Twenty Fiften Plus 1.0
 */
if (get_theme_mod('theme_admin_bar_disable')) {
	add_filter('show_admin_bar', '__return_false');
}

Change the Footer

Of course I highly appreciate the works of the WordPress community but still I want to have my own footer on the webpage. The easiest way is just changing the footer text in the file ./footer.php.

BUT in this case I want to add an option in the admin panel that you can change the footer directly out of the admin pages.

Therefore we first register some additional functions in ./inc/customize.php.

/**
 * Option to change the footer text
 * @since Twenty Fifteen Plus 1.2
 */
	
// add a new section called Footer
$wp_customize->add_section( 'mytheme_section_footer' , array(
    'title'      => __( 'Footer', 'twentyfifteen' ),
    'priority'   => 30,
) );
	
// add a settings variable called footer_text we modify
$wp_customize->add_setting( 'footer_text' , array(
		'default'     => 'Proudly powered by WordPress',
		'transport'   => 'refresh',
) );
	
// add a control in the section where we modify the footer_text
$wp_customize->add_control(
	new WP_Customize_Control(
		$wp_customize,
		'footer_text',
		array(
			'label'          => __( 'Footer Text', 'twentyfifteen' ),
			'section'        => 'mytheme_section_footer',
			'settings'       => 'footer_text',
			'type'           => 'text',
		)
	)
);

And finally we add this new setting in our ./footer.php.

<?php printf(get_theme_mod('footer_text')); ?>

5. Adding FontAwesome to WordPress Theme

Fontawesome offers some great icon fonts which are pretty easy to integrated. The easiest way is by using the CDN and therefore you even do not need to store anything on your server.

An overview of all available icons can be found directly at FontAwesome: FontAwesome Icon List

Icon for a bed
Icon for a heartbeat

Just add this line in your ./header.php in the head section:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

And now you can add icons in your posting:

<i class="fa fa-bed"></i>

Post Title only Index/Archive/Search

The index and search pages look way better (in my opinion) if they show only the title and not the full post itself. This can be simply changed in the ./content.php file and some updates in the ./style.css to fit the layout as well.

Use this part to show the code within the if only for single posts and not on index or search pages:

<?php if ( is_single() ) : ?>
<?php endif; ?>

Additional Info

The file ./genericons/example.html is removed from this theme to cover a XSS security issue.

Links

Reference show_admin_bar
Social Links Menu
Theme Development
Theme Customization API
Creating Options Pages