The Blog

It’s that time of the week again!! We’ve all been busy working on getting the marketplace up and running and filling it with blocks and child themes. While we’re excited for the launch of that, the past few weeks took a toll on me and I wasn’t able to get out a screencast. I do apologize about that but the good news is we’re back! And this week’s I think you are going to love.

We get asked this question a lot, How can I move my Headway website, and typically our answer is to use BackupBuddy. It’s the best product on the market that meets the needs of both backing up and moving your site. However, we understand some people don’t want to purchase another product to do that, so we took the advice of our customers and I spent a little time playing with Duplicator, a free plugin that seems to do a lot of what BackupBuddy does, but more stripped down features. So this week’s screencast, I’m showing you how to setup Duplicator and how you can use it to move your site from one place to another. I do want to point out, that I didn’t have internet when I went to make this screencast, so there were some weird issues when it came in getting the installer.php file needed. Other than that, you should be able to use this to move your own site from one place to another as long as you’ve got the necessary information. This video is a little on the longer side (around 15 minutes), and so when I get some more time, I’ll update the video, and hopefully it will not include the errors I encountered.

In my last guest post, I mentioned that I first acquired Headway in the spring of 2010, when the version was 1.6.6. So, while I wasn’t in at the bleeding edge of this framework, I was in several major releases ago.

For the sake of transparency, I won a personal license of Headway from a WPBeginner twitter contest and I hadn’t really touched frameworks yet. After building my first client site with Headway, I realized that I was going to become an expert at my craft and limit the tools in my toolbox. I planted myself squarely in the Headway camp at the end of August 2010, when I upgraded to a Developer license.

Since then, I’ve had to learn and re-learn how to best use Headway Themes. I wanted to jump in at the beta point for both HW 2 and HW 3, but resisted because my clients didn’t need it!

While HW 2 wasn’t a huge jump from HW 1.6.6 there were still a number of changes that made it clear to me that I needed a notepad and pencil to determine what new features I was going to get to use! The number of Easy Hooks increased and the column system was introduced. As with change, learning how to make the column system work for each site was, challenging to say the least. There were times when I wanted to span multiple columns with leafs, but needed to keep things tabular for others. I became really crafty with relative positioning of leafs – not exactly clean, but it accomplished what I needed.

OK, I’ll admit it – with HW 2.x I became a CSS addict. I know the HW CSS codex so well that several of my client’s Live CSS editors have more than 1000 lines of style!

I was really getting into the groove of pushing out HW 2.x sites when buzz about HW 3 started. I was excited to see what else Clay could come up with, but wasn’t sure I was ready to change my build process to account for it.

I went through a transition period where I was working simultaneously on HW 2 and HW 3 sites before launching my first 3.0.5 site. I’ll admit that it was a much bigger learning curve than I had imagined, however, because I had spent so much time embracing the Live CSS Editor in 2.x, I knew that I could rely on my CSS skills while learning my way around the new visual editor!

And, wow, that new visual editor has some extremely powerful and functional abilities! I could probably go on and on about why I like this feature or that one, but instead ’ll just list my 3 favorite elements:

• Page hierarchy. It is so intuitive and when paired with a good wireframe makes building a site foundation quite straightforward.
• Defaults. I’m sure this part of the VE is overlooked all too often, but setting the defaults before block customization makes fewer customizations and “do-overs” necessary
• Live CSS Editor. If I didn’t love it before, it now has logical color coding and indentation to further extend its power!

Overall, HW 3 has lived up to the greatness touted by the Headway support staff. It has been an awesome platform on which to develop truly unique websites for my clients! Thank you Clay, Grant and the support staff for all that you do to make my job so enjoyable!

Jaime Slutzky is a mom, fitness instructor and website developer in the Seattle-area. Her development studio, Fit with Flair, specializes in websites for Fitness Professionals. She also operates a small website design boutique, Simply Jaime, supporting other small businesses with website and email marketing solutions.

Connect on Twitter @ssJaime and @FitwithFlair
Connect on Facebook @Simply Jaime and @FitwithFlair.

In Part 1, we created the page, the content, and layout in the grid mode editor. In Part 2, we’re going to do some unique styling to set each section of the one page layout apart from the others.

Step 1 Styling the page and wrapper body

In the VE, change to Design Mode (where we will be spending all of our time). In Blocks, select Body and let’s give the body a background color of #ecffe3. A nice, soft green.

In the Wrapper, we’re going to set the background color to Transparent, and the Box Shadow to Transparent.

Click Save

Step 2 Styling the global Navigation properties

There are some stylings that I want to be consistent throughout the page. The first is a dark top and bottom border and text size and font.

Click on Blocks and click on Navigation. Set the border color to #888888. Click on Menu Item and change the Font Family to Lucida Grande and Font Size to 16px.

Click Save.

Step 3 Styling the TOP Content

We’re going to give each of the content sections a different background color and style to set them off.

Click on Blocks and click on Custom Code. In the “Instances”, select the top content navigation, in our example, block #10.

Set the background color to #E3FFF7.

Click on Blocks and click on Navigation. In the “Instances”, select the top content navigation, in our example, block #2.

Set the background color to #E3FFF7.

Click on Blocks and click on Content. In the “Instances”, select the top content block, in our example, block #3.

Set the background color to #E3FFF7.

Click Save.

But what’s that? There’s a gap between the Custom Code, Navigation and the content where the background color shows through. Let’s get rid of that.

In order to make the content look attached to the navigation bar, we need to get rid of the bottom margin of the navigation blocks so that they fit snugly and there is no background color showing through.

This will take some CSS code in the LiveCSS editor. Copy and paste this into the LiveCSS editor:

---

.block-type-navigation, .block-type-custom-code {margin-bottm:0;}

---

While we’re at it, lets shrink the custom code block down to 5px tall.

---

.block-type-custom-code {min-height:5px !important;}

---

Click Save.

Step 4 Styling the MIDDLE Content

Click on Blocks and click on Custom Code. In the “Instances”, select the top content navigation, in our example, block #11.

Set the background color to #FFEDE3.

Click on Blocks and click on Navigation. In the “Instances”, select the top content navigation, in our example, block #4.

Set the background color to #FFEDE3.

Click on Blocks and click on Content. In the “Instances”, select the top content block, in our example, block #5.

Set the background color to #FFEDE3.

Click Save.

Step 5 Styling the BOTTOM Content

Click on Blocks and click on Custom Code. In the “Instances”, select the top content navigation, in our example, block #12.

Set the background color to #FFE3E8.

Click on Blocks and click on Navigation. In the “Instances”, select the top content navigation, in our example, block #4.

Set the background color to #FFE3E8.

Click on Blocks and click on Content. In the “Instances”, select the top content block, in our example, block #5.

Set the background color to #FFE3E8.

Click Save.

Step 5 Styling the Media Content

We want that media block to look like it belongs with the bottom content, so we’re going to have to add some styling.

Click on Blocks and click on Media. Set the background color to #FFE3E8.

But the media isn’t centered in the page and there is that pesky gap between the media block and the previous content block. Let’s fix that.

In LiveCSS, add the following to center the video in the media block:

---

.block-type-media {text-align:center;margin-top:-10px;}

---

Click Save.

Step Last

Take a look at your new one page website and enjoy! We’ve done all of this with only 3 lines of custom css and a few lines of html.

Sometimes, you don’t need a multipage website. Sometimes, you want a website stripped down to the minimum. When you are looking for small, minimal sites, a single page website may be the answer.

If you’re used to designing a multipage website, creating a single page website will often require a bit of adjustment. It doesn’t require loads of javascript. It doesn’t require any specialized php. But it will require a bit of rudimentary knowledge of html and css.

Not to worry, though, I’ll provide examples that you can hack for your own use.

Let’s start with what our finished page will look like. Note, the design isn’t going to be drop dead beautiful, but colors and such are chosen so you can see where one element ends and another begins.

Step 1 – Install Headway

Start with a fresh install of Headway 3.x, the latest version of WordPress, make sure your browser is updated, and deactivate any plugins you might be running.

Step 2 – Create the Home Page

We’re going to create a page in WordPress that will be our single page website. So, go into WordPress dashboard area, go to Pages, click Add New. Name the new page “Home”. Click Publish.

Step 3 – Setup WordPress for a static Home page

Back to the WordPress Dashboard we go to setup our Home page as the default landing page. Go to Settings, go to Reading. For “Front page displays” Select “A static page”. For Front Page, use the drop down menu and select “Home”. Click Save Changes.

Step 4 – Create the content for the Home page

Here’s where thing might get a little confusing. We are going to use the custom query ability of the Headway content blocks to bring in our content. So, we are going to create separate pages in WordPress with this custom information. You’ll see how this all ties in together later on.

Let’s add a new page and name it “Top Content”.

In the body of the new page, add the following content:

---

<h2>Welcome to a one page website</h2>

This website is built using only one page, WordPress, and the theme framework Headway.

This is the first section and would be the equivalent of the landing page. Content here will be

above the fold. If you click on the navigation links, it will not actually take you to another page

but will, in fact, just move you around on this page.

By using graphical elements and color, I can make each section stand out.

---

Click Publish.

What we’ve done is created a block of content and wrapped it in a div title #top_content. We’ll use this for our navigation.

Let’s add another new page and name it “Middle Content”.

In the body of the new page, add the following content. You’ll want to add your own photo to the content.

---

<a name="mid_content">&nbsp;</a>

<h2>About This Section</h2>

This is the middle section and we might want to use it as our About Us section. So we'll put

in some biographical information and a photo.

<img class="size-thumbnail wp-image-10 alignleft" title="Rialto_Beach"

src="http://link_to_a_picture_here.jpg" alt="" width="150" height="150" />This photo, that

I'm using instead of my photo, was taken at Rialto Beach on the coast of Washington state.

This is a part of the Olympic National Park and features tide pools, cliffs, rocks, sand, and the

occasional hiker trudging about with a big camera. That would be me.

On this particular day, the morning temperature was quite chilly until the sun came up and

then it was very hot. The cold water of the pacific was a welcome relief. I had to wait

until the tide was coming in to snap this picture. In fact, I waited about an hour for the

waves to get high enough to give the effect I wanted.

Oh, and don't let the blue sky fool you, it rains all the time in Washington. Really.

---

Now, let’s add our final page, named Bottom Content. I’m going to show how you can add other blocks to a section, but this will happen when we get to the Visual Editor part of the tutorial.

Here’s the content we’re adding to the new page:

---

<a name="bottom_content">&nbsp;</a>

<h2>Video and More!</h2>

This is the bottom section and we are going to include a special addition: a media block with

a fun little video from YouTube.

Since I don't have a fun video of my own, I'm going to link to one of my favorite videos:

Simon's Cat. I hope you enjoy it.

---

Now that we have all of your content, let’s move on to the next section.

Step 5 – Creating the Layout in the Visual Editor

Open up your Visual Editor and create the following blocks. Make them take the full width of the page – this is supposed to look a bit like we have multiple pages in the website but it’s all built on one page. Having sidebars would defeat the look.

• Header
• Custom Code Block
• Navigation
• Content
• Custom Code Block
• Navigation
• Content
• Custom Code Block
• Navigation
• Content
• Media Block
• Footer

Your page should look a bit like this now:

 

Step 6 – Custom Code Blocks

This works by adding an html tag to your content called ‘a name’. With the configuration I have in this page, putting the html code in the content of the page would mean that, when you click on ‘Bottom Content’ in the navigation, the top of your screen would be even with the top of the content. This effectively hides the navigation. To bypass this, I’ve added a custom code block above each navigation and added that html tag to the block.

For the custom code block above the first Navigation block:

<a name="top_content">&nbsp;</a>

For the custom code block above the second Navigation block:

<a name="mid_content">&nbsp;</a>

For the custom code block above the last Navigation block:

<a name="bottom_content">&nbsp;</a>

Click Save.

Step 7 – Creating a navigation menu that works.

We are going to create a new menu in the WordPress dashboard area. We’ll call this “Main Menu”.

We’ll add 3 custom URLs to the menu. In the URL section, you’ll type the link to the section of the page.

URL #1:

#top_content

Label #1:

Top Content

URL #2:

#mid_content

Label #2:

Middle Content

URL #3:

#bottom_content

Label #3:

Bottom Content

Step 8 – Assign the Menu to the Navigation blocks

While you’re still here in the Menus section of WordPress, you should see the 3 Navigation blocks that we created in the Visual Editor. Assign “Main Menu” to each of these Navigations.

Your WordPress Menu area should look like this now:

Step 9 – Getting the Content into the page

Back to the Visual Editor we go. Click on the options icon for the first content block. Select “Custom Query”.

Under “Query Filters”, Select “Fetch Page Content” and choose “Top Content” from the drop down list.

Under “Display”, unselect “Show Titles”.

Click on the options icon for the second content block. Select “Custom Query”.

Under “Query Filters”, Select “Fetch Page Content” and choose “Middle Content” from the drop down list.

Under “Display”, unselect “Show Titles”.

Click on the options icon for the Third content block. Select “Custom Query”.

Under “Query Filters”, Select “Fetch Page Content” and choose “Bottom Content” from the drop down list.

Under “Display”, unselect “Show Titles”.

Step 10 – Add media

Under “Embed Options” I’ve put in the following URL: http://youtu.be/w0ffwDYo00Q

This is a fun little video I like, but you could add any link you want, like this one from AJ http://youtu.be/qsahO_09tFc

Step 11 – SAVE

Now save your work. Open the page in a browser and click around in the site.

This is a pretty boring looking site but you can add styling later. We’ll do that in part 2.

 

Getting back to our simple support help videos, I thought today would be a perfect time to show you how to use Theme Test Drive to help you with moving your live site over to Headway 3! There are several people in the community taking the time to do the update from Headway 2.x to Headway 3.x instead of waiting for the update process, what’s even greater to see is that there are some that are others coming from other themes (both free and premium) and want to design their site on their live install. This video runs just over 7 minutes.