Cloning and Templates Summary

Cloning is the practice of copying a layout from another page onto a new layout. From there you can modify the new page as needed, moving, deleting, and adding blocks to just the current layout.

Templates are pre-defined layouts that you create to use as-needed. Pages with templates assigned will look exactly the same except for the content (as long as the content block is in default mode). Changes made on the template will affect all pages using it.

I never use templates, so new users need not deal with them if they don’t want to. What questions do you still have about these two features of headway themes?

Headway 3.0 isn’t table-friendly off the bat, though, so we have to add a bit of CSS code to make them display properly. To make tables usable with Headway, simply add the following code to the live CSS editor or your child theme’s style.css file:

/*Table Fix*/
body.custom table td {vertical-align: top;}

That’s it! You should be good to go as far as creating tabular layouts within pages.

How to Make the Headway Navigation Block Smaller with CSS

Copy and paste the following CSS code into the live CSS editor or your child theme’s style.css file:

body.custom .nav-horizontal ul.menu > li > a, .nav-search-active .nav-search { height: 30px; line-height: 30px; }

Targeting an Individual Navigation Block

If you want to target a specific navigation block, get the block’s ID and use the following code instead:

body.custom #block-2 .nav-horizontal ul.menu > li > a, #block-2 .nav-search-active .nav-search { height: 30px; line-height: 30px; }

If you want to make it even smaller, just change the 30px to a lower number. Thanks to the helpful people over at the support forums, the rest of us can make the navigation block as tiny as we want!

How to Hide the Category Archive Title

Hiding the title entirely is fairly simple. We can make a function called “hide” to get rid of it, just like when we hide footer links with php. Just add the following to your child theme’s functions.php file:

function hide() {return '';}
add_filter('headway_category_title', 'hide');

How to Change the Category Archive Title

Changing the actual title text is fairly straightforward. We’re going to use some HTML and a WordPress function called “single_cat_title” to display our archive title and style it how we want. Copy the following code into your child themes’ functions.php file:

function my_category_title() { return '<h3>Now Reading: '.single_cat_title('', false).'</h3>'; }
add_filter('headway_category_title', 'my_category_title');

In this example, we’re wrapping our title in H3 tags to make it less prominent, and then prefixing the category with “Now Reading.” You can change the title priority to anything you want (h1, h2, etc) or even wrap it in a completely different tag (like a span tag).

If you don’t know much about HTML, you should read my quick introduction to basic coding.

That’s all there is to it!

A lot of beginners to Headway are also beginners to how web code works, so in this tutorial we’re going to look at the three fundamental programming languages every website owner should be able to recognize.

What is  HTML?

HTML (Hyper-Text Mark-Up Language) is the language that websites are rendered in. Basically, everything you and your readers see on the “front-end” is HTML. This language uses what’s called “tags” that you can wrap around different types of content to structure a layout. For example, this is how titles and subtitles look:

<h1>I'm the Page Title!</h1>
<h2>I'm a Subtitle!</h2>
<h3>I'm a Section Title!</h3>

The above code uses “title tags” to designate that content as a title or subtitle. Another tag, “ul” generates an unordered list, and will display the content entered into it in a bullet vertical list. Like this:

<ul>
<li>This is the first list item.</li>
<li>This is the second list item.</li>
<li>This is the third list item.</li>
</ul>

HTML can also be used to assign “IDs” and “Classes” to website content. Basically, you can attach a name to elements, that can be used later with other languages. For example, Headway adds the class “custom” to the body tag. It looks like this:

<body class="custom">

A class is an identifier that can be used numerous times on the same page. An id should only be used once per page. For example, the “whitewrap” div tag that wraps around your entire Headway Themes site. It looks like this:

<div id="whitewrap">

For the sake of beginners, let’s say that HTML is NOT a programming language. Incorrect HTML will not take down your entire website. Usually, broken HTML just results in a weird looking layout, and can be easily fixed with the rest of the website running.

When you see people in videos looking at source code in a browser, what they’re viewing is HTML. It’s used to structure the website and display all of the content like text, images, videos, etc. Read more about it here.

HTML You Need to Know

There are three snippets (really two, and then combining them) that every internet user should know: how to make a hyperlink, how to display an image, and how to display a hyper-linked image. They look like this:

<a href="http://yoursite.com">This is Your Link Text</a>
<img src="http://yoursite.com/image.jpg" />
<a href="http://yoursite.com"><img src="http://yoursite.com/image.jpg" /></a>

What is CSS?

CSS (Cascading Style Sheets) is another mark-up language, similar to HTML. Instead of displaying the content, CSS styles the content. This can mean anything from text colors to background images and positioning elements within the layout.

You have to think of CSS as a language, like English. As opposed to these “pre-set” styles, it’s more like decorating a room with paint, photos, furniture, etc. You have elements that can be applied to various places to create a look.

For example, we can use the background property to set a background image:

body {background: blue;}

CSS communicates with HTML by identifying HTML tags, like the body tag above. Here’s an example where we would style the color of a hyperlink:

a {color: green;}

The HTML tag for a hyperlink is <a>, so we use the same thing, without the arrows, in our CSS code. CSS can also pick up IDs and Classes to style specific elements. For example, the “custom” class associated with Headway’s body tag:

body.custom {background: blue;}

We can string tags along to target different elements on a web page. You’ve probably seen this when looking up code examples and snippets for Headway Themes. Let’s look at code that could be used to change the color of Headway’s blog post titles:

body.custom .entry-title {color: red;}

This code targets the body.custom element (the body tag with the class “custom”) and then goes one step further and finds the class of the titles (“entry-title”) that is within the body tag. Once it has the target, it sets the color to red.

CSS You Need to Know

In reality, you should try to learn CSS in its entirety. From personal experience, I can tell you that learning basic CSS should only take around 2 hours. From there on out, it’s about practicing using it. You can learn CSS from W3Schools and use it with Headway Themes in my CSS Intro Bundle.

What is PHP?

PHP is a programming language that developers use to create, manage, display, and destroy information. WordPress is created using PHP. So is Headway Themes. Basically, PHP is the foundation of dynamic website management. Luckily, beginner users really only need to learn about functions.

Functions are mini-programs that can be used to do a number of things. When it comes to WordPress and Headway in general, we usually use functions to interact with hooks. For example:

function alert_message()  {?> <div id="alert">This is an alert!</div> <?php }

add_action('headway_body_open', 'alert_message');

The above function would make the text “This is an alert!” appear at the top of a headway-powered website. First we create our own function, alert_message() and then we use a pre-defined function: add_action(). The add_action function is being used elsewhere to tell Headway to put additional content in different places. So add_action runs our own little mini program through it’s program and then Headway’s system spits it out.

Incorrect PHP can take down your website. This is also a language that requires practice, but you should definitely have FTP access to your website in the event you write a wrong line of code and have to fix it without going through WordPress.

PHP You Need to Know

The only PHP you really need to know for Headway and WordPress is how hooks work. From there on out, it’s pretty much searching the internet for code snippets until you start figuring things out. PHP is like the engineering of the internet: anyone can make a box car, but you have to keep learning if you want something really awesome.

Check out the introduction to hooks post and learn more about PHP basics from W3SChools.

Where Can I Learn More?

Google. Google and practice. I have no books, courses, or videos to recommend. I learned these languages by practicing with them. Modifying preexisting templates, trying to build your own code, making changes to your website, etc. Practice makes perfect!

A literal crap-ton of people asked me to write out my method for creating fluid headers. I apparently have showcased this technique in videos and on the forums, but never in a tutorial! So here’s how I do it.

How to Create a Fluid Headway Header

This part is all CSS, no hooks required. Basically, we’re going to make a background image act like the header for us. This is how it’s done on Headway101. First, create a background image that is the height of your header block. It can be any width, but smaller is better.

Use the following CSS in either a child theme or the Live CSS editor:

body.custom header, body.custom div#whitewrap {background: url(yoursite.com/header.jpg) repeat-x;}
body.custom div.wrapper {background: none; box-shadow: none;}

This sets the header and a <div> tag with the “ID” whitewrap to have a background image: your header background. Of course the header is permanently attached to the wrapper, so we have to make the whole thing transparent and get rid of the box shadow.

The best thing about this method is that you can still use a body background image.

Need Fluid Navigation Too?

In order to make your navigation appear fluid, simply add the height of your navbar to the bottom of your header image, and stick its seamless background inside the image. Then, make the background of the navigation block transparent. Vwala!

How to Create a Fluid Headway Footer

If you don’t have a fluid header, you can use this CSS code to apply the above trick to the footer. Create a footer image the height of your footer block with any width, and use the following code:

body.custom footer, body.custom div#whitewrap {background: url(yoursite.com/header.jpg) bottom repeat-x;}
body.custom div.wrapper {background: none; box-shadow: none; margin-bottom: 0px;}

Need Both Elements Fluid?

If you’re using a fluid header, then the best way is to use PHP and some HTML to create our own footer. I’ve done this for multiple projects, including a client site I just worked on, Worlds Tax Havens. You need to have a child theme installed first.

Delete your footer block, and add the following to your child theme’s functions.php file:

function custom_hw_footer() { ?>
<div id="footer-wrap">
<footer id="footer">
<p><?="&copy; ".date('Y')."&nbsp;".get_bloginfo('name').". All Rights Reserved"; ?></p>
</footer>
</div>
<?php }
add_action('headway_after_wrapper', 'custom_hw_footer', 1);

This PHP code basically says that after the wrapper, we want to add our own code for the footer, which is just a copyright message along with an updating year for the copyright date. Next, add the following code to your style.css file or the live css editor:

body.custom div#footer-wrap {background: url(yoursite.com/footer.jpg); overflow: hidden;}
body.custom div#footer-wrap footer {width: 940px; margin: auto; }

This CSS code makes the footer the width of your wrapper (change 940 to the width of your site) and gives it a background image that wraps from the left side of the screen to the right.

Tip: Responsive Design

I haven’t worked with responsive design much, but if you want the footer to resize itself alongside the rest of the responsive grid, change the width of the footer from a pixel value to a percentage between 1 and 100%. Mess with the number until it lines up correctly and you should be good to go.

Enjoy Your Fluidity!

This technique will end up making your content “float” and in that way, look fluid like the top and bottom portions of the website.

If you want to use Google Fonts in your child themes instead of doing it the usual way, you can use a simple PHP function with Headway hooks to automatically insert the proper code for your fonts into the header.

How to Add Google Fonts to Headway with PHP and Hooks

In this example, we’ll be adding the Oswald font to our child theme. Simply copy and paste the following code into your child theme’s functions.php file:

//Google Fonts
function google_fonts() {?>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<?php }
add_action('headway_head_extras', 'google_fonts');

After that, all you need to do is use the font-family property in your custom.css file to modify text. For example:

body.custom .entry-title {font-family: 'Oswald', sans-serif;}

See? Easy as pie! Now you can use Google fonts within your child themes to create a wider variety of looks. Don’t forget there’s also the font-face method of adding fonts for those not available from Google’s library.

Unfortunately, the warning box is rather large and makes accurate previews of your website even harder. So let’s get rid of it.

Copy and paste the following CSS into the Live CSS Editor (or your child theme style.css file):

body.custom div.alert-yellow {display: none;}

Poof! No more warning message for the user that already knows

Creating a globally widgetized footer that appears automatically on each page is actually pretty easy. We just need to use headway’s hooks system. First, though, you need a child theme. Learn how to create one or download one from Headway101.

Demo Video

How to Create a Widgetized Footer with Headway Themes

The first thing we need to do is declare a widgetized area. This is done with the “register_sidebar” function from WordPress. Copy and paste the following code into your functions.php file:

//Define Widget Area
if (function_exists('register_sidebar'))
register_sidebar(array('name' => 'Footer-Widgets','before_widget' => '<div class="footer-item">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>'));

Using this function, you can see that we’ve named our sidebar “Footer-Widgets,” and assigned some classes to the actual widgets and the title for styling purposes. Next we need to call out the widget area in the footer block.

Copy and paste the following code into your functions.php file, below the first bit of code:

//Show Footer Widgets
function widgetized_footer() {
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer-Widgets') );
}
add_action('headway_footer_open', 'widgetized_footer');

Here we’re using an action hook to stick our widget area into the footer block. We could easily swap “headway_footer_open” for “headway_wrapper_close” if you’re not using the footer block in your design.

Styling the Footer Widgets

To get the footer widgets to line up horizontally, we just need one line of CSS code. Copy and paste the following CSS into your child theme’s style.css file or the Live CSS editor:

body.custom div.footer-item {float: left; display: inline; overflow: hidden; width: 30%; padding: 10px;}

This code makes the widgets align to the left of the footer and then evenly sizes them to create 3-columns. You can mess with the width percentage and padding to add more columns if necessary.

Any Questions?

What questions do you have about creating a global widgetized footer in Headway?

Don’t forget that you can learn more about hooks from the Introduction to Headway Hooks & PHP webinar!

That’s kind of annoying, so instead  You’ll need to have a child theme in able to do this. Download one or create your own.

How to Create a “Hide Page Title” Button for Headway Themes

Randall R from T.H. Creations was nice enough to supply the code. Simply copy and paste the following PHP code into your child theme’s functions.php file:

//Hide Page Title Button
add_action( 'add_meta_boxes', 'toggle_title_display_add_box' );
add_action( 'save_post', 'toggle_title_display_on_save' );
add_action( 'delete_post', 'toggle_title_display_on_delete' );
add_action( 'wp_head', 'toggle_title_wp_head' );
function toggle_title_wp_head(){
global $post;
$toggle = get_post_meta( $post->ID, 'toggle_title_display', true );
if( (bool) $toggle && is_singular() ){
?>
<style type="text/css">.entry-title { display:none !important; }</style>
<?php
}
}
function toggle_title_display_add_box(){
$posttypes = array( 'post', 'page' );

foreach ( $posttypes as $posttype ){
add_meta_box( 'toggle_title_display', 'Hide Page Title', 'toggle_title_display_build_box', $posttype, 'side' );
}

}
function toggle_title_display_build_box( $post ){
$value =  get_post_meta( $post->ID, 'toggle_title_display', true );
$checked = '';

if( (bool) $value ){ $checked = ' checked="checked"'; }
wp_nonce_field( 'toggle_title_display_dononce', 'toggle_title_display_noncename' );
?>
<label><input type="checkbox" name="toggle_title_display" <?php echo $checked; ?> /> Hide the Title on This Page</label>
<?php
}
function toggle_title_display_on_save( $postID ){
if ( ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
|| !isset( $_POST[ 'toggle_title_display_noncename' ] )
|| !isset( $_POST['toggle_title_display'] )
|| !wp_verify_nonce( $_POST[ 'toggle_title_display_noncename' ], 'toggle_title_display_dononce' ) ) {
return $postID;
}

$old = get_post_meta( $postID, 'toggle_title_display', true );
$new = $_POST['toggle_title_display'] ;

if( $old ){
if ( is_null( $new ) ){
delete_post_meta( $postID, 'toggle_title_display' );
} else {
update_post_meta( $postID, 'toggle_title_display', $new, $old );
}
} elseif ( !is_null( $new ) ){
add_post_meta( $postID, 'toggle_title_display', $new );
}
return $postID;
}
function toggle_title_display_on_delete( $postID ){
delete_post_meta( $postID, 'toggle_title_display' );
return $postID;
}

This long piece of code creates a new meta box (a.k.a write panel) in the WordPress back end that allows for the removal of page and post titles using a simple checkbox that looks like this:

That’s all you need to do, and then you’re free to hide titles without going through the VE!