Shiba

Adventures in WordPress

You are here: Home / WordPress Design / Use WordPress Child Themes to Create Static Styles

Use WordPress Child Themes to Create Static Styles

by Leave a Comment

You can include new CSS styles to your WordPress child theme by just adding them to your new style.css file. For example, in the blog below, there is a bio section at the top with a profile picture.

We created this bio section by entering the following code into a Text widget, and placing that Text widget into the header widget area within the parent Shiba WordPress theme.


<div id="bio-picture">
<img src="bio1.jpg" width="150" height="168">
</div>

I was born at DAZ Studio. They created me with utmost care and that is
why I am the hottie that you see today. My interests include posing, trying
out cute outfits, and more posing.

Bio section for my WordPress blog using a Text widget.

You can center the bio picture by just adding a new bio-picture style to your style.css file. Copy the code below and add it after the @import url statement in your style.css file.

style.css

#bio-picture {
	margin-top:10px;
	margin-bottom:10px;
	width:150px;
	margin-left:auto;
	margin-right:auto;
}

width:150px; defines the width of the picture. Then the margin-left and margin-right statements center the picture.

Screen-shot of my WordPress blog bio after centering the bio picture.

Alternatively, you can just float the bio-picture to the left and let the text wrap around it.

style.css

#bio-picture {
	margin: 10px;
	float:left;
}

Screen-shot of my WordPress blog bio after floating the bio picture to the left.

I can update my parent theme with new images, and new colors, and the bio-picture style that I have defined in my child theme easily transfers over with no additional effort from me.

Scree-shot of my blog after a parent theme update. The child-theme modifications get transferred seamlessly.

You can define as many new static styles as you want. You can also override existing styles from the parent theme. Just make sure that you define all of your styles after the @import url statement in your style.css file.

For example, I could redefine the blog content area by removing its borders, and making it expand out to fill all the available space.

#content {
	border: none;

	width:730px;
	padding: 0px 10px 0px 10px;

}



Redefine the blog content area by removing its borders, and making it expand out to fill all the available space.

Using static design styles in your WordPress child themes is a fun first step in learning web design techniques. Using static styles in this way, will allow you to personalize your blog without any need for PHP knowledge. Once you are comfortable with CSS, you can start learning PHP and do even more by creating dynamic styles within your WordPress child theme.