Blog Network: SEO Content Writing MathematicsDeveloper DiaryLiving with BipolarPortfolio
  • Content Writing that Counts
  • Do you want more business from search engine traffic?
  • Get Help

WordPress Theme Development for Curious SEO Content Writers

This is not a WordPress SEO tutorial! No. We are talking about the reason why SEO Content Writers should learn WordPress Development. You can really understand form without also understanding function. The structure under your content will determine how that content appears to readers and we want every detail right. 

I will assume that you are familiar enough with WordPress to at least install a WordPress theme. That is where we will start. If you want to practice, let’s just use the default WordPress Twenty Twenty theme. I will be taking screenshots from my local WordPress development server. This is best practice for people who create their own themes. 

Creating a Child WordPress Theme

Three are times that an SEO Content Writer will want to change the look of a theme they have purchased. This will allow us to personalize it and make it look different from others who have the same one. There is a proper way to do this. You need to create a Child Theme. 

The reason why we do this is because theme authors will make updates. This could include important patches for security or to add compatibility for new WordPress features. If we added our customizations directly to the theme we would lose them in an update. Thus, our Child Theme will hold anything we want to add.

When we create a Child Theme the original one is called the Parent Theme. The child will inherit everything from the parent. In that way the Parent Theme acts as a template. Let’s create our child theme

Step One

Create the theme folder. The best practice for WordPress development is to name it theme-child. In this case, we will call it twentytwenty-child. It is important that you also have the Twenty Twenty theme installed. 

Step Two

Add style.css to your theme folder. You will need a text editor for this. I am using VS Code. Add the following at the top of that document. All that is required is theme name and template. The template must match the theme directory name. In this case it is twentytwenty. This is what I added to my Child Theme. 


/*
 Theme Name:   Twenty Twenty Child
 Template: 	twentytwenty
*/

Style.css is where you will add all your new CSS snippets for customization.

Step Three

Create a functions.php document in your child theme directory. Load both your parent and child css themes. Here is the code from digwp. Add the following snippet to your functions file.




// enqueue styles for child theme
// @ https://digwp.com/2016/01/include-styles-child-theme/
function example_enqueue_styles() {
	
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
	
	// enqueue child styles
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');

It should look like this. 

That’s it! Upload your child theme to your WordPress installation and activate it. You can now start making customizations. 

Learn the WordPress Template Hierarchy

I want SEO Content Writers to understand the WordPress template hierarchy. This is actually how your website gets loaded. Take a look at the Twenty Twenty theme. 

You will see some important templates. I want to highlight index.php. Many other templates will inherit the defaults set in index.php if not customized. Our twentytwenty-child theme inherits all these files from the parent theme, but we can add more if we want to in our child theme directory. 

For example, we might want to create a template called front-page.php. This template file determines what we see when we go to our root url. For example, I use this template on Beauty of Mathematics to create that front page which looks different from every other page on my blog.

This a test for front-page.php added to our twentytwenty-child theme. Here is the code for that template. 

This is how it appears on our website.

So we can see that although front-page.php was only added to our Child Theme it still appears on our website the way we wanted.

This means that we can customize things like our archives by creating specific theme templates in our Child Theme. 

Adding Custom CSS to your WordPress Child Theme

Learning CSS is so key to creating a custom looking blog post. We can target CSS classes and id generated by our PHP templates. You will want to use the inspector tool in your browser to identify them. You can usually find this by right clicking on your website.

This tool will allow us to inspect our code.

I have identified the code that generates “This is the front-page.”

We are going to target the class “site-main”

Let’s add the following code to style.css. 

This is how it changes the front page of our website.

And all we did was change the CSS! You can transform any part of your website in this way, You can really differentiate your blog posts by changing up the way your headers look targeting them by class. There is no limit to what you can do to change the way your content looks. 

Summary of WordPress Development for SEO Content Writers

I think it is vital for content writers using WordPress to master these skills. Learning the template hierarchy and CSS allows us to make any theme look personalized. We can even change up our styles per blog post if we like by creating some unique classes in our text to target. 

I know that this isn’t really enough information to start applying these methods. What I hope is that it makes you curious to dig deeper. If you cannot do this yourself, you will have a language to talk to your developers about changes you would like to make. I really hope you go the DIY method though. 

Back to Top