Creating a simple function to add text boxes and other design elements for the beginner can be overwhelming to identify within the system of Thesis. The flexibility of creating functions through the custom_functions.php editor and styling through the custom.css editor is the power under-the-hood of the Thesis framework.
Before you work with the custom_functions.php editor backup the file or copy and paste you additions to a word document.
A Simple Function Requires Basic Elements:
In blue you can use any name. In red is required for the opening and closing of the PHP. You can add HTML, CSS, or Java Script in-between the php tags.
I added a space between the closing php tag, the space must be removed.
The PHP Opening Tag:
function basic_example() {
?>
The PHP Closing Tag:
< ? <——–No Spaces
}
You would rather style the function though the custom.css editor, however you can style within the php tags.
Insert the follow code within the PHP tags
<div style=”width: 400px; font-family: arial; font-size: 16px; font-weight: bold; color: #2361a1; padding: 12px; border: 3px solid #ccc; margin-bottom: 20px;”>>
Isn’t this a nice custom function?
Add the Hook:
You can add any hook with the following the code.
add_action(‘thesis_hook_before_content’,’basic_example‘);
The final code:
function basic_example() {
?>
<div style=”width: 400px; font-family: arial; font-size: 16px; font-weight: bold; color: #2361a1; padding: 12px; border: 3px solid #ccc; margin-bottom: 20px;”>>
Isn’t this a nice custom function?
< ? <——–REMOVE SPACE
}
add_action(‘thesis_hook_before_content’,’basic_example‘);
Customizing the function within the Custom.CSS File:
To customize the new function in the custom.css editor, the “div” within the php needs to be given a class.
<div class=”example“> Isn’t this a nice custom function? </div>
Within the custom.css editor the target becomes,
.custom .example {
width: 400px;
font-family: arial;
font-size: 16px;
font-weight: bold;
color: #2361a1;
padding: 12px;
border: 3px solid #ccc;
margin-bottom: 20px;
}
The hook can be changed to any hook within Thesis.
This function will show as,
Isn’t this a nice custom function?
