Use WordPress Child Themes to Create Dynamic Styles

Sometimes, you may want to define design styles that are based on certain blog conditions. For example, you may only want to display your bio on your blog homepage, and not on any of the other pages.

There are several ways you can achieve this, including using a dynamic design style.

To define dynamic design styles, you need to create a functions.php file in your child theme directory. Add the following code into your functions.php file –

<?php
	add_action('wp_head', 'childtheme_header_style', 100);


function childtheme_header_style() {

	global $num_header_widgets;
<?
<style type="text/css">
/* Define dynamic styles here */
     #header-widget {  
	<?php
	if (!is_front_page())
		echo "display:none;";

	?>
     }
	 
     #header-border .bottom-border {  
	<?php
	if (!is_front_page()) {
		echo "display:none;";
	}
	?>
     }
</style>
<?php
}

<?

Line 2 – Adds our dynamic style function (childtheme_header_style) into our WordPress blog system so that it gets called every time the WordPress function get_header is executed.

Lines 11-26 – We call the WordPress function is_front_page() to determine if we are on our WordPress blog home page. If not, we suppress our bio from showing by setting display to none. We do the same for its bottom-border decoration.

child-theme10

child-theme9

Suppress our bio from showing by setting display to none.

We can use the same technique to override colors, fonts, and other design elements within our WordPress blog.

Unlike static styles, dynamic styles allow you to change your blog design based on different blog states and conditions. This is achieved by using PHP and making WordPress function calls (e.g. is_front_page).

If you are unfamiliar with CSS or PHP, it is best to start with static styles which allows you to achieve much with CSS alone. Once you are comfortable with CSS, you can start learning PHP and creating dynamic styles.

WordPress Child Themes

There is much more that you can do with child themes. For example, you can override any of the parent theme template files, e.g. (header.php, footer.php, sidebar.php) by creating the same file in your child theme directory.

However, if possible, it is best to leave these template files alone. Updates to the parent theme will frequently include modifications to these template files. If you are using a local copy of it in your child theme, you may have to manually transfer those updates to your local child template files.

Instead of modifying template files, you can frequently achieve the same results by using the widget areas in your parent theme. Just insert new HTML code, plugins, and new functions into those widget areas as necessary.

Widget areas will work seamlessly even after you update your parent theme. For this reason, you want to use a WordPress theme that is widget-ready, and comes with multiple predefined widget areas that you can customize.