Tag Archives: RSS

Making It Easy for You! Feedburner Setup

Feedburner is Google’s free service that makes having attractive RSS feeds a snap. It’s not hard to set up an account, but some of the more important services are hidden away under lots of menu tabs and sidebar menus.

The new article, “Feedburner Setup,” makes it all easy for you. It shows you in five illustrated steps how to set Feedburner up in under five minutes!

Also included is the way to set up RSS email subscriptions and why you should.

The article is catalogued in the Tips section under “Google Services Setup.”

Create an Element and Place It on the Screen

All Thesis users at some time want to put a new element somewhere on the screen — from an announcement, to ads, to a picture of Spot in the header. Wherever you want to put it, Thesis almost certainly will let you!

The basic principle for creating elements and placing them on the screen is almost always the same two-step process:

1. In custom.css create an id for building the element, and maybe an id or class for styling the contents.

2. In custom_functions.php create a function to hold the box contents, then hook it somewhere.

This tutorial will show you the basics of how to create an element, then provides a real-life example of actually creating an element and placing it on the screen.

Creating the container element in custom.css

First, let’s create the element id, which defines the size and other properties of the box that will hold the content. Note that when you create your own class or id, you do not have to put “.custom” in front of it.

/* create a custom element id */
#custom_element {
	/* width for the box */
	width: 50px;
	/* height for the box */
	height: 60px;
	/* background if desired */
	background: #FFFFFF;
	/* border if desired or for testing */
	border: 1px solid #000000;
	/* padding to keep the contents away from the border */
	padding: 1em 1em 1em 1em;
	/* margin outside box to separate if from other elements */
	margin: 0em 0em 0em 0em;
}

Now a few notes on the code:

1. The width and height are obvious. But make sure that it isn’t larger than the area where you want it to go, otherwise it will hang over the edges! For example, if you make a 600 pixel box for a 550 pixel content column, the box will partially cover the sidebar.

2, If you don’t want a background for the element, either delete the property or comment it out. But the background may be useful in testing, so don’t get rid of it too soon! The color code must in in hex — remember the pound sign!

3. I find a border good for testing placement of the element sometimes, so it’s a good idea to just comment it out if you don’t need it right away. Same instructions for the color code as the background.

4. Padding is useful, especially for text, to keep the contents from bumping against the borders of the box. Remember the padding numbering sequence goes clockwise from the top: top, right, bottom, left. The first number is the top, the second the right, and so on. The numbers can be negative, and can be a decimal, for example “-5.5em”. Positive numbers push the element away, and negative numbers pull it toward them. Always remember to add the “em” or “px” units, or it won’t work!

5. The margin will be used for moving the element around the screen. The numbering sequence and number instructions are the same as for padding.

Creating the function and hooking it to a Thesis hook

The function in custom_functions.php declares the element-building id you just made, and within that, your content. It is followed by a statement that attaches the function to a Thesis hook. The code looks like this:

function custom_content_element() {
?>
	<div id="custom_element">
		PUT YOUR CONTENT HERE
	</div>
<?php
}
add_action('THESIS_HOOK_NAME','custom_content_element');

1. This is a standard Thesis function.

2. Note that we’re going to be using HTML, so PHP needs to be turned off with a “?>” statement at the beginning of the function, and turned back on at the end of the function with a “<?php” statement.

3. The “div” associates the content the function will hold with the container id you created in custom.css. Be sure to close it with a “</div>”.

4. The “PUT YOUR CONTENT HERE” is obvious. It’s where the HTML code goes that makes up the contents of the container you created.

5. Now for the hook statement. Put your Thesis hook where it says “THESIS_HOOK_NAME.” Put the name of the function you just created in the second part of the statement. A good visual reference for the hooks is Roberto Gerola’s site.

That’s all there is to it! It is so simple, yet so powerful that it forms the basis of many customizations in Thesis. Now for a simple real-life example of how it works.

An example of creating, placing, and moving a “Subscribe By RSS” element

A reader asked how to move the “Subscribe” tab on his Multilevel Dropdown menu to the right end of the menu bar. Unfortunately, it can’t be done like it can be with the Thesis nav menu. So I suggested building an element to place the “Subscribe by RSS” where he wanted it. That gave me just the right example for this article that I had been planning.

Put the code into custom.css and also create some styling for the words

Following is the code to do this:

/* RSS in nav bar*/
#subscribe_element {
	/* BOX PROPERTIES */
	/* width for the box */
	width: 13.5em;
	/* height for the box */
	height: 1.65em;
	/* background if desired */
	background: #408000;
	/* border if desired or for testing */
	/*border: 1px solid #000000;*/
	/* padding to keep the contents away from the border */
	padding: 0.25em 0em 0em .5em;
	/* margin outside box to separate if from other elements */
	margin: .3em 0em 0em 10em;
	/* we want the box to float to the right */
	float: right;
	/* TEXT STYLING */
	/* align the text to the left */
	text_align: left;
	/* make the words uppercase */
	text-transform: uppercase;
	/* make the font bold*/
	font-weight: bold;
	/* size of font */
	font-size: 1.15em;
	/* height of line */
	line-height: 1.1em; 
	/* font family if desired*/
	font-family: Verdana, Arial, sans-serif;
	/* cursor a little hand */
	cursor: pointer;
	/* font color */
	color: #FFFFFF; 
}

/* make the link white and no underline */
#subscribe_element a:link { color:#FFFFFF; text-decoration:none; }

/* make the font white when visited, no underline*/
#subscribe_element a:visited { color:#FFFFFF; text-decoration:none; }

/* cursor hovering over element */
#subscribe_element a:hover{ color: #FFFFFF; text-decoration: underline; }

This id definition in custom.css is a handy-dandy all-in-one contraption that defines the box as well as the text that will go in it. I could have written two id definitions — one for the box and one for the text — but I am too lazy.

The code is heavily commented, so I won’t go into detail about the more obvious properties and values. Incidentally, the values are the ones used to build the box in the following illustrations.

The padding property determines the space around the letters or objects inside a box. The margin property moves the box around. Refer to the instructions above about how the padding and margin numbers work.

Create a function in custom_functions.php and hook it to the menu bar

This function contains the code that builds the box, and within that box, the code that links words and an image to a feed URL.

/* RSS in nav bar */
function rss_subscribe() {
?>
	<div id="subscribe_element">
		<a href="http://thesisthemetools.com/?feed=rss2">subscribe by rss</a>
		<a href="http://thesisthemetools.com/?feed=rss2"><img src="http://thesisthemetools.com/wp-content/themes/thesis/images/icon-rss.gif"></a>	
	</div>
<?php
}
add_action('thesis_hook_after_header','rss_subscribe');

1. Notice the div with the id of the “subscribe_element” box and text styling in custom.css. It holds all the HTTP in the function, and the id tells the contents how to behave.

2. There are two similar “href” statements: one is for the word “subscribe” and one is for the RSS icon. Both of them use the Thesis Theme Tools rss URL. (Actually, I use Feedburner, but I wanted to keep it simple.)

3. Note that I’m using an image from the Thesis /images folder, not the /custom/images folder. There is also an email icon in there if you need it.

4. The Thesis hook “thesis_hook_after_header” puts the element right into the nav bar.

Illustrations of positioning the element

Figure 1: Initial positioning of the element
Figure 1: Initial positioning of the element

The “thesis_hook_after_header” hook in custom_functions.php and the “float:right” property in custom.css put the box right into the menu bar. Most of the time, the combination will get you close. If not, try another hook or float it to the other direction.

Notice that I have used the “background: #FFFFFF” property to make the box white so I can see it better as I move it around. Other times I use the border property to see the box, according to the color of the background behind it.

Figure 2: Start moving the box around with the margin property
Figure 2: Start moving the box around with the margin property

I started moving the box down using the “top” value in the margin property. It only took .3em to center it on the bar. Then 10em in the “left” value nudged it a little to the right.

Figure 3: Applying padding to get the words centered
Figure 3: Applying padding to get the words centered

Again, it only took a little pushing to get the words centered in the box: .25em from the top and .5em from the left.

Figure 4: The completed RSS Subscribe box
Figure 4: The completed RSS Subscribe box

Once I got it positioned, I removed the white background and Tah-Dah! there’s the subscribe box in all its glory! You can see it in action on my Thesis Demo site.

I hope you have found this article informative and helpful. Please feel free to comment below, or you can send me an email by using the “Contact” button in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!