This is Tutorial 4 in a series of Thesis tutorials. In the last tutorial we learnt about Hooks and how to use these hooks. We also added a copyright (©) symbol in the footer section of Thesis. In this tutorial we will explore styling the Footer – removing certain default text and adding some more text.

If you look at the this webpage, you will see that the Footer has 2 sections. The section on the left says “copyright 2011 All Rights Reserved” and the section on the right says “Thesis WordPress Theme” & “Privacy Policy”. In this tutorial you will learn how to do this. The tutorial can be sub-divided into the following sections -

1. Removing the default Thesis Accreditation
2. Displaying Thesis Accreditation, Privacy Policy link and the copyright link -
3. Adding the CSS styles

Note : If you have not read the previous tutorial but have certain amount of PHP and CSS knowledge, you can continue to read on, else I would urge you to read the second tutorial which discusses the concepts of CSS and PHP and the third tutorial which discusses the concepts of HOOKS.

1. Removing the default Thesis Accreditation -

When you install Thesis, the default accreditation is seen in the Footer, which can be annoying and harder to style. So, in this step we remove this default accreditation by using this function in custom_functions.php. Note that whatever is within /* and */ is a comment and is not executed by PHP.


/* FUNCTION TO REMOVE THE DEFAULT LINK TO THESIS IN THE FOOTER */
remove_action('thesis_hook_footer', 'thesis_attribution');


Explanation : The “remove_action” code removes the default accreditation ( stored as “thesis_attribution”) from the Footer (by point to the footer HOOK – “thesis_hook_footer”) where it is located. This line of code needs to added inside custom_functions.php. Please take note that custom_functions.php is a PHP file, and all the PHP commands must be written inside the begin PHP code which is – and the code that denotes the ending of PHP which is – ?> . Just make sure that the php statements that you place inside custom_functions.php are within these codes.

2. Displaying Thesis Accreditation, Privacy Policy link and the copyright link -

If you have bought a developer version of Thesis, there is no need for the accreditation message in the Footer, but if you haven’t then you do need the accreditation message for Thesis in the Footer. So let us write a function which displays this accreditation. We shall also display the link for the Privacy Policy link as well as the copyright text.

Note: If you are reading this after tutorial part 3 then just replace the codes created in the that tutorial with the one below. Also replace the add_action statement with the one below.


/*FUNCTION TO DISPLAY THE DATA IN THE FOOTER*/
function copyright_thesis_ppolicy() {
echo "

";
}


 


/*HOOK TO DISPLAY THE FOOTER DATA WRITTEN IN THE ABOVE FUNCTION*/
add_action('thesis_hook_footer', 'copyright_thesis_ppolicy');


Explanation : First a container (div – custom-footer) is created. Then two more containers (div : footer-copyright & div : footer-thesis-ppolicy) are created which store the copyright and the privacy-policy/thesis accreditation links respectively. These are echoed out i.e. the PHP echo code outputs/displays whatever is within them. The CSS styles to these two container divs (footer-copyright &  footer-thesis-ppolicy) will make it float left and right respectively – as shown in the next section.

add_action will execute/run this function we have written in the Footer area of the web-page

3. Adding the CSS Styles -

Now that we have created the containers, we need to add styles to make one appear on the left and the other on the right. So how do we do this? We need to access the custom.css file inside the custom folder in the Thesis theme and add these statements to it. Note that whatever is written between are comments. These will not be executed and will be ignored when the custom.css file is executed. Instead of creating an explanation paragraph like the above to explain the CSS code to be written, I have included the explanations as comments.


/* == GIVING A TOP MARGIN TO THE FOOTER CONTAINER == */
.custom #footer #custom-footer {
margin-top: 40px;
}
/* == FOOTER COPYRIGHT MESSAGE FLOATING LEFT == */
#footer-copyright {
float: left;
}
/* == FOOTER THESIS AND PRIVACY POLICY MESSAGE FLOATING RIGHT == */
#footer-thesis-ppolicy {
float: right;
}


Hope you enjoyed this tutorial!! If you have any questions at all – feel free to post it in the comments and I’ll get back to you!

Check out the other Thesis tutorials in this website -

Thesis tutorial part 1 : installation of the Thesis theme

Thesis tutorial part 2 : learning about customizing

Thesis tutorial part 3 : HOOKS + custom function (Footer Text)

Thesis : how to change the excerpt size for teasers