Modifying WordPress Themes Code: Some Basics of Slanging HTML, CSS and PHP Within WordPress

by on September 2, 2015

Modifying WordPress Themes Code

Modifying WordPress Themes Code: Some Basics of Slanging HTML, CSS and PHP Within WordPress

  •  
  •  
  •  
  •  

< Back to Chapter 3 – When to Use Theme Options and When to Code

WordPress Development for Noobs is a fun and exciting course that you can take online how to build your own WordPress sites. I create value every day as a WordPress developer in Minneapolis, and for a number of years, I have thought WordPress is a perfect web design solution for small- to medium-sized clients who need a website, or larger clients whose websites are built around articles. (Every company should now be positioning themselves as a media company as content marketing has blown up, and most need some of it to thrive online.) This article will go over the first steps of modifying WordPress themes code, as well as some basics of slanging HTML and CSS within a WordPress theme.

What you will learn in this article:

  • What are the main templates I’ll need to start editing when I want to make changes my theme doesn’t allow? Here are a couple examples of key changes you might want to make. Skip to It Daddy-O
  • A refresher on HTML and CSS, some hints for designing in browser, and a big shot of adrenaline for your coding self-esteem. Get to It, Sugar
  • Don’t be shy of PHP. Here are some sure-fire ways to adventure safely on the high seas of WordPress loops and the key concepts of starting with WordPress PHP. Examples of how you might use this. Come on and Give It to Me

What are the main templates I’ll need to start editing when I want to make changes my theme doesn’t allow? Here are a couple examples of key changes you might want to make.

If you’ve exhausted your theme options, don’t despair! There are a couple key templates you’ll want to edit. In the last chapter, we discussed how to edit the key files after you exhaust theme options. But let’s dive into why you’d want to edit header.php, footer.php or other files.

small-blue-legoIf you want to make a change to the top areas of your website that your theme doesn’t allow, likely you’ll be making the change in header.php:

Before you get started, be sure to duplicate the theme folder and create a “child theme” folder and copy the files you are going to change into it based on the instructions here in a previous chapter.

For the sake of keeping certain things consistent across a whole website and not having to make a change 10 – 20 times or more, editing header.php will make changes site-wide. Usually it’s reserved for things like the logo, the menu and other elements at the top of the site. So, for instance, if we wanted to add the phone number for the company to the top of the site, but the theme didn’t have an option for this, I might go into the header.php file (under the right-side menu “Appearance > Editor” or in the site files under ‘wp-content/themes/theme-name/’) and edit the code there. Add it where it would make sense, perhaps before both the logo and the menu.

The HTML:

<div><span class="phone-span">Questions? Call us at:<span class="phone-number">1(800)-555-5555</span></span></div>

 

The CSS:

.phone-span {display: inline-block; float: right; color: #333;}
.phone-number {font-size: 1.3em; clear: both;}

This is just an example. Likely if you’re reading this series all the way through you’re already somewhat familiar with code, but if you’re just referencing this to do one particular thing, maybe you need a bit of understanding of how HTML and CSS work. HTML is the structure, and CSS is the styling element in this instance. You will also encounter PHP while editing your WordPress site, but let’s not worry too much about that for the moment. The idea here is not to get too intimidated at this point and just avoid editing the PHP that currently exists in your theme. WordPress PHP is generally fairly simple and there is so much documentation about how to make changes effectively via the codex and WordPress forums that if you have the attitude that you’re ready to learn, and you know that it may take some time, you’ll be pleased at how much progress you can make relatively quickly with a little bit of savvy Googling.

small-blue-legoThe WordPress loop calls in content from the admin for easy content editing, and the structure of the page outside of this is made in templates like page.php. Make structural changes in these templates so people editing content don’t have to worry about messing up the structure of the site.

For the time being, let’s look at another change you might make as you dive into code. Once again, since we’re talking about modifying a theme, make sure your theme doesn’t have an option for this already. I often like to add a call-to-action section to the inner pages of the websites I’m working on. So for many of them, this template, the “guts” (not the header or the footer), of this inner page is editable through the template page.php. Your WordPress site might be using something more custom like right-sidebar.php or page-content.php, but you can often tell by right clicking on the page you want to edit and checking the “body class.” Go to the tag <body> and if your theme is using the WordPress loop for displaying the body classes, there would be something that tells you what PHP template you can edit to change that page. It might say something like inner-page-php as a class and then you’d know that the template you’d need to edit would be inner-page.php.

The template structure often wraps the WordPress loop.

 

<?php the_content() ?>

The WordPress loop in a template is where the content that you enter into the WYSIWYG (or “what you see is what you get”) editor will show up within the template. Using that area is great for things that will change from page to page, but things you want to add to every page should be done within the template. Also for the sake of making the site easy to edit and not easy to break, it’s important to put wrappers, divs and other structural elements outside of the WYSIWYG. Otherwise why use a content management system if a client needs to be afraid of breaking their site by editing their content? In a couple chapters we’ll discuss how to add multiple areas a client could edit in the WordPress admin and making them show up in a template. But, back to the challenge at hand: adding a section below the content on your page template. small-blue-legoHere’s how you would add a call-to-action section to your main inner page template.   So let’s say we’re in page.php, which is the default page template usage in WordPress. You’d add a div (a div is an HTML element that is used to block out different elements on a page) after the content and any wrapper divs (a wrapper div might be a div element that is used to contain a block, or span the full width of a page) existed to encapsulate the content, like so:

<div class="full-width-cta-wrap"> 
<h3>Like what you see here?</h3>
<strong>Contact us to get started</strong>
<a class="big-orange-button" href="#contact_form">Let's Work Together</a>
</div>

 

Yep! You need to style that in your style.css file, too! Here’s an example:

.full-width-cta-wrap {
	width: 100%;
	display: block;
	clear: both;
	padding: 50px 0;
	text-align: center;
	background-color: #01404f;
	margin: 40px 0;
}

.full-width-cta-wrap h3 {
	color: white;
}

.full-width-cta-wrap strong {
	color: white;
	clear:both;
	display: block
}

.big-orange-button {
	clear: both;
	padding: 20px 50px;
	margin: 20px 0;
	border-radius: 5px;
	background-color: #e88400;
	color: white;
}

.big-orange-button:hover {
	background-color: #c16f02;
}

Let me show you how that would look right here on this site:

Like what you see here?

Contact us to get started
Let’s work together

I usually like to make this section full-width, so at the bottom of the template I’d make sure it was outside the div of the content wrapper (here it’s inside for efficiency). Your fonts might look different, of course, as your site is likely loading different ones. One other key change you’d make is, you’d want to put your contact page link in the href=”” section. Perhaps href=”/contact”.

 

A refresher on HTML and CSS, some hints for designing in browser, and a big shot of adrenaline for your coding self-esteem.

small-blue-legoHTML and CSS take time to learn, but here are some quick tips if you’re just getting started:

The official definition for HTML is: “HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language.” HTML is the standard for setting up the structure of web pages and often languages are used to generate HTML, but a lot of what you see on the web is rendered in HTML. For instance, in WordPress, PHP allows you to offer an editor up to the person using the website, and the content they enter is stored in a database and populated in the template on the front-end. Understanding this will help you wrap your mind around editing WordPress templates efficiently.

Similarly, JavaScript or Jquery elements are added and referenced within many WordPress templates, and many web pages in general to create movement, to allow for dynamically functioning elements in a more robust way than simple CSS and HTML animations and transitions.

If you haven’t yet, you might want to set up a basic HTML page in your code editor, (I prefer Sublime Text) and try out a couple of things to get started. For the sake of simplicity, let’s start by adding a red heading and a blue paragraph.

small-blue-legoHow to create a basic HTML document:

 

 
<!DOCTYPE html>
</html>
<head>
<style>
h1 {color: red}
p {color: blue;}

</style>
</head>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

small-blue-legoHow to create a basic HTML document that has two boxes with images and text in them.

So add that to your document, and then view the document in a browser, to see your first bit of code come to life. Try entering this below into your document, and you can see you’ll have two blocks, each with a placeholder image and text in them.

 


<!DOCTYPE html>
</html>
<head>
<style>
h1 {color: red}
p {color: blue;}
.boxy {display: inline-block; width: 44%; margin: 1%; padding: 2%; float: left;}
.lefty {background-color: #efefef;}
.righty {background-color: #efefef;}
.boxy img {width: 100%;}
</style>
</head>
<html>
<body>
<h1>My First Heading</h1>
<div class="lefty boxy"><img src="https://lorempixel.com/g/400/200/"><p>This is my left div</p></div>
<div class="righty boxy"><img src="https://lorempixel.com/g/400/200/"><p>This is my right div</p></div>

</body>
</html>

And that should look something like this when you load it in a browser:

Example HTML when editing code for the first time, WordPress Develoment for Noobs

With the process of experimentation and extensive Googling, you’ll find more ways to manipulate the items and code on the page. It’s nice to take a basic design and try to duplicate it with code.

small-blue-legoYou’ll want to keep practicing with these elements, coding some basic websites and familiarizing yourself with HTML and CSS further:

If you are not super familiar with these elements, it’s important to try to create some (at least simple) web pages in this format before you’re going to be able to progress much further in this course. Here are some basic templates you could try your hand with: Open Source Web Design. Perhaps by looking at the way these are put together you’ll be able to improve. I found that the best way to test out my skills was to try to make a portfolio site to showcase my skills as soon as I was able. This put me up against challenges I wanted to implement and sometimes didn’t know how.

small-blue-legoThe more speed bumps you get over, the more you set yourself apart from your non-coding compadres, use the tension between you and what you don’t know to drive you, and get excited at small victories:

This tension between what we know and don’t know helps us grow only if only if we have the right attitude. That attitude means understanding it will be a journey, and we’re only at the beginning. If we’re committed to this, then the more ‘speed bumps’ in the learning of coding we get over, the more we set ourselves apart from those who can’t code. We expand our functional knowledge to be able to be more useful to people. When we are able to create a WordPress site that a client could edit easily without knowing code, the core value is that of helping businesses thrive. This excites me, and I hope it serves as stimulation to help drive you further into learning this valuable skill that you can use to help create value for your clients as they serve their customers and make a living, but you can also use to make a living for yourself.

Don’t be shy of PHP. Here are some sure-fire ways to adventure safely on the high seas of WordPress loops and the key concepts of starting with WordPress PHP. Here are examples of how you might use this.

small-blue-legoThe key elements of WordPress PHP and how to kickstart your work with WordPress templates:

Perhaps you’ve familiarized yourself with HTML and CSS, and you’re simply looking to get on board with WordPress and WordPress PHP. Some key elements of WordPress PHP you’ll want to familiarize yourself with are:

The main loop: this brings in the content from the post or page and into the template. You can have 10 pages use the same template structure, for instance, and only the content would change out.

 
<?php the_content() ?>


On a page or post template you'd likely want to get the header with this code snippet:

 
<?php get_header(); ?>

Also, to get the footer, you could use this snippet:

 
<?php get_footer(); ?>

To get the default sidebar (anything you put into sidebar.php) use this:

<?php get_sidebar(); ?>


This is an example of calling the blog name within a "Heading 1" tag (H1):
<h1><?php bloginfo('name'); ?></h1>

One of the best things about WordPress is its friendliness with article-type sites or blogs. This is how you’d display a list of posts on an index page like index.php. As you can see here, there is a bit of HTML mixed into the PHP to provide a little structure around each post.

<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php endif(); ?>

If you want to display a list of posts on a non-index page (like page.php or home-page.php) you’d use a more custom loop, such as the one below. Here each post is in a <li> tag, or List Item. You can change the HTML and the PHP will still function the same as long as it stays intact.


<ul>
<?php
global $post;
$args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 1 );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : 
  setup_postdata( $post ); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach;
wp_reset_postdata(); ?>
</ul>

This is a very basic listing to get you started. We’ll talk through further application of this type of loop once we discuss a basic application. So now that we have PHP and HTML, all that we would need is to add some CSS to style the <li> and the post. Although we were putting CSS in the header for the experimentation above, we’d want to add this CSS to the stylesheet, either style.css or another stylesheet you’ve defined in your header, or more ideally in your functions.php file.

If you want to use your template for the front page, but only show a couple things differently, you could wrap them in this PHP below, and if under “Settings > Reading” the page is selected, and it is your “home” page, you’ll see the items wrapped in the loop.

<?php if(is_front_page()) : ?> Do something if this is the front page... <?php endif; ?>

Often you’ll want to create a unique page for unique structure. Remember you’ll add this to the header of the template:


<?php
/*
Template Name: City Lander
*/
?>

In the page editor you’ll select the page template. Select it from the template dropdown as shown below, and press “Update.”

Choosing Template WordPress

You can also make a change in a template only for a specific page by wrapping it in the loop below.


<?php if(is_page('about')) :?> Do something on the about page... <?php endif; ?>

 

 

Thanks for reading “WordPress Development for Noobs: Modifying WordPress Themes Code, and Some Basics of Slanging HTML and CSS Within a WordPress Theme!” If you found this useful, please tweet this so others can check it out, too.

Tweet this!

I enjoy providing web design services in Minneapolis and want to be as useful as I possibly can to you. If you need help with WordPress design and development, let me know, and I will try to help. Alternatively, if you have a quick question tweet me at @timbdesignmpls on Twitter. I’m particularly excited about the next chapter in this series, which I should release in the next couple weeks. It will be about creating your first WordPress Theme ‘from scratch.’ Happy trails!

Green LegoNext Tutorial: Creating your first WordPress theme ‘from scratch’


  •  
  •  
  •  
  •  

Download my E-book "WordPress Development for Noobs" for free right now:

  • This field is for validation purposes and should be left unchanged.
Only the best of web design & marketing
  • Haley

    Is this adjusting code from an existing theme you downloaded or developers own code? I thought ‘best practice’ was to utilize child themes when making changes the code in case the original theme developer updates in the future? That also depends on how much you’re changing though :)

    • Tim Brown

      Yes absolutely, this is best practice. :) Thank you for adding that to the conversation.. I might have to add a little sidenote about that on this post. I have that mapped out in a previous chapter of this series: https://timbdesign.com/after-i-freshly-install-wordpress/

      • Haley

        I figure other comment trolls might want to know too hah. I’m late to the party then! I remember I did commit this WordPress crime when I was a newb a couple years ago although I’m not sure what came of it, the site admin was changed to someone else…

  • Pingback: WordPress Themes:When to use theme options when to code()

Ready to get started?

Get a free consultation now