If you would like the jump to happen in a smoother way than sharply, do the following:

1. Go to My Theme -> Settings -> List any JavaScript or other code to be manually inserted in the site’s footer just above the </body> tag in the input below.

   Paste the following:

   <script type="text/javascript">jQuery(document).ready(function() {
    jQuery('a.scrollToTop').click(function() {
    jQuery('html, body').animate({scrollTop:0}, 'slow');
    return false;
    });
    });
   </script>
   

2. Add HTML similar to the following wherever you want to place the “Go to Top” link:

   <a href="#" class="scrollToTop">Go to Top</a>

That’s it!

On one of my customer sites (a Builder site), we have many similar, but slightly different layouts. On all of them, we want the same custom header (in a Custom HTML module). I’d like to maintain the HTML for that custom header in one place so that I don’t have to copy and paste the header code into each layout each time I want to make a change.

One of the ways this can be done is by creating a shortcode having the HTML code needed to display the custom header image and place this shortcode in HTML module of all the layouts. The advantage of doing so is that should you decide later on to make any changes in the HTML, it has to be done only in one place.

1. Install and activate ShortCodes UI plugin.
2. Go to Short Codes -> Add New.
   • Enter a descriptive name for the title. This is only for your reference and is not used while executing the shortcode.
   • In the main editor, enter the HTML code needed to display your custom header image.Example:

     <a href="http://localhost/builder3/"><img src="http://localhost/builder3/wp-content/themes/BuilderChild-Expansion-Blue/images/header.jpg" alt="Home" width="960" height="150" /></a>

   • Leave the “ShortCode Type” setting as “Simple Snippet”.
   • Enter a ShortCode Tag. This is the string that we place within square brackets to execute (call) this shortcode.
     
     
   • Click Publish.
3. Now add a HTML module wherever you want to the custom header image to appear and place the shortcode tag surrounded by square brackets.
   Ex.: [sc_header]
   
   

Output on the webpage:

As you may probably be thinking, the output can simply be achieved by using a Image module but then it will not have the advantage of “update in one place – change everywhere”.

I won’t go into the various options this plugin offers Builder users, but suffice it to say that this plugin is all you will need to host an event. In addition, Events Block is built to support Gravity Forms for registration. These two plugins combined turn you into the Leslie Knope of event planning! We also added the ability to use Eventbrite widgets on your site, but we prefer Gravity Forms because you will never need to leave your WordPress dashboard!

Video Overview

We do hope you enjoy this Event Block and you can expect more blocks in the future (including updates to our current blocks).

Making text look identical on all browsers and on all operating systems (Windows, OS X, Linux, etc) is nearly impossible. Each browser has it’s own default font family, font size, etc that it uses. Each operating system comes with a different set of default system fonts. Users are free to add fonts to their system, further complicating the landscape of available fonts.

In other words, just because a font shows up for you on your installation of a specific operating system in a specific browser does not mean that another user will be able to see the same font on their computer, operating system, browser, etc. Just because some text fits inside of a 500×200 pixel box on your browser doesn’t mean that it will on everyone’s browser.

Since no web developer can rely upon a single font being available to every visitor to a site, the idea of a font stack was created. A font stack is simply a comma-separated list of font families which creates a list of fallback font families. If the first font family isn’t available, the browser will try to use the next one. If an available font family is unable to be found, the browser’s default font family will be used.

The following is an example of such a font stack:

'Helvetica Neue', Arial, Helvetica, sans-serif

This font stack says that Helvetica Neue should be used first. If it isn’t available, use Arial. Next up is Helvetica. Finally, if none of them are available, the generic sans-serif font family will be used.

The generic font families allow for a generic name that every browser will understand and support. Of course, the specific font used by each browser for a generic font family differs. Each font stack should end with a generic font family in order to ensure that the desired type of font family is used. The available generic font families are serif, sans-serif, cursive, fantasy, monospace.

Font stacks are typically constructed to have a consistent x-height (the height of a lowercase “x”). This is so that the height of the text can be consistently known. While x-heights can typically be matched with a good level of certainty, the width of the different characters can vary widely. This means that while you can keep the height of each line of text consistent, you cannot rely on knowing the length of the text. This also means that you can’t know how many lines the text will fill since the width varies. This is an unavoidable issue.

The following image is a good example of this in action. It uses the font stack currently used on Microsoft.com — "Segoe UI", Tahoma, Arial, Verdana, sans-serif — with each font family of the stack shown on a line.

Notice how each line is a different length. Verdana seems to render each character a bit wider with a bit more space between each character. This causes it to use much more horizontal space than any of the others in the font stack.

So how does this affect you and your themes? There are two primary takeaways:

1. Always use a well-designed font stack when setting the font-family in your style sheets.
2. Never assume that you know exactly how large text will render.

So, rather than doing this:

body {
    font-family: Helvetica;
}
h1, h2, h3 {
    font-family: Georgia;
}

Do this:

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
    font-family: Georgia, Times, 'Times New Roman', serif;
}

When I’m just getting started with a font stack, I will test it on as many systems and browsers as I can get my hands on. I will then remove the first font family from the stack and look at the site again. I will keep doing this until I get down to the last font family. This gives me a good feel for how the text and the overall site will look when rendered with the different font families and helps me make sure that I didn’t make anything size dependent that may break on someone else’s browser.

Of course, this still leaves the question of where you can get font stacks from. If you are an amazing typographer with an intimate knowledge of the different typefaces, I say go for building your own. If you are like me and would prefer trusting someone else’s to design robust font stacks, check out the following resources. They will give you a great starting point.

• Revised Font Stack – There is a listing of font stacks towards the bottom of the post. The case studies are interesting as well and should be read if you want to get a better understanding of how font stacks work and why some orders of font families make more sense than others.
• CSSFontStack.com – A straightforward listing of font stacks built around a starter font family.
• Better CSS Font Stacks – A description on how to construct font stacks. It includes details on what makes for a good body copy font stack versus a good title font stack.
• The myth of web-safe fonts – Description of two serif, two sans-serif, and one monospace font stack.
• Guide to CSS Font Stacks: Techniques and Resources – A Smashing Magazine post on the topic with links to many additional resources.

Additional resources used to create this post:

• Fonts: 15.3 Font family: the ‘font-family’ property – W3C formal spec for the font-family property.
• Code Style: Font Stack Builder – A tool for generating font stacks.

We’re still trying to figure out the best balance between technical articles and theory articles such as this one. If you liked this article and would like to see more articles talking about the theory and techniques behind web design and development, please let us know in the comments.

If you have yet to check out Yukon, visit the demo and tell us what you think in the comments below!

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.

Step One: Grab Your Icons

The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.

Step Two: Add a Custom Link to your Menu

Edit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.

Step Three: Turn CSS Classes for Menu Items

At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.

Step Four: Assign a Custom Class to the Twitter Menu Item

Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.

Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.

Step Five: Adding the Icon to the Menu

At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.

Use the following code:

.menu-twitter {
	text-indent: -9999px;
	background-image: url(images/twitter.png) !important;
	background-repeat: no-repeat !important;
	margin-left: 100px !important;
	width: 50px;
}

Here’s an explanation of the code:

• The .menu-twitter class is what we added to the custom menu in step four.
• Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
• Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
• Background-Repeat ensures that the icon only displays once.
• Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
• Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.

Here are the Results

Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!

Making it Portable

The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like http://yourdomain.com/social) then change the link in the css for the icon to this new location as below:

background-image: url(http://yourdomain.com/social/twitter.png) !important;

The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.

This tutorial will walk you through how to add new items (search field, social links, an image of your pet cat) to not only EVERY menu, but also individual menus within Builder. What this tutorial won’t teach you is how to be cool (but let’s face it, you’re already cool because you’ve read this far).

Getting Started

This tutorial does require that you have a base knowledge of how to edit template files (specifically the functions.php file) and style Builder using custom CSS. If you do not know how to do these things, you may want to head over to WebDesign.com and start learning (trust me, it’s totally worth it). In addition, we are assuming that you love WordPress & iThemes and also own and use Builder… I think this is obvious.

Please note that all code below needs to be placed in the functions.php file of your current child theme.

Adding an Item to Every WordPress Menu

As mentioned before, WordPress provides a very simple filter (wp_nav_menu_items) for adding items to menus. Keep in mind that this only works for menus built with the WordPress menu system. For you curious folk, wp_nav_menu_items filter is located in wp-includes/nav-menu-template.php.

Setting up the code to add items is simple. Here is an example:

function add_nav_menu_items( $items, $args ) {

	$items .= '<li id="menu-item-twitter" class="menu-item menu-item-type-social menu-item-twitter"><a href="http://twitter.com/ithemesbuilder">Twitter</a></li>';

	return $items;
}
add_filter('wp_nav_menu_items','add_nav_menu_items', 10, 2);

Here are some screenshots of the output:

If you wanted to add more than just one link, add more items to the code. Here is an example:

function add_nav_menu_items( $items, $args ) {

	$items .= '<li id="menu-item-twitter" class="menu-item menu-item-type-social menu-item-twitter"><a href="http://twitter.com/ithemesbuilder">Twitter</a></li>';
	$items .= '<li id="menu-item-facebook" class="menu-item menu-item-type-social menu-item-facebook"><a href="http://facebook.com/ithemes">Facebook</a></li>';
	$items .= '<li id="menu-item-ithemes" class="menu-item menu-item-type-link menu-item-ithemes"><a href="http://ithemes.com/">iThemes</a></li>';

	return $items;
}
add_filter('wp_nav_menu_items','add_nav_menu_items', 10, 2);

Notice the two additional $items added to the function. This will output two additional links along side Twitter.

The links will always output at the end of the menu. In addition, you can use any classes you like, I used the classes above because they are similar to the default WordPress classes.

While the above code adds new items to ALL WordPress menus used in Builder’s navigation modules, this may not be the desired effect. For example, what if you wanted to add social links to one menu, a search form to another, and a picture of your pet cat to yet another! After all, Builder does provide an unlimited amount of menus you could add to your site.

Adding items to a specific menu

Building off our previous code, all you need to do is declare where to add the menu when using the wp_nav_menu_items filter. This is easily accomplished by adding the menu slug between menu and items of the filter. For example, if your menu is named Main, then the filter would change from wp_nav_menu_items to wp_nav_menu_main_items.

Here is an example of the new function:

function add_nav_menu_items( $items, $args ) {

	$items .= '<li id="menu-item-twitter" class="menu-item menu-item-type-social menu-item-twitter"><a href="http://twitter.com/ithemesbuilder">Twitter</a></li>';
	$items .= '<li id="menu-item-facebook" class="menu-item menu-item-type-social menu-item-facebook"><a href="http://facebook.com/ithemes">Facebook</a></li>';
	$items .= '<li id="menu-item-ithemes" class="menu-item menu-item-type-link menu-item-ithemes"><a href="http://ithemes.com/">iThemes</a></li>';

	return $items;
}
add_filter('wp_nav_menu_main_items','add_nav_menu_items', 10, 2);

If your menu is named Main Top Menu, then the out put would change from wp_nav_menu_items to wp_nav_menu_main-top-menu_items.

Here is an example of the new filter:

add_filter('wp_nav_menu_main-top-menu_items','add_nav_menu_items', 10, 2);

As you can see, we are surely on our way to adding stuff to Builder’s menus. While links are cool and all, let go even further by adding a search field and (you guessed it) a picture of your pet cat! Woop!

Adding a Search Form and Our Pet Cat to Menus

The code for adding these items is exactly the same as described above. I am going to use two separate menus (Main & Secondary) to add my items. Check out my new search field and pet cat in my menus!

Here is the code needed to achieve the above effect:

function add_nav_menu_search_items( $items, $args ) {

	ob_start();
	get_search_form();
	$searchform = ob_get_contents();
	ob_end_clean();

	$items .= '<li id="menu-item-search" class="menu-item menu-item-type-search menu-item-search">' . $searchform . '</li>';

	return $items;
}
add_filter('wp_nav_menu_main_items','add_nav_menu_search_items', 10, 2);

function add_nav_menu_pet_items( $items, $args ) {

	$items .= '<li id="menu-item-pet-cat" class="menu-item menu-item-type-image menu-item-pet-cat"><img src="http://justin.internal.ithemes.com/wp-content/uploads/2012/03/pet-images.jpg" alt="pet cat" /></li>';

	return $items;
}
add_filter('wp_nav_menu_secondary_items','add_nav_menu_pet_items', 10, 2);

Notice that the search code is a little different that the pet image code. This is because we need to prepare the search form with an output buffer (ob_start()) in order to output the correct html. I won’t bore you with the details of why an output buffer is needed, just know that it produces awesomeness.

Wrapping Up

By now you should be well on your way to adding loads of items to your menus! As you can see, adding items can be both fun and easy!

I am sure you noticed that I did not provide any styles for this post. This is because there is an unlimited amount of options available for users to style their new links. As a challenge to you, start adding new items, style them, then share your styles in the comments below! We are anxious to see what you come up with!

Then most themes simply add many page templates to give users the effect of moving around elements on a webpage. However, Builder changed all that by inventing a layout engine that allows users to create unlimited layouts easily and efficiently.

Fast forward to today and now Builder has an amazing community that we want to celebrate by sharing a central location for Builder users to come share ideas, stories and more.

We hope you find this community a useful source of information and help contribute to its growth.

Activating and Setting Up Maintenance Mode

First you will need to download and activate Maintenance mode. Once activate, head over to the maintenance mode admin page (under the Settings menu). Here we will activate maintenance mode and select the 503.php to be used as the splash page (we add the template file later). In addition to selecting the splash page, we will also need to set what paths will still be accessible. Although you can name any path here, we are only going to add /launch/ for demonstration purposes. Click save and you’re done.

Setting Up Builder

Once you have maintenance mode set up, you’ll need create a new layout in Builder. For demonstration purposes we will name this layout Launch. Here you can add any modules that you want to show up on your launch page.

Once we have the layout set, we will need to add a new template file to your child theme. Simply open up your FTP and drop in a new file (named 503.php) right in the main directory. Next, open up this file and add the following code:

<?php
wp_redirect( get_bloginfo( 'url' ) . '/launch/', 302 );
exit;
?>

This will redirect any requests to your site to the launch page, once we create it.

Creating the Launch Page

This step is the easiest. Simply create a page in WordPress and select Launch as the custom layout for this page. Now all your users will see your custom Launch layout.

Creating custom layouts and applying them to pages is one of the strengths of Builder. One can easily have numerous layouts on his/her site with a few quick customizations.

Wrapping it Up

Creating a launch page for you site is a great way to create pre-launch awareness, add sign-up forms or simply let users know you are coming soon. With the power of Builder and a dash of maintenance mode, creating a launch page is a cinch.