Thesis Hacker » images

Add a date stamp with an icon on your post

Nasty — Wed, 20 May 2009 16:00:24 +0000

Check out the little icon with the date of the post in the top right corner. Here’s how I made it…

The first thing to do is gather the php code that will generate the time of the post…

the_time(’M') gets the month of the date
the_time(’j') gets the day of the date
the_time(’Y') gets the year of the date

For more info on the date code check out this

Next, I made the little icon in photoshop. You can make your own or find free icons by doing a search. I uploaded the image to my custom/images file

Next, I created a function, added the image, wrapped it in div tags, and gave it a class name…

function calendar (){ ?>

}

Next, I added the date code, and gave each one a class name so I could style each one separately in my css

function calendar (){ ?>

Finally, I added the whole thing with a hook…

function calendar (){ ?>

}
add_action(’thesis_hook_before_headline’, ‘calendar’);

Now in my custom.css I can style each part of the date stamp including the day, month, year, and the image…

.custom .calendaricon {float: right;
margin-top: -1em;}
.custom .month {text-transform: uppercase;
font-family: arial;
margin-top: -5.5em;
margin-left: 2.2em;}
.custom .day {font-family: arial;
margin-left: 2.99em;
padding-top: .3em;
padding-bottom: 2.2em;}
.custom .year {font-family: arial;
margin-left: 2.1999em;
margin-top: -2.2em;}

The easiest way to add a “clickable” header image

Nasty — Mon, 18 May 2009 19:16:46 +0000

I wrote an earlier tutorial about showing the easiest way to add a header image HERE. I had a lot of feedback saying that it wasn’t clickable. That’s absolutely correct because it isn’t. That tutorial shows how to add a header image and that’s it. It never said anything about being clickable.

The following tutorial, in my opinion, is the easiest way to add a clickable header image….

First, make sure your image is in your custom.css file…

Next, in your custom_functions.php file, create a simple function and assign it a div tag with a unique name so you can style the header area in your custom.css…

function myheader() {?>

}

Next, add the image to the function with the complete file path to the image and give it a class name so you can style the image size in your custom.css…

function myheader() {?>

}

Next, wrap the image with the link to where you want the header image to click to…

function myheader() {?>

}

Finally, remove the default header and replace it with your new one…

function myheader() {?

>/div>
}
remove_action(’thesis_hook_header’,'thesis_default_header’);
add_action(’thesis_hook_header’,'myheader’);

Place a row of ads on your page

Nasty — Thu, 07 May 2009 19:17:11 +0000

This is cool and simple way of placing as many ads as you want on your site…

First thing is to upload your ads into the custom/images folder on your server

The ads in this example are 125 x 125 which is pretty typical

Next, create a simple function in your custom_functions.php to add the ads, put div tags for the ads, and give it a class name…

function ad(){?>

}

Next, add an unordered list of the ads your going to use between the two div tags and include the path to the image. Your path may be different than the example below…

function ad(){?>

}

I decided to put them right under the header so I placed them with the appropriate hook. Here’s how the entire function looks…

function ad(){?>

}
add_action(’thesis_hook_after_header’,'ads’);

Next, add the class to your custom.css and include one for the unordered list of images…

.custom .ads{}
.custom .ads ul li{}

These are the properties and values I used, yours may be different…

.custom .ads{padding: 1em; width: 94em; height: 10em;}
.custom .ads ul li{display: inline; margin-right: 1em;}

This is a really simple, fast, and effective way of placing ads on your site. Remember you can add as many ads as you want. you can also place them vertically, or in the sidebar, in the footer, in the header, etc. The possibilities are endless.

The absolute easiest way to add your own header image

Nasty — Mon, 04 May 2009 16:58:15 +0000

A lot of people read this and said “It’s not clickable”. And they’re right. This tutorial is to show you how to simply add your own custom image to your header area. It says nothing about making it clickable. I wrote another tutorial on a simple way to make your own custom “clickable” header image. Click here to read the entire tutorial.

I wrote a tutorial about 6 months ago showing how to add a custom image to the header. Since then, new Thesis versions and upgrades have been released. Functions, hooks, and css selectors have been changed. The latest version of Thesis is so much more streamlined than it was 6 months ago. The older tutorial still works fine, but it is overkill.

Here’s the easiest way to insert your own custom header image…

First, get rid of the default header by putting this in your custom_functions.php file…

remove_action ( ‘thesis_hook_header’,'thesis_default_header’);

Next, make sure your new header image is in the correct folder…

Next, in your custom.css add this code…

.custom #header {background: url(images/your header image.jpg) no-repeat; height: Xem; width: Xem;}

Change the X to whatever number gives you the desired effect

And that, my friends, is it..

Really easy way to have random rotating images

Nasty — Mon, 27 Apr 2009 14:20:38 +0000

You can have random rotating images in your multimedia box, feature box, widgets, or if you really want to have freedom, you can learn how to make your own custom multimedia box and place them in it.

We’re going to rotate the images with a little php code. In order to do this we need to first prepare the images to be rotated by renaming them. Get all the images to be rotated and rename them with numbers. This works with png, jpg, gif, tiff, etc. For example…

image1.png
image2.png
image3.png

image-1.png
image-2.png
image-3.png

1.png
2.png
3.png

You get the idea? Get all the images you want rotated in a group, rename them with numbers starting with 1, increment by 1, and proceed in order to the total number of images in the group

Upload all the images to the proper directory

Let’s say, for example, you uploaded the images to a folder named “random”. You are using the image-n.png format where n equals the number of the image. Here’s the path that we’ll use for this example…

Now here is the php code that is going to replace n with a random number from 1 to the total number of images there is, in this case, 3

The whole code comes together like this…

.png" />

That’s about the simplest way to get random rotating images

Add an image with a widget

Nasty — Thu, 23 Apr 2009 03:57:52 +0000

You can easily add images to your sidebars, or wherever you have a widget, with a text widget. Here’s how…

Go to your Dashboard —->Appearance —->Widgets….

Pick where you want to place the image from the drop down list…

Next, from the available widgets column go to the text widget and click the “add” button…

Next, open the widget…

Now you can simply type your html code in the box provided. Here’s an example of the code you could input. Obviously you would have to adjust the image path to where you have your image. You can give your image a class name so you can style it in your custom.css

After you’re done, make sure you hit the “save changes” button!

Add avatar to wordpress default

Nasty — Thu, 19 Mar 2009 03:13:52 +0000

You can add your own image to the default list of avatars listed in Dashboard —-> Settings —-> Discussion….

I came across this code and it works perfectly. Add the following code to your custom_functions.php file…

/*add avatar to wordpress default list*/
add_filter( ‘avatar_defaults’, ‘newgravatar’ );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo(’template_directory’) . ‘/images/name-your-gravatar-image.jpg’;
$avatar_defaults[$myavatar] = “administrator”;
return $avatar_defaults;
}

The add_filter function says that we’ll be editing the avatar_defaults array using our custom function “newgravatar”

The newgravatar function details the location and title of our additional gravatar option

$myavatar = get_bloginfo(’template_directory’) . ‘/images/name-your-gravatar-image.jpg’; points to the new gravatar in the images folder of the template directory

The line after that designates the name that will be displayed next to the image dashboard options. I just happened to name mine administrator, you can name it whatever you want

The third line sends back the results to the avatar_defaults array to be included in the theme

Lightbox 2 plugin

Nasty — Wed, 18 Feb 2009 04:14:20 +0000

This is a visually cool plugin. This plugin works great if your using thumbnail images or if you want to emphasize an image through a link. Click on the image below to see it in action…

Go here to download and install the plugin

Add the same image to single posts only

Nasty — Wed, 28 Jan 2009 02:26:20 +0000

To see how to add the same image to all posts check out this tutorial. You can do the same thing except make the image appear on single posts only. When you click on a category item all the posts that you declared in your settings will appear. When you click on one of the titles of the post it will take you to the single post. This is where your image will appear.

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

/*image on single post*/
function name_your_function() {
if (is_single())
echo ‘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

Add the same image to every post

Nasty — Wed, 28 Jan 2009 02:21:34 +0000

You can put an image on every post without having to insert it everytime you write a new post. You can do it with a function and hook…

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

/*image on every post*/
function name_your_function() {
echo ‘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