Home > Online Marketing > How To Build a Website Using WordPress and Thesis Theme Part 2

How To Build a Website Using WordPress and Thesis Theme Part 2

Part two of how to use WordPress and the Thesis Theme to build a website, using Thesis Hooks to add a Clickable-to-Home Header Image.

First, you should know that Thesis introduces a new concept called “Hooks,” which really should have been called “Placements” as they tell the site where to “place” changes that you make.  Also you should know you will only edit two documents, which are in your Custom folder (/wp-content/themes/thesis_17/custom/).  Download these files and edit them with a program such as Crimson Editor.

  • Functions which is really “custom_functions.php”
  • CSS which is really “custom.css”

Functions are code that tell Thesis what you want it to do.  CSS allows you to make style changes to the whole site at one time.  They often work together when making changes.

The good part of this method:  changes you make will not be overwritten when Thesis updates the core system.  The bad part: it’s confusing.  I have picked up a bit of PHP by tinkering with WordPress in the past, but not enough to write my own code.  Mostly I just search online for what I’m trying to do and pick up code that others have written, test it, and see what works.  Even with my method, it is good to still learn some of what you’re doing.

A good place to start in understanding Hooks is with this tutorial.  In essence, Hooks run whatever “functions” you tell them to run, and these are placed in the Functions file.  There are two “actions” you can do to functions: “add” and “remove.”  They look like this:

add_action(‘hook_name’, ‘your_custom_function’);
remove_action(‘hook_name’, ‘your_custom_function’);

To make it even more exciting, Thesis has already added a bunch of default Hooks in order to create the default template.  If you really want to “geek out” you can see the default hooks in Launch.php (wp-content/themes/thesis_17/lib/functions/).

Moving Your Navigation Menu Below the Header Area

Sometimes you need to “remove” something they’ve already done and then “add” what you want it to do.  An example:

By default, your Navigation Menu appears above your Header, containing your site’s Title and Tagline (note the indents below to see what Hooks ‘contain’ other Hooks).   I’m not sure why they did this as I know few websites where you want that to happen…maybe it’s to force you to start learning this stuff?  If you look at this helpful web page, it shows you a diagram of what the Hooks are named and where they are on the Home page.  Here is the same helpful web page with descriptions added to assist you to understand the placements.  You will see what looks like this at the top:

In order to move the Navigation Menu below the Header you want to paste the below in your Functions file:

//move nav menu
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

So what does this mean?

  • When you put // before a line of code, it says ‘ignore these instructions to self’.
    • Also, it is proper “geek-speak” when there are multiple lines of notes-to-self to write it like this: /* text */
  • Remove the default action that places the navigation menu in the Hook (position) ‘thesis_hook_before_header’
  • Add an action that places the navigation menu in the Hook (position) ‘thesis_hook_after_header’

Replace Your Title and Tagline with a Clickable Image Header

Now to get rid of the Title and Tagline, and include them instead in an image file that becomes a Click-to-Home Header.  For this, you want to first design the Header…but how wide to make it?  That depends on what column layout you’ve used and how wide you made the columns.  Use this handy chart to decide the width of your Header image.  Then, place the below into your CSS file:

/* This line sets up our clickable background image based on the site title’s link */
.custom #header #logo a { display: block; height: 100px; width: 817px; background: url(‘http://www.yoursite.com/wp-content/themes/thesis_17/custom/images/yourimagefile.jpg’) no-repeat; outline: none; }
/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
/* This line collapses the vertical space of the tagline so that there isn’t unnecessary white space after the header image */
.custom #header #tagline { height: 0; }
/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }

So what does this mean?

  • Place your image file into the folder /custom/images/ and then adjust the height and width attributes to reflect the actual size of your image.  Then change the URL of your image to reflect the actual file name.
  • We don’t want to use the editable Title & Tagline fields, so we’re throwing them off into the left side of the page where no one will see them.
  • Since we’re not using the Tagline, we’re collapsing extra white space after the Header image.
  • We’re then removing padding from the Header so it fits tight next to the background, content and nav menu.

Replace the Functions and CSS Files on Your Server

Lastly, upload the Functions and CSS files into your Custom folder.  Use an FTP program such as the Filezilla Client.  You can obtain your FTP settings from your hosting provider.  You should see your clickable Header just above the navigation menu.

Share
  1. Anthony
    July 11th, 2011 at 22:21 | #1

    Hi,

    Followed your instruction above to move navigation menu below header. This did not seem to make the desired change. I added the code shown above (pasted from notepad) to the following location on my c-panel;

    /public_html/wp-content/themes/thesis_17/functions.php

    Clearly, I must be doing something incorrect. Any guidance would be greatly appreciated?

    Thanks for your very informative guidelines and great site

    AB

  2. July 14th, 2011 at 15:55 | #2

    There is a file called “custom_functions.php” that you need to be working with not functions.php. That’s probably a good start on the issue. I would have to speak with you to know what else may be the issue.

  1. No trackbacks yet.

CommentLuv badge

Spam Protection by WP-SpamFree