Who is Claire Harbour?
What I’m about, what’s here & how I can help you…
Hello there everyone! I’m Claire Harbour, you may or may not know who I am, 
for those who don’t I’ll tell you a bit about myself. I’m a young teenager from the UK and I’m still in my education. I consider myself to be quite the geek just not your stereotypical shirt wearing, taped glasses one! No, I’m technical! I love to build code for Facebook fan pages, websites and blogs. Another thing I LOVE is social media, I just adore my Twitter and Facebook! I’m very knowledgeable about WordPress,Twitter and Facebook. If you would like to find out more about me or how to get started online then check out my fan page. If your looking for a web designer then I can help! You can contact me with any questions and request my portfolio on the contact page!
How to Add Page Specific Custom Content Boxes in Thesis
Adding page specific full width custom content boxes in Thesis
Hey everyone,
I design with Thesis a lot and have recently been doing some work for a client who was looking for a super customised Thesis site. Of course, being good with code I took on the challenge, here’s what they were looking for: they wanted an image slider and 3 column section on the homepage only. That’s easy to do with a normal website in a program such as Dreamweaver, as each page is designed separately, this is kind of the opposite to the way that Thesis and WordPress work. Here’s two screenshots of the mock up website to illustrate what I mean (click to enlarge):
Homepage exclusive full width custom boxes
Okay, so those two screenshots are taken from the same Thesis website. On the homepage (left image) the image gallery and tabbed effect website profiles are content inside of custom full width boxes, notice how the content below is actually the normal static WordPress page. All I’ve done is move the welcome page content down by adding content above. The second image here (right) is of another page on the website, this is just to illustrate that the full-width custom content boxes aren’t site wide. So, here’s the code I used… Copy and paste it into your custom_functions.php file:
function custom_content_box() {
if(is_front_page()) { ?>
<div id="custom_box">
<div>
<div id="featured">
Your custom content here!
</div>
</div>
</div>
<?php
}
}
add_action('thesis_hook_before_content_box', 'custom_content_box');
The line of code that makes this full width box exclusive to the homepage is, it’s a conditional tag:
if(is_front_page()) { ?>
If you are looking to have your additional custom content box elsewhere on your thesis blog (but not site-wide) you will need to assign a different conditional tag. For example, the one below is for the error page (this is the page you are shown if a particular page / URL doesn’t exist on a certain WordPress blog) see below the conditional tag for the 404 page.
if(is_404()) { ?>
To change the specific page the custom content box comes up on you need to replace the conditional tag on the 2nd line of the code above. Here are some more examples of possible conditional tags you could use:
Click to expand & see more...
if(is_single()) { ?>
This is the conditional tag for a single post page. If we wanted our custom content box to come up on our post pages we’d have to edit the HTML (listed above) and then input it into our custom_functions.php file:
function custom_content_box() {
if(is_single()) { ?>
<div id="custom_box">
<div>
<div id="featured">
Your custom content here!
</div>
</div>
</div>
<?php
}
}
add_action('thesis_hook_before_content_box', 'custom_content_box');
if(is_page()) { ?>
This is the conditional tag for a single WordPress page. If we wanted our custom content box to come up on our blog’s pages we’d have to edit the HTML and then input it into our custom_functions.php file:
function custom_content_box() {
if(is_page()) { ?>
<div id="custom_box">
<div>
<div id="featured">
Your custom content here!
</div>
</div>
</div>
<?php
}
}
add_action('thesis_hook_before_content_box', 'custom_content_box');
~ It’s that simple! 
Tee hee
*****
When changing the conditional tag you will need to ensure that the structure of the new conditional tag you insert is the same, otherwise you are likely to temporarily ‘kill’ your blog – which can be quite scary if you don’t know how to recover it. Anyway, to find out more about conditional tags, please visit WordPress’s official conditional tags page
In order to make the full width box page specific I also had to change the top line of code, and take out one of the “}” (on the second to last line) too. So, if your looking to add a site wide custom content box (i.e. message that you have recently updated you website / moved domain etc) then use the following piece of code… Copy and paste it into your custom_functions.php file:
function custom_content_box() {?>
<div id="custom_box">
<div>
<div id="featured">
Your custom content here!
</div>
</div>
</div>
<?php
}
add_action('thesis_hook_before_content_box', 'custom_content_box');
Okay, so we now know:
- How to make a page specific custom full width custom content box
- How to make a site-wide custom content box
Next, we want to look at how to position our custom content boxes, as we can have them anywhere on our Thesis sites! This next little section is about Thesis hooks (positions). Okay so Hooks tells Thesis where to put certain content on a page. In the code excerpt above I’ve told thesis that we want our custom content box to go above the page and sidebar and below the header. see below:
thesis_hook_before_content_box
There are many places we can put our custom content box, please see ThesisHooks.com for a visual guide on the existing Hooks (I really recommend checking it out!)
Here are some example Hooks we may use to position our custom content box:
Click to expand & see more...
thesis_hook_after_post_box
This is a great hook to use if you are looking to create a bio box after your blog posts!
thesis_hook_before_html
This hook will position your custom content box before all of your pages content, this is good for creating an announcement or additional navigation etc. As I said before.. I would really recommend checking out ThesisHooks.com, there you can find all of the hooks available.
*****
Okay, so now we’ve looked at the positioning of the custom content box, now we can have a look at styling it! Please take a look at the CSS code below:
.custom #custom_box { height: 100px; }
.custom #custom_box #featured { width: 100%; padding: 35px 18px; }
So, the name of our box is
custom_box
The <div> tag defines a section (box) in an HTML document or website. So, as you can see from the HTML code below… we are registering a box called “custom_box”. The section where we register the custom content box is highlighted in dark grey below:
function custom_content_box() {
if(is_front_page()) { ?>
<div id="custom_box">
<div>
<div id="featured">
Your custom content here!
</div>
</div>
</div>
<?php
}
}
add_action('thesis_hook_before_content_box', 'custom_content_box');
Okay so, back to the styling… (hehe, aren’t I a geek) So copy and put the code below into your custom.css file:
.custom #custom_box { height: 100px; }
.custom #custom_box #featured { width: 100%; padding: 35px 18px; }
Please note that you can style your custom content boxes any way you want. You could add a background colour i.e:
.custom #custom_box { height: 100px; background: #FFDA6F; }
So, there is al manner of cool bits of CSS code you can apply to these custom content boxes, I advise just having a play around and see what works for you. There isn’t any real danger in playing with the custom.css file, the code you write will either work or not. As CSS is quite easy to play around with, and is also an expansive topic.. I will talk more about different customisations you could employ in my next post.
Last thing: how to add multiple custom content boxes. This is key if you are looking to have more than one custom content box on your website. So, in order to register more than one custom content box we need to have different names for them, this is so they don’t conflict with each other. Please look at the HTML code sections below:
function second_content_box() { if(is_front_page()) { ?> <div id="second_box"> <div> <div id="featured"> Your custom content here! </div> </div> </div> <?php } } add_action('thesis_hook_before_content_box', 'second_content_box');
The CSS Tag (for the custom.css customisation) for the above section of code would be:
second_box
If you wanted to make any more custom content boxes all you have to do is change the highlighted sections below. so you could change them by changing the numbering i.e. second, third, fourth, fifth and so on.
See below for another example:
function third_content_box() { if(is_front_page()) { ?> <div id="third_box"> <div> <div id="featured"> Your custom content here! </div> </div> </div> <?php } } add_action('thesis_hook_before_content_box', 'third_content_box');
The CSS Tag (for the custom.css customisation) for the above section of code would be:
third_box
******
So, there you go. You’ve come to the end of this tutorial on how to add custom content boxes in Thesis!
Thank you for reading! If you enjoyed this post and think that fellow entrepreneurs (Thesis users!) should know about how to add page specific full width custom content boxes in Thesis; then please share this post, or leave me a comment. Why not connect with me on Facebook and see my most up to date posts and tutorials at http://facebook.com/wealthwithclaire 
To your success,
Claire Harbour
P.S. Custom content boxes is where it’s all at!
HTML Image Alignment
Tutorial for: HTML image alignment
There are many uses for images e.g. Facebook fan pages, blogs, websites etc. However the pathway to super cool fan pages and blogs open when you learn html image alignment. In this tutorial I am going to show you some codes you can use for the normal: left, right and center alignment and more! Here is the image I am going to align using HTML:
The basic HTML code for making an image is as follows:
<img src=”http://claireharbour.co.uk/wp-content/uploads/2011/07/html-eg-image.jpg” />
As you can see above the code: <img src=”" /> is sourcing (src stands for source) and inputting the image. We put the image’s URL inside of the speech marks. Place the URL of an image you wish to input into your website inside of the source tag. As you can see above, the URL of the image is: http://claireharbour.co.uk/wp-content/uploads/2011/07/html-eg-image.jpg
Now to implement basic HTML image alignment code
Left HTML image alignment:
This image is aligned left. Having an image left aligned means that we can have text on the right side of the image (like this.) An image that has no alignment set pushes the text below it, making for quite a cluttered look.
The code for left HTML image alignment is as follows:
<img src=”http://claireharbour.co.uk/wp-content/uploads/2011/07/html-eg-image.jpg” align=”left” />
Right HTML image alignment:
Okay, so as you can see, this image is aligned right. As you can see the having an image right aligned means that we can have text wrapping around the left side of the image (like this.) I love to use both left and right image alignment on my online content as it breaks up and adds some variation to blog posts / pages. The snippet of code is what I used in order to right align this image. Notice how it’s the same as the above snippet but I’ve changed the Alignment tags.
The code for right HTML image alignment is as follows (copy and paste in in your own website to see how it works!):
<img src=”http://claireharbour.co.uk/wp-content/uploads/2011/07/html-eg-image.jpg” align=”right” />
Center HTML image alignment:
The image here is center aligned. Center aligning an image is a little different to left or right aligning an image, this is becasue the text doesn’t wrap around it; instead it forces the text below or above (depending on where you have ‘stuck’ the image in relation to your text). Therefore, a center aligned image acts a bit like one which has no alignment. So, as you can see from the snippet below… The code for center aligning an image is a little bit different. Instead of using the align=”" tags we have to use p align=”center”, which means we treat the image like a bunch of text., You can basically put whatever you want inside of the </p> tags below, copy it and have a go!
The code for center HTML image alignment is as follows:
<p align=”center“><img src=”http://claireharbour.co.uk/wp-content/uploads/2011/07/html-eg-image.jpg” /></p>
Custom HTML image alignment:
This image is aligned left by 300 pixels. Having an image custom aligned gives us real flexibility, especially when designing Facebook fan pages! Please refer to the code below, not only can you custom left align but you can also custom top align. I would have showed you here, but as I am current writing this as a post instead of creating an iFrame, this would not be practical. If you want custom top alignment all you need to do is add top:200px; straight after the section bolded in the code below (the left alignment tag). I would say that this is the best piece of code of custom alignment, so I would recommend you copy the snippet and play around with it – It pays off let me tell you!
The code for custom HTML image alignment is as follows:
<div style=”position:relative; left:300px;”><img src=”http://claireharbour.co.uk/wp-content/uploads/2011/07/html-eg-image.jpg” /></div>
Thank you for reading! If you enjoyed this post and think that fellow entrepreneurs should know about HTML image alignment; then please share this post, or leave me a comment. Why not connect with me on Facebook and see my most up to date posts and advice at http://facebook.com/wealthwithclaire
To your success,
Claire Harbour
P.S. Custom HTML image alignment is where it’s all at!
5 top tips on using Twitter for business
I love to use Twitter for business and so do many other young entrepreneurs.
However, many up-and-coming young entrepreneurs and small business owners aren’t sure how to use Twitter effectively. Twitter can of course be used to drive traffic to your websites and / or business opportunities and help to develop your brand online. Essentially, many users just don’t know how to use Twitter effectively for business! I think it’s key to recognise that Twitter can be utilised to grow exposure for ones business.
For this reason, I created ‘Young Entrepreneur News’, where we not only offer you the facts of social media (Twitter, Blogging and Facebook) but also give you methods and tips to utilise these awesome tools. As I say, this News report “Is one of your five a day”, it’s good for you and your business! Tee hee
So, click play below to see what it’s all about…
Young Entrepreneur News reports on Twitter for business:
Here are the 5 Tip on using Twitter for Business (explained in more detail):
- Tweet regularly. Once a week or more. The more you tweet the more followers your get. People get to know you, your brand and your style and are more likely to engage in your conversation if you tweet more. The more you tweet means the more you come up on your followers homepage (Twitter news feed), this means that you can connect with more people as you will be tweeting at different times of the day. Don’t forget timezones; for example, posting your tweet in the UK at 10am will probably won’t be seen by any potentially interested parties in the USA as by the time they are at their computer in the late afternoon your tweet will long be extinct / buried.
- Always try to share interesting, engaging and worthwhile content, as people like to be offered value. This is an interesting point; of which I will have more to say about in my next video.
- Ensure you have a custom profile picture and background for your Twitter account, as this helps to raise your brand awareness and makes you look more professional as an entrepreneur / business. I would always recommend having a picture of you smiling even if your a business, as people like to to connect with positive, happy looking people. They want to talk to a person rather than a logo. However, having a logo is acceptable as you are wanting to use Twitter for business (to raise your brand awareness), so you can incorporate your logo into your background image template.
- Share a link on your Twitter page to your website or your Facebook account, as these places are usually the hub of your web activity and this is where we want to be driving traffic. Entrepreneurs and small businesses often complain they they aren’t getting anyone ‘like’ their Facebook fan pages; this isn’t because they don’t want to, it because they don’t know! Try to promote / ask your followers to join your fan page at least once a week, persistence is key! The probability is that if people are following you they want to know about your business, so forward them to your opportunities!
- Use JustUnfollow.com to balance out your following to followers ratio, as this is where you can view all of the people who aren’t following you back. JustUnfollow is a free tool and I really recommend it for anyone especially people using Twitter for business, as you can see and unfollow all of the people straight from the website, so is an easy, non-time consuming process.
Thank you for reading! If you enjoyed this post and think that fellow entrepreneurs should know about my 5 top tips on using Twitter for business; then please share this post, or leave me a comment. Why not connect with me on Facebook and see my most up to date posts and advice at http://facebook.com/wealthwithclaire
To your success,
Claire Harbour
