So very true.

Photo of slide from Ted Rheingold’s talk at Big Omaha 2012

…can you think of any job where people are making really complex things by hand, and which requires a ton of experience and training to be good at, yet everyone and their uncle has an opinion on how long a project should take to get done? Why is it that no matter how long a project takes, the customer always thinks it should be faster or cheaper?

via Scott Porad’s post “Why do web sites and software take so long to build? And why is it so hard?”

Tickets for WordCamp Milwaukee are still available for only $20.00 a person. Purchase a ticket now.

My topic will be customizing WordPress menus (in a slightly modified version of my talk at WordCamp Atlanta), or as I have titled it…

Zazzy WordPress Menus with CSS Tricks and jQuery Magic

Navigation is among the most important elements of a website’s design. Effective navigation allows visitors to quickly and easily find desired content, keeping them on your site.

The session will begin with a review of the custom menu structuring from within WordPress, including how to extend the flexibility of the Menus screen with available screen options. Then we will move onto how you can style your navigation menu with modifications to your theme’s CSS stylesheet. We will cover:

• using and styling submenus
• adding icons to navigation items
• changing the formatting of hovered or active items
• adding support for menu item descriptions

Finally, I will demonstrate a few more advanced techniques using jQuery and CSS that can improve your visitor’s experience and improve conversions.

• Split long drop-down menus into columns
• Add accordion effects to sidebar custom menus
• Fly-out text to add context to menu items

More

Why zazzy?
Did you notice 6 of the 14 speakers are female

Often I cannot think (or do not know) of a specific developer that meets the needs of the project. I want to be helpful, so I do the next best thing. I suggest three resources that list quality WordPress developers:

WP Candy Pros

WP Candy, the WordPress news and information blog, hosts the most complete directory of WordPress professionals. The directory can be filtered by region, specialty and price range.

WP Engine’s Consultants

The specialized WordPress hosting service, WP Engine recently started their own consultants/developers list that includes specialties, bios, price-ranges and contact information. The consultants/developers WP Engine lists are hand-picked as resources to recommend to their own hosting clients.

Code Poet Directory

Automattic, the company behind WordPress, maintains the Code Poet Directory. The companies and individuals in the directory can be filtered by region, specialty, platform and price-ranges. Those listed are considered to be enterprise-level WordPress professionals, web designers and developers.

I have never found a WordPress social sharing plugin that I loved. I just wanted a simple social plugin that would load any external scripts asynchronously, allowed me to share my posts on Twitter, Google+, Linkedin and Hacker News and never included the words “Sharing is sexy!“.

A few weeks ago I started working on developing my own social sharing plugin, and today it is available to the public via Github.

Download from Github

I hope to have the plugin approved and available via the WordPress plugin repository within the next week.

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

Features

The Async Social Sharing plugin loads the third-party social scripts asynchronously to improve site performance.

The plugin allows you to display the following sharing widgets:

• Twitter
• Facebook
• Google+
• Linkedin
• Hacker News

An options panel is provided to allow unwanted social widgets to be disabled:

Why is Asynchronous script loading better?

Asynchronous loading allows multiple files to load parallel to each other. Instead of having to wait for Twitter to respond with their script, the browser moves on and starts fetching the next request.

Credits

JavaScript code was inspired by Stoyan Stefanov’s Social Button BFFs blog post.
HackerNews button code by Ilya Grigorik

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

Sunburst Code Prettify uses Google Code Prettify, a JavaScript module and CSS file that allows syntax highlighting of source code snippets. This plugin contains the CSS file for the Sunburst theme syntax highlighting formatting. You can find the other available syntax highlighting themes available in the Code Prettify Theme Gallery

Download from WordPress.org

HTML Example

<div class="span4">
<h2>Reset via Normalize</h2>
As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>.
The new reset can still be found in <strong>reset.less</strong>, but with many elements removed for brevity and accuracy.
</div>
<!-- /.span -->

CSS Example

body {
text-align: left;
color: #222;
font-size:1.6em; /* 16 px equiv */
line-height: 1.5em; /* 24px equiv */
position: relative;
background-color: #22252E;
background-image: url(../halfbaked/images/linen.png);
background-repeat: repeat;
padding-top: 4.5em;
}

PHP Examples

if (have_posts()) : while (have_posts()) : the_post();   

 $ideas_posts = $wpdb->get_results(
"SELECT * FROM $wpdb->posts
WHERE post_status = 'draft'
AND post_type = 'post' ORDER BY post_date DESC");

foreach ($ideas_posts as $memberpost):

JavaScript Example

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

Ruby Example

    # Formats date either as ordinal or by given date format
    # Adds %o as ordinal representation of the day
def format_date(date, format)
    date = datetime(date)
    if format.nil? || format.empty? || format == "ordinal"
        date_formatted = ordinalize(date)
    else
        date_formatted = date.strftime(format)
        date_formatted.gsub!(/%o/, ordinal(date.strftime('%e').to_i))
    end
    date_formatted
end

On January 31st, Twitter released version 2.0 of their popular Bootstrap framework complete with a responsive stylesheet and new components. I have been working to keep BootstrapWP, the WordPress theme for Bootstrap as up to date as possible.

If you have been using any previous versions of the BootstrapWP for theme development, I encourage you to switch to the development branch on Github. The development branch contains many bug fixes along with overall style and device response improvements.

Usage: Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need

All development updates are displayed on the Demo site: http://www.rachelbaker.me/bootstrapwp/

BootstrapWP Development Change Log

Header.php

• Added body data attributes: data-spy=“scroll” data-target=“.subnav” data-offset=“50” data-rendering=“true”

• Changed navbar class to Bootstrap default of “navbar-fixed-top”

• Updated wp_nav_menu function array, added “‘container’ => ‘div’, ‘container_class’ => ‘nav-collapse’,” to provide div wrapper with proper class

Functions.php

• Added bootstrap-responsive.css to bootstrapwp_css_loader function

• Added application.js to bootstrapwp_js_loader function and removed tablesorter.js

• Revised pagination section to use ul class=“pager” instead of div id=“pagination”

Page-JSGuide.php

• Updated Javascript Guide Template to match content from Bootstrap javascript.html file

Footer.php

• Removed jQuery onload functions that are now all called in application.js

• Added jQuery append function to automatically apply b class=“caret” to dropdown menu items in navbar

Style.css

• Updated icon image location to match theme setup

• Added .icon-white class with corrected image location

• Removed over-ride of body padding to allow correct spacing with fixed navbar

• Added styles for comment form

• Added color primary button colors for comment and search submit buttons

Index.php

• Edited content on index.php template to directly correlate with index.html Bootstrap file

Other/Misc.

• Updated CSS and JS files to Bootstrap 2 Final Release files

• Removed “lib” folder and replaced with Bootstrap “less” folder

• Removed tablesorter.js file – as it is no longer used in Bootstrap 2.0

• Removed wordpress.css file – as it is no longer used in Bootstrap 2.0

I am really looking forward to speaking and attending WordCamp Atlanta this week. WordCamps are always fun events, where two days are spent talking and learning about WordPress. I am particularly excited to be traveling to Atlanta, the home to the World of (Diet) Coke and the world’s best chicken and waffles.

I will be speaking on Friday afternoon with a presentation titled “Website Navigation Menu Styling Tips and Best Practices“.

Hope to see you there!

Gosh, I wonder why I had to search for these instructions…

I released Bootstrapwp, a powerful base WordPress theme powered by Bootstrap. Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components. Now you can use it with WordPress as a solid base to build custom themes quickly and easily.

Latest version release: .7 (01/22/2012)

You can view a demo of the Bootstrapwp theme running on WordPress at: http://rachelbaker.me/bootstrapwp/
View the style guide: http://rachelbaker.me/bootstrapwp/style-guide/
View the Javascript guide: http://rachelbaker.me/bootstrapwp/javascript-for-bootstrap/

Usage Instructions

1. Download the Bootstrapwp theme, and install to your WordPress site. NOTE: This is meant to be a base theme for WordPress custom theme development.
2. Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need.

Download from Github

Version .7 Change Log

• Updated JS and CSS/LESS files from Twitter Bootstrap 2.0 WIP files (up to date as of January 20, 2012)
• Moved all CSS and JS files to their respective /css and /js folders
• The LESS files still exist in the /lib folder, but the bootstrap.css file is in the /css folder
• Replaced bootstrap-twipsy.js file with NEW bootstrap-tooltip.js file
• Modified enqueue_style order, and added style.css to the function to ensure it would be loaded last.
• Moved all Bootstrap documentation styles to their own docs.css file, and reserved styles.css for WordPress related modifications
• Created template for Javascript Demo page, needed onload scripts for Demo page were added in footer.php
• Moved Style Guide to it’s own template file
• Moved Assets folder to root of theme folder with images folder
• Any added custom styles can now be found in style.css file
• Added custom jQuery to footer.php to allow the WordPress custom menus to work with the Bootstrap dropdown styles/js files.
• Removed Custom Walker Class from navigation menu. It is not needed, with jQuery adding the needed class changes instead.
• Added image alignments (.alignleft, .alignright, .aligncenter) styles to styles.css
• Added styles to 404.php template file
• Added styles to search.php template file
• Added search form styles to style.css file
• Added $content_width declaration to functions.php