Headway 101 http://headway101.com The Unofficial Guide to Headway Themes Sun, 20 May 2012 02:17:37 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 HTML, CSS, and PHP Explained – An Introduction to Internet Coding Basics http://headway101.com/html-css-and-php-explained-an-introduction-to-internet-coding-basics/ http://headway101.com/html-css-and-php-explained-an-introduction-to-internet-coding-basics/#comments Mon, 14 May 2012 01:43:51 +0000 Corey Freeman http://headway101.com/?p=879 While you can build a functional website without using code in Headway Themes, it’s helpful to know the basics when you start getting into intermediate customization.

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! ;)

]]> http://headway101.com/html-css-and-php-explained-an-introduction-to-internet-coding-basics/feed/ 0 How to Create a Fluid Header and Fluid Footer in Headway (The Easy Way) http://headway101.com/how-to-create-a-fluid-header-and-fluid-footer-in-headway-the-easy-way/ http://headway101.com/how-to-create-a-fluid-header-and-fluid-footer-in-headway-the-easy-way/#comments Thu, 10 May 2012 00:01:38 +0000 Corey Freeman http://headway101.com/?p=818 “Fluid” website elements are parts of a website that appear to expand from one edge of the browser to the other. For example, the blue area surrounding the Headway101.com logo.

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.

]]> http://headway101.com/how-to-create-a-fluid-header-and-fluid-footer-in-headway-the-easy-way/feed/ 10 How to Add Google Fonts to Headway Child Themes http://headway101.com/how-to-add-google-fonts-to-headway-child-themes/ http://headway101.com/how-to-add-google-fonts-to-headway-child-themes/#comments Wed, 09 May 2012 23:30:37 +0000 Corey Freeman http://headway101.com/?p=795 Google Fonts is Google’s library of fonts that you can use on your own website to create a more unique design. For users interested in developing child themes, custom fonts will definitely make your design stand out.

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.

]]> http://headway101.com/how-to-add-google-fonts-to-headway-child-themes/feed/ 0 How to Remove the Content Block Warning Message from the Visual Editor http://headway101.com/how-to-remove-the-content-block-warning-message-from-the-visual-editor/ http://headway101.com/how-to-remove-the-content-block-warning-message-from-the-visual-editor/#comments Thu, 26 Apr 2012 19:33:24 +0000 Corey Freeman http://headway101.com/?p=751 When working with the content block, Headway reminds you that the block won’t show the appropriate content for whatever page you happen to be on. It looks like this:

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 :)

]]> http://headway101.com/how-to-remove-the-content-block-warning-message-from-the-visual-editor/feed/ 0 How to Add Widgets to the Headway Footer Block http://headway101.com/how-to-add-widgets-to-the-headway-footer-block/ http://headway101.com/how-to-add-widgets-to-the-headway-footer-block/#comments Thu, 26 Apr 2012 19:17:27 +0000 Corey Freeman http://headway101.com/?p=745 A “widgetized footer” gives you the ability to add widgets to the bottom of your website, and automatically have them displayed on each page. Think of it as a horizontal widget area block, but you don’t have to keep adding it manually.

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!

]]> http://headway101.com/how-to-add-widgets-to-the-headway-footer-block/feed/ 10 How to Add a “Hide Title on This Page” Button to Headway http://headway101.com/how-to-add-a-hide-title-on-this-page-button-to-headway/ http://headway101.com/how-to-add-a-hide-title-on-this-page-button-to-headway/#comments Wed, 18 Apr 2012 19:06:30 +0000 Corey Freeman http://headway101.com/?p=737 In version 2.0 of Headway Themes, you could hide a page’s title from within the WordPress dashboard, eliminating the need to go into the VE. 3.0 removes this feature, requiring users to setup a custom layout for a page that they might just want the page title gone from.

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!

]]> http://headway101.com/how-to-add-a-hide-title-on-this-page-button-to-headway/feed/ 4 How to Add Google Fonts to Headway Themes in 3 Easy Steps http://headway101.com/how-to-add-google-fonts-to-headway-themes-in-3-easy-steps/ http://headway101.com/how-to-add-google-fonts-to-headway-themes-in-3-easy-steps/#comments Wed, 18 Apr 2012 00:10:40 +0000 Corey Freeman http://headway101.com/?p=729 Google Fonts is an open font library available from Google that lets you use any of their 501 fonts on your website.

It’s easy to use Gfonts with Headway Themes in just a few easy steps:

How to Add Google Fonts to Headway 3.0

Written Instructions

  1. The first thing you need to do is pick a font you like, and click the “quick-use” button.
  2. Copy the code in the blue text box into wp-admin–>headway–>options–>scripts/analytics–>header scripts.
  3. Use the CSS Google provides to change any text on your website to the new font. For example:
body.custom .entry-title {font-family: 'Bad Script', cursive;}

NOTE: Fonts cannot be added to the Visual Editor in any way at this time.

Using Non-Google Fonts with Headway

If you want to use other fonts, like one available from fontsquirrel.com or dafont.com, you need to use the @font-face method. It seems complicated, but you really just need to copy and paste where indicated.

Any Questions?

What questions do you have about using Google Fonts with Headway?

 

]]> http://headway101.com/how-to-add-google-fonts-to-headway-themes-in-3-easy-steps/feed/ 1 How to Change the Previous and Next Post Buttons in Headway Themes 3.0 http://headway101.com/how-to-change-the-previous-and-next-post-buttons-in-headway-themes-3-0/ http://headway101.com/how-to-change-the-previous-and-next-post-buttons-in-headway-themes-3-0/#comments Mon, 16 Apr 2012 15:31:47 +0000 Corey Freeman http://headway101.com/?p=718 By default, there are two buttons at the bottoms of a post that lead you to the previous and next entries. The text that displays is the title of each post:

If you have long post titles, this can become an annoying problem. However, we can change the text to just say “Previous Post” and “Next Post” using some PHP in a child theme.

If you don’t have a child theme, you can download one or create your own.

How to Change the WordPress Post Navigation Buttons

Add the following code to your functions.php file:

// Change Post Buttons
function change_next_post($format, $link) {
return preg_replace('/\">(.*?)<\/a>/i', '">Next Post</a>', $format);
}
function change_previous_post($format, $link) {
return preg_replace('/\">(.*?)<\/a>/i', '">Previous Post</a>', $format);
}
add_filter('next_post_link', 'change_next_post', 12, 2);
add_filter('previous_post_link', 'change_previous_post', 12, 2);

Any Questions?

What questions do you have about changing the single post navigation?

]]> http://headway101.com/how-to-change-the-previous-and-next-post-buttons-in-headway-themes-3-0/feed/ 4 NEW! Deadline Premium Child Theme for Headway http://headway101.com/new-deadline-premium-child-theme-for-headway/ http://headway101.com/new-deadline-premium-child-theme-for-headway/#comments Sun, 15 Apr 2012 15:23:24 +0000 Corey Freeman http://headway101.com/?p=706 I’ve just finished Headway101′s first premium child theme! It’s called “Deadline.”

This minimal, type-based design comes with seven color schemes: black, red, orange, yellow, green, blue, and purple, guaranteeing a match for just about anyone’s brand.

Deadline also gives users the ability to add a menu to the footer using WordPress’s built in system. This is  great for linking to terms of service, privacy policy, frequently asked questions, and other types of pages you may not want in your main navigation menu.

Finally, you can remove all of Headway’s footer links by just ticking a checkbox on the theme options page.

Deadline Preview

(Live Preview)

Purchase Deadline Theme

Deadline is just $19.99, and comes with free updates for life. You can download it as many times as you want from the membership area on Headway101. Just click “Buy Now” to gain access instantly:

]]> http://headway101.com/new-deadline-premium-child-theme-for-headway/feed/ 0 How to Use @Font-Face to Add Any Font to Your Website http://headway101.com/how-to-use-font-face-to-add-any-font-to-your-website/ http://headway101.com/how-to-use-font-face-to-add-any-font-to-your-website/#comments Fri, 13 Apr 2012 02:26:25 +0000 Corey Freeman http://headway101.com/?p=674 @Font-Face is a CSS3 property that allows you to add any font to your website without it needing to be installed on a user’s computer. It’s similar to Google Fonts, but without the library’s limitations.

How to Use @Font-Face with Headway Themes

Step One: Get Your Font Files

The first thing you need to do is download your font, and then convert it into .TTF, .EOT, and .SVG files. You can find fonts for download on places like DaFont or FontSquirrel.

You can use FreeFontConverter to get .tff and .svg files, and TTF2EOT to get your .eot file.

Step Two: Upload Your Fonts to Your Child Theme

You can technically upload fonts anywhere, but the easiest thing to do would be to upload all three font files into your child theme, in a folder called “fonts.” If you don’t have a child theme, learn how to create one or download one.

Make sure that your fonts are all named the same thing. For example: blackboard.eot, blackboard.ttf, and blackboard.svg. This will make it easier in the code later.

Step Three: Add the @Font-Face Code to Your Style.css File

Add the following code to your style.css file, and change the URL and name of the font files to the appropriate ones for your website.

@font-face {
font-family: 'yourfont';
src: url('fonts/yourfont.eot');
src: url('fonts/yourfont.eot?#iefix') format('embedded-opentype'),
url('fonts/yourfont.ttf') format('truetype'),
url('fonts/yourfont.svg#') format('svg');
}

Step Four: Use Your New Font

You have to use CSS to use the new font, but you can use it just like any other web-safe font family. For example:

body.custom .entry-title {font-family: 'myfont', arial;}

Any Questions?

What questions do you have about using @font-face with Headway Themes?

]]> http://headway101.com/how-to-use-font-face-to-add-any-font-to-your-website/feed/ 0