Headway Theme Tutorials

Do you want to have different colors for each of your navigation menu item? See example as below.

One of the most frustrating problems for new Headway Themes users is after you have made all the changes and set the desired hyperlink colors but nothing happened; it still remained the same! You might think that changing the hyperlinks colors should be trivial but ended up hours of doing it. How agonizing!

A user at Headway Themes forum was trying to achieve the above but was not successful. As per request, here are the steps on how to achieve it. Basically, we just need to declare the different type of shadow effects in Live CSS and then apply these shadows to the content. See the below picture for an example on how the final design will look like.

Contact form 7 is one of the beloved WordPress plugins well liked by many Headway Themes users. It is not only free but easy to install and use but many users struggled with one problem – its file upload feature.

Many Headway Themes 3 users are interested to create a fixed navigation menu bar for theirs sites. The main reason is they want to keep the navigation fix so that it is easily accessible on every page.

When you are building a web site on a wordpress platform, there might be a time where you need to display a page at your home page, for example, to display a promotion page. The promotion page can contain in a little box and has limited height, if you think it is difficult to achieve this using Headway Theme, it is not.

When you are using Headway Theme editor to create your blog or website, you will realize the default next and previous link at the end of your post is displayed as the title of each post. This might spoil your neat layout when you have long post title as seen below.

Headway Themes has released an upgrade version from version 3.2.5 to 3.3 early of October 2012. There are a lot of improvements made and bugs fixed. One of the most problematic areas - Visual Editor has made great improvement on its speed and performance. In the previous version, there was hardly or limited option to style the sub-menu, form and images in the entry content but now you have the ability to style them separately. In other words, you will have more fanciful looking sub-menu, form and images.

Normally when you have two “Home” buttons appearing at your navigation bar, it means you have created more than one navigation bar in your Headway Themes visual editor. Each navigation bar has its own “Home” button and to remove the extra “Home” button, you can go to visual editor to do it.

In headway 3, the vertical menu bar at the sidebar no longer list down all its sub-menu items like in Headway 2. But now it has a cool fly-out sub-menu when hover over its main menu items. It works great and save a lot of spaces but there is occasion when sub-menu items still need to be listed down individually to allow direct navigation and quick accessibility.

I believe you might have seen some WordPress gallery where the authors dumped all the images or photos in the gallery page without any organization. If the visitors need to find certain image, they might have to go through the entire gallery to do it. It is highly recommended that if you could group your images or photos into several categories in a page for better presentation. You can label them with relevant titles so that it will be neater and easier for your visitors to browse and navigate around. For example, the WordPress gallery might include multiple categories such as products, events and promotion.

If you are looking for an alternate way to hide or remove the category archive title as shown as “Category Archives:Titles” in your archive pages, you got it here! This method is easier without the need to create a child theme and a functions.php file as suggested by the Headway support team.

In Headway version 2 and above, you might need to go through a number of steps before you could achieve a 3-column widgetized footer for your website but in Headway version 3.1.2, it is much simpler now. Basically, you just need to add a widgetzed block and set it horizontally and you got it! See below steps for details.

The other day, I was helping my client to add a News category to the main navigation bar and realized the archive section for the category is displayed as an excerpt. My client was not happy because he was seeing a lump of text unformatted and looked messy when he clicked on the news section. 

It is common that the “404 Error” page is the most overlooked and forgotten by the blog owners because it is the last thing in their minds that such page is ever needed. Many of them will be more concerned about the functionality, look and feel or even busy thinking of content for the blog than anything else. However, the 404 Error page is important because your visitors should be told and properly directed to a place where they could find assistance. This will increase the user friendliness of your blog and salvage your visitors from leaving your blog too soon.

If you feel that the search bar in Headway Themes is a little bit bare and hoping to jazz it up with a magnifying glass or search icon next to search bar, here are the steps to do it. If you are looking for a nice search icon, you can go to FindIcons.com . They have a lot of nice and professional looking icons for free download. They allow you to select different size of the icons which is excellent as you do not need to resize yourself using other software. Once you have selected the search icon, add it to your wordpress media library. Continue from your wordpress dashboard, go to Appearance > Editor > custom.css and add the following customized CSS code to custom.css. body.custom div#my-search { position: absolute; top:20%; left:75%;  } Once added, click the green button “Update File” to save. Alternatively, you can add the above CSS code to the Live CSS in the visual editor if you would like to. This metho...

Have you thought of moving the search bar to the top of the header so that your navigation bar has more spaces for your navigation items. If yes, add the following CSS code to your custom.css file. Log into your wordpress dashboard. Go to Appearance > Editor. On the right hand side, under “Styles”, click on custom.css. Insert the below CSS code into custom.css and click on the green button “Update Files” at the bottom to save. /*relocate search bar to the top of the header*/ body.custom form#header-search-bar input {             display:block;             height: 14px;             line-height: 14px;             position: absolute;             top: -280%;  ...

Headway is announcing they are going to release the new version Headway Themes 3.0 on 25 Nov 2011. The new version of Headway Themes is a radical improvement of previous version as it is said to be more user friendly, less code hacking, more robust drag and drop or rather draw and drop features are included. You can literally drag and draw out the website or blog you wanted using Headway Themes 3.0. This is great news for newbies and non programmers as it will cut down your learning curve and frustration. Child Theme It is a pity that the past and current version of Headway Themes has no child themes but with the new release version of 3.0, we are going to see child themes added to it. Personal license holder is going to get one free child theme while the developer license is going to have a choice of three. In addition, the child themes is said to be fully supported for HTML 5 so that means your website build with Headway child themes will be light, sleek and load faster. ...

Those of you who are used to coding HTML table in html editors might find it is such a pain to do it in Wordpress. Although there are plugins, for example the WP-Table-Reloaded available for creating table in Wordpress but it is not as friendly as it should be. In my previous post, “ How to Create Tables Easily for Your Wordpress Blog? ”, I mentioned that the WP-Table-Reloaded plugin offers a lot of table functionality that a normal HTML table including hover effect, alternate row color and manipulating the table with sort, hide, add and move functions. Nevertheless, when comes to building a table from scratch, it is still not the best option due to awkward cells in the table.

Do you have a gallery and you realized you might need to group related images together into single thumbnail? The main purpose is to allow your visitors to have greater ease of navigation and experience while browsing the gallery. For example, you have a list of product A-Z that you like to show them in different perspectives. When your visitors click on the thumbnail of product A; he or she can see the top, bottom, front and side view of product A.