It just aint worth it…

Do you realize that you have far more flexibility to make your own box in html? When you make a simple box, it is a multimedia box! You can put any type of code in it you want. You can insert images, video, php code, javascript. Anything you put in the Thesis multimedia box or the feature box, you can put into your own custom box!

Don’t get me wrong, the mm box and feature box are cool things to have but if you really want to take your customization to the next level then read on…

Look how limited the feature box is. You can only put it above content or above content and sidebars. Not only that, just to get it working is kind of a pain in the rear. Look at the multimedia box, it seems to be forever stuck in the upper right hand side.

People, look outside the box (pun is intentional) Make your own custom box and put it wherever you want

How do you make your own box? Check out this tutuorial

Now, just to give you an idea of what I’m talking about. I made a simple box and just for the heck of it I placed it in a bunch of places. Check it out…

Now remember, you can make these boxes any way you want. The possibilities are endless. Stretch them any way you want. You can make them wider, smaller, bigger, taller, different colors, different borders, and all the while, inserting your own custom code inside them!

I left the multimedia box in the example to show you how stagnant it is and how dynamic your own custom box can be

Check out the hook map to see where all the hooks are placed

Check it out…

First you want to create the box with a simple function in your custom.functions.php file…

function mymmbox() { ?>
<div class="mymmbox"></div>
<?
}

I gave it a class name of “mymmbox” so that I can style it in my custom.css file. Name it whatever you want

Next I styled it in my custom.css file

.custom .mymmbox {
width: 91em;
height: 20em;
border: 1px solid
margin-left: 2em;
margin-bottom: 2em;
}

Then I decided I wanted to place it under my header so I added it with a hook

function mymmbox() { ?>
<div class="mymmbox"></div>
<?
}
add_action(’thesis_hook_after_header’ , ‘mymmbox’);

So there you have it. A real basic box that you can put anything into. Whatever you want to put in the new box, you place the code between the two <div> tags in the function.

You can now move it around anywhere you want with hooks in your custom.functions.php file, and you can change everything from the color, borders, size, etc, all in your custom.css

In your custom_functions.php file add the following code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Remember, once you make the change, save it, and upload it to your server. Always describe the function and put it between the comment tags /* */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*image on single post*/
function name_your_function() {
if (is_single())
echo ‘<img src=”http://your site/wp-content/themes/thesis/custom/images/your image” class=”name your class here” />’;
}
add_action(’thesis_hook_after_post’ , ‘name_your_function‘);

Name your function whatever you want

Give it a class so that you can style it in your custom.css

You can hang this function before or after a post with this…

thesis_hook_before_post

thesis_hook_after_post

Check out the hook map for placement ideas

In your custom_functions.php file add the following code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Remember, once you make the change, save it, and upload it to your server. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*image on every post*/
function name_your_function() {
echo ‘<img src=”http://your site/wp-content/themes/thesis/custom/images/your image” class=”name your class here” />’;
}
add_action(’thesis_hook_after_post’ , ‘name_your_function‘);

Name your function whatever you want

Give it a class so that you can style it in your custom.css

You can hang this function before or after a post with this…

thesis_hook_before_post

thesis_hook_after_post

Check out the hook map for placement ideas

Make sure your image is in your custom/images folder.

In your custom_functions.php file add the following code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*custom header image*/
function mycustomheader () { ?>
<div id =”headername” ><img src=”<?php bloginfo(’template_directory’) ?>/custom/images/myheader.png” alt=”  ” />
</div>
<?php }
remove_action ( ‘thesis_hook_header’,'thesis_default_header’);
add_action (’thesis_hook_header’, ‘mycustomheader’);

Name your custom function. I used “mycustomheader” just for an example.

Wrap it in a div tag, give it an id or class name whatever you want. That way you can style it in the custom.css with the name of “.headername” or “#headername”.  Name it whatever you want.

Check out the php code in the img src. It makes it a lot easier than having to type the entire path.

You have to “un-hook” the default header first. That’s what the “remove_action” does.

Add your image in your header area with the add_action ‘thesis_hook_header’ and hang your “mycustomheader” on it.