If you want to create a brand new page and have it be your homepage, create a page and publish it. Then go to Dashboard—>Settings—>Reading…

From here…

If you pick your latest posts to display, you’ll have to change the features and teasers to what you want it to be

If you pick a static page, you have the choice to chose any page that you have created already

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 (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images /calendar.png" />’; ?>
</div>
<?
}

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 (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images/calendar.png" />’; ?>
<div class="month"><? the_time(’M') ?></div>
<div class="day"><? the_time(’j') ?></div>
<div class="year"><? the_time(’Y') ?></div>
</div>

Finally, I added the whole thing with a hook…

function calendar (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images/calendar.png" />’; ?>
<div class="month"><? the_time(’M') ?></div>
<div class="day"><? the_time(’j') ?></div>
<div class="year"><? the_time(’Y') ?></div>
</div>
<?
}
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 first thing you want to do is assign a unique name to the drop cap class and put it in your custom.css. I named mine simply “dropcap”…

.custom .dropcap {}

Next, figure out where you want to place the drop cap and insert the following tags with the unique class name…

<span class=”dropcap”> </span>

For example, I wanted to put a drop cap at the beginning of the opening paragraph of this post..

<span class=”dropcap”> T </span>he letter “T” that begins this sentence is an example of a drop cap. This was made using the Arial font. You can make a class for the drop cap and use it over and over again on any post or page on you site. Here’s a really simple way to create your own individual drop cap.

Now in my custom.css I add some styles to the drop cap to make it look like the way I want…

.custom .dropcap {
color: blue;
float: left;
font-size: 4.8em;
margin: .3em .2em .1em 0;
}

You can pick and chose how you want your own drop cap to look with your own styles

Now you can place this in any post or page. When you’re writing or editing a post or page, make sure you’re in the html editor…

and simply apply the tags from the example above and wrap them around whatever letter you want to do it to

You can highlight anything from individual words, to sentences, to entire paragraphs. First thing you’re going to do is figure out a class name. This name will be used over and over again to put the highlight anywhere in any post or page

I named mine “my-highlight”

Add the name to your custom.css and chose a color you want for the background

.custom .my-highlight {background: #fefdaa ;}

Now, when you write a post or page and you want to insert the highlight anywhere you want make sure you’re in the html editor…

Pick where you want the highlight to start and type in this with the name you gave the class for the highlight…

<span class=”my-highlight”>

Where you want the highlight to stop just add this…

</span>

For example I want to add a highlight to this sentence you would do it like this…

Lorem ipsum dolor sit amet, <span class=”my-highlight”>consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</span> ut laoreet dolore magna aliquam erat

Now it doesn’t matter what post or page you’re writing because you have the selector in your custom.css so all you have to do is call it with the class name you gave it.

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(){?>
<div class="ads">
</div>
<?
}

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(){?>
<div class="ads">
<ul >
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad1.png"></li>
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad2.png"></li>
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad3.png"></li>
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad4.png"></li>
</ul>
</div>
<?
}

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(){?>
<div class="ads">
<ul >
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad1.png"></li>
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad2.png"></li>
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad3.png"></li>
<li><img src="http://www.mysite.com/wp-content/themes/thesis/custom/images/ad4.png"></li>
</ul>
</div>
<?
}
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 key to this is to use the Widget Logic plugin.  You can get it HERE

Follow the download and installation instructions and then activate the plugin

Now, anytime you open a widget to edit it, you will see the widget logic plugin running….

In the area labeled “widget logic” is where you’re going to insert wp conditional tags to tell the widget where to appear

A complete list of wp conditional tags can be found HERE

Say you want your widget to appear only on a page you named “recipes”. First, make sure you have created the page and published it

Next, in the widget logic box you type this code…

is_page(’recipes’)

You can add as many pages as you want. Using the above example say you want that same widget to appear on a page you created named “directions”. You would simply add the next page separated with “pipes”…

is_page(’recipes’) || is_page(’directions’)

Try this technique…

First thing I did is made an image in photoshop. Use any graphic program you want. It’s 1050 px wide X 100 px tall. I uploaded it to my server and placed it in the custom/images folder. This is what it looks like. It’s been shrunken down to fit within this blog post….

Shadow.png:

Next, put the image onto the background by placing the following code in the custom.css file and uploading it to your server. You can move the image from left to right with the first % value. Adjust it to create your desired effect.

body.custom {background: url(images/shadow.png) repeat-y scroll 50% 0 ;}

And that’s it!

Usually when you put a page in the nav bar, the title that you originally created for the page is the same as what will appear in the nav bar. Check out the nav bar on this site and click on “archive”. Notice how the page title says “Check out all my older stuff…”. Here’s the simple way to make this happen.

First, go to Dashboard —->Links —-> Link categories…

Create a link category. I named mine “navigation menu”. This is simply going to be a holding area for all the links I want in my nav menu.

Next, create a page and publish it. View the page and copy it’s URL….

Next we’re going to put this new page into the “holding area” called navigation menu…

Go to Dashboard —–>Links —->Add New….

When your here just fill in the other options to whatever gives you the effect your looking for

Next we’re going to add this page to the nav bar…

Go to Dashboard —->Appearance —->Thesis Options…

From the drop down list pick the category that you put the links you want to put in the nav bar, in my case it was navigation menu

Hit the save button and check it out!

Go to Dashboard —->Appearance —->Thesis Options…

These are all the pages in my site. Every time I create a page it automatically gets updated into this list. Now it’s just a simple matter of checking which pages I want in the nav menu. The title I created for the page is the title of the page in this list and will be what appears in my nav bar. To change the title so it’s different than what will appear in the nav bar, check out this tutorial.

Go to Dashboard —-> Appearance —->Design Options…

Type whatever you want to display inside the white box, hit the save button