Beginner’s guide to using PHP w/ WordPress & Thesis

wordpress tutorial – using PHP with thesis and wordpress

Okay, let’s start with an admission. I don’t really understand PHP. HTML and CSS? Sure, got a pretty good handle on those, but PHP has me baffled. I don’t understand why or how it works, but I do know that it does work. And so I use it.

In fact, I do it all the time. I guess that’s the case with a lot of things. I have no idea how a digital camera works, but it doesn’t keep me from using one.

So I thought I’d take a quick moment to show you how I go about it, and what I *have* come to understand about PHP that allows me to use it, at least to some degree.

The Objectives of this Tutorial

If you spend some time with this tutorial, here’s what I expect you’ll be able to do upon completion:

  1. Understand the kinds of things PHP can be used to accomplish on your WordPress site
  2. Know where to add PHP code on your Thesis/WordPress website
  3. Gaze upon PHP code without fear and loathing
  4. Use PHP to add Facebook & Twitter icons to your website’s footer
  5. Know where to find me if you run into trouble and need some help

Intro: Thesis and PHP

If you’re going to use PHP to tweak your Thesis site, you add the pertinent code to the custom_functions.php file (found by going to the THESIS > CUSTOM FILE EDITOR menu, then choosing that file from the drop down menu at the top of that screen and, finally, hitting the ‘Edit selected file’ button). But first, let’s talk about some of the things you can use PHP to do. I’m positive this list will be fairly limited, and someone with greater PHP skills could add myriad other possibilities, but we work with what we’ve got. :)

  • Add different headers to different pages of your site
  • Add widget areas to different places on your site (see How to create a new widget aread for details)
  • Add Google plus or other icons to your site, in any number of different ways and places (see How to add a Google +1 button for details)
  • Create a custom footer for your site
  • Place additional navigation menus on your site

The list could certainly go on, but you get the idea. Where the custom.css file is typically used to style certain elements (like, add background colors or borders to widget boxes in the sidebar or make your titles bigger and centered, that sort of thing), the custom_functions.php file is used to add functionality to your site or to change the layout of certain elements.

New: Let’s look at some PHP code

Okay, so let’s look at an example and dissect it a bit. This particular code would be used to add a Facebook Share button to your website.

/****************************************************************
   * FB SHARE
****************************************************************/
1 function fb_share() {
2 if (is_single() | is_home()) { ?>
3 <div class="fb_share">
4    <a name="fb_share" type="button_count" share_url="<?php the_permalink() ?>"
5      href="http://www.facebook.com/sharer.php">Share</a>
6    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
7 </div>
8 <?php }
9 }
10 add_action('thesis_hook_post_box_bottom','fb_share');

Okay, so the first thing to note is that the numbers (1-10) don’t belong in the code, I’m just using them to help with the explanations. Now then, you see on line 1 the ‘function fb_share() {‘. That’s simply saying, “I want to do something, and that something is going to be called ‘fb_share’. You could call it anything you like, but I think there are some restrictions to using numbers in your name, so perhaps it’s best to stick with letters. The other character on line 1, the { is like an opening HTML tag, it gets the function started and, as we’ll see below, there has to be a corresponding } to close it off.

Before we go to line 2, let’s jump to line 10 and note towards the end you see ‘fb_share’ again. We’ll go over line 10 in more detail soon, but I wanted you to see that the two items are related. Stay tuned.

Ok, so line 2 starts with ‘if…’. You’re not going to see a line like this in all PHP code snippets. It’s used in situations where conditional logic is needed. That is, if you want whatever you’re adding to appear on only one or some pages/posts, but not others. So this ‘if’ statement is doing just that. In this case, it’s saying “If you are on a single POST page (that’s what this is_single means) or the Blog index page - the page where your blog posts appear, whether that’s your home page or on a page called blog or something else (that’s what the is_home means), go ahead and do/display the following. But if not, kindly act like nothing happened. So for this code, the FB Share button is going to be placed on the blog index page and the single post pages, but not on the other pages (like my about page or my contact page). There is also a { on this line, which is going to begin what is to be included in the ‘if’ statement.

The other thing to note on line 2 is that at the very end there is a ?>. That character combination is like an ‘off’ switch, it turns PHP off so that you can add other code in as well. If you look at lines 3, 4, 5, 6 and 7, that is not PHP code, it’s HTML and javascript. So we’re using PHP to place this other code in a particular way/place.

And speaking of lines 3, 4, 5, 6 and 7, all of that is wrapped up into one big div, so it’s acting as one block of code, essentially, that creates the Facebook share button and count. If you look at the bottom of this post, you’ll see an example of it (since you’re either reading this on a single post page or on my blog index page).

Then on line 8 you’ve got that <? and then php. That combination is like an ‘on’ switch, and is used after a block of code that isn’t PHP (such as HTML) is finished, and you need to turn PHP back on in order to continue or finish the PHP function. Also on line 8 is the character }. Just like an HTML tag has an opening and a closing tag (such as <whatever> and </whatever>), you have to close off PHP commands as well. So that } on line 8 closes the ‘if’ statement, and the } on line 9 closes the whole function.

And all of that effectively completes the function, the only thing left is to define where to place the ‘whatever’ your function is creating. In this case, the ‘whatever’ is a Facebook share button, but as I mentioned above, it could be a header or a footer or a new widget area, even some plain old text or a picture.

That brings us to line 10. That ‘add action’ is how we place the item, how we ‘add’ it to the site. The stuff in the first quotations says WHERE to put it, and the stuff in the second quotations says WHAT to put there. In most cases, the WHAT is going to be the function you just created/defined, so you have to put the function name in the second quotes - in this case, the fb_share. But what about the WHERE? Even though what you see there looks a little complicated - thesis_hook_post_box_bottom - it really isn’t. It’s just how Thesis names its Hooks. Hooks are just places around your website where you can ‘Hang’ different code. Get it? Hang it on a Hook?

So how do you find what hooks are available to use? Super simple. Just check out the Thesis hook list or the visual guide to hooks (click on one of the 3 thumbnail images there to see them). It amy take a little testing to get it right where you want it, but with a little practice, it’s very simple.

Practice: a PHP example

Okay, so that’s maybe a lot to take in, but let’s simplify it with a little practice. Let’s say you just wanted to place a Facebook and Twitter icon in your footer, each of which links to your respective accounts. Here’s how you might go about it.

/********************************************************************************************
ADD FB AND TWITTER ICONS TO MY FOOTER
********************************************************************************************
function icons_in_footer(){ ?>
<div class="footer_social_media">
<a href="http://www.facebook.com/jebdickerson"><img src="http://howtomatter.com/wp-content/uploads/2011/11/facebook.png"></a>
<a href="http://twitter.com/#!/JebDickerson"><img src="http://howtomatter.com/wp-content/uploads/2011/11/twitter.png"></a>
</div>
}
add_action ('thesis_hook_footer', 'icons_in_footer');

Notice after the function, at the end of the first line, I put in ?> to turn PHP off. That’s because everything that follows, everything within the div, is just HTML code that I’m using to create and link the icons. And I’m using PHP to place it in the footer. Make sense?

So if you were going to test this out, you could actually just cut and paste the exact code into your custom_functions.php file (incidentally, when adding code to this file, it’s good practice to simply scroll all the way to the bottom of whatever is already there, hit the return button once or twice, and paste the new code at the end), but then you’d have icons that are in my media library, linked to my FB and twitter accounts. Fine with me :), but probably not what you want. So you’ll need to change the urls next to the ‘href=” on each line, and the urls next to the ‘src=”. The href url is where the visitor will be sent if they click on it, and the src url is the url (the source) of the image itself.

Wrap up

Okay, let’s leave things there. There’s more to teach, more to learn, but this should get you started. If you stuck with me this long, and if I’ve done my job moderately well, you should have a general idea as to what is possible using PHP, know where to go on your Thesis site to insert PHP code, be somewhat less intimidated by the prospect of using PHP, know how to use PHP to insert some social media icons in your footer, and know how to reach me if you get stuck (hint: right here).

Couple of things I should say in closing: First, when tweaking on your custom_functions.php file, it is possible to temporarily break things. That is, if you leave just one tiny character out, or add something that shouldn’t be there, you could bring your site down. However, it’s usually pretty easy to recover/fix, so long as you have access to your virtual private server/host using an FTP client. If you’re not sure what that is, you may want to holler at me before you get too cozy with that file. I can explain how to access it in the event that you break your site so that you can get it back to good quickly.

Second, I’ve tried to make it abundantly clear that I’m not a PHP expert. If you are, and you happen to be reading this, and you notice I’ve said something that isn’t accurate, or explained something that doesn’t make sense, please feel free to leave a comment and correct me…I, too, am always (always!) up for a good lesson. The above represents my understanding of the topic, and it seems to work for me, but I know I’m just scratching the surface, so if you have something to add, don’t hold back.

That’ll do. Cheers…

{ 9 comments… add one }

Leave a Comment

  • Trish March 4, 2012, 2:47 am

    Hi thanks for this easy to understand explanation; I always shy away from PHP but have dabbled a tiny, weeny bit with the CSS. I can find fonts and change sizes etc but that is about the extent of my knowledge. I can maybe change the odd colour….this is good though because I just have no idea about PHP but would love to learn more.

    Thanks

    Trish

    Reply
    • Jeb March 4, 2012, 8:35 am

      Hey Trish, I’m glad you found it useful, and I appreciate you taking the time to comment. Cheers…

      Reply
  • amber April 27, 2012, 10:04 am

    Thank you soooo much for this tutorial! Several times I have begun trying to get my mind around php with very little success. But this tutorial has done the trick! Thank you thank you thank you!

    Reply
    • Jeb May 7, 2012, 6:09 am

      Hi Amber,
      Well I’m glad it helped. And I’m sorry for my late reply, this one got lost in the bustle of life.

      Cheers…

      Reply
  • Jupiter Jim June 14, 2012, 5:49 pm

    Great tutorial with a practical application of how to use PHP for a real world benefit with twitter and FB icons, etc.

    Thanks so much!

    ~ Jupiter Jim

    Reply
    • Jeb June 14, 2012, 6:51 pm

      Well thanks J-Jim, glad you found it helpful. Cheers!

      Reply
  • shashi mehta August 28, 2012, 1:07 am

    hi…….
    Its really supports to me over php, I am new in php,No idea how to make a commplite web site, but still i am here to know all things about web site design,your blog is very helpful for me…

    thanks alot….
    shashi mehta

    Reply
    • Jeb September 2, 2012, 8:08 pm

      Glad to hear it, thanks Shashi…

      Reply
  • luit March 27, 2014, 10:35 am

    Hi Jeb,
    I just had a question about the code above; in the * FB SHARE example, you added the ‘on’ switch <?php at line 8 in order to implement the add_action() php code.
    So isn't <?php also required in the ADD FB AND TWITTER ICONS TO MY FOOTER practice example as well right after ?

    Thanks for the great tutorial.

    Luit

    Reply