Simple Hooks tutorial, Genesis hooks the easy way.

There are two Simple Hooks videos on this page. The first video is a short guide, the second one goes in to a bit more detail. The simple hooks plugin only works on the Genesis Framework.

Using Simple Hooks – a short guide.

• Install Simple Hooks plugin.
• Find the hook you want to use.
• Type your HTML in to the text box for your chosen hook. Do this in the simple hooks settings page.
• Click save.
• Paste any CSS needed to style your content. You do this in your theme’s style.css file.

Your content will now appear on every page of your site in the position you placed it.

Simple Hooks plugin in more detail.

First, install Genesis Simple Hooks plugin.
http://wordpress.org/plugins/genesis-simple-hooks/

Then look at your web site and decide where you would like to place your new piece of code or content.

Once you know where you’re going to place your new content you need to discover which hook to use.

Go to GenesisTutorials.com/Visual-Hooks-Guide and find a hook in the position needed.

Copy or type out the name of the hook.

genesis_before_header
genesis_before_content

Go back and click the Simple Hooks tab in your WordPress dashboard.

Search for the hook you selected from the list on the visual hooks guide web page.

When you’ve found the hook you need, paste your content in the text box.
(The easiest way to find your hook. When you are viewing the simple hooks page in WordPress, press CTRL + F on your keyboard to open Firefox’s search box. Use Firefox’s search feature to find the hook you want. There are 50 hooks and it’s difficult to find the right one.)

You’ll want to style your new content using CSS.

So, wrap your HTML in a…

By wrapping your HTML in a div with a unique name, you can add some styles to your theme’s style sheet and so control how your new content will look.

In your WordPress dashboard go to Appearance > Editor. Find, Stylesheet (style.css).

Paste your CSS at the very bottom of your theme’s style.css file.

I used this code…

But what if you don’t know any code, can you still use simple hooks?

Yes, but not to it’s full potential.

You can use WordPress to write the HTML then copy and past the code into simple hooks. If you format a post in WordPress, then select the text tab at the top of the wysiwyg post editor box, you can copy the code and paste it into simple hooks. Don’t save the post, you only used WordPress wysiwyg post editor to write the HTML code, when you’ve pasted the code into simple hooks, you can discard or delete the post. (wysiwyg means what you see is what you get. )

The problem of overlapping content.

Sometimes the content boxes on a web page overlap each other. You can put a thin line at the bottom of your content that clearly marks the end of the content and often solves the overlapping content problem. You just add an empty div with a class of clear-line.

Using the method above, you can easily brighten up your theme with a few nice images, especially if you’re good with a graphics editor.

Format some content using WordPress visual editor

Copy the HTML using the Text tab of the visual editor

Paste your code in to Simple Hooks.

And if you want to be adventures, you could learn how to use conditional tags to make these images only appear on the front page.

You only need a short piece of code to do this.

Just wrap your code in this conditional statement.

If you use PHP or short codes in simple hooks, tick the appropriate box.

Simple hooks is a very powerful plugin. To make the most of it, you need to be able to hand code CSS, HTML and PHP. However, the reason that simple hooks was created, was to help you start using hooks, which are complicated, in an easy way.

Why not try simple hooks and take your programming skills to the next level?