Archives for August 2013

Custom Excerpt Placeholder for Events Manager

This PHP snippet creates a #_CUSTOMEXCERPT placeholder to be used with the Events Manager plugin. Just throw it in functions.php, and you can then use #_CUSTOMEXCERPT in place of #_EVENTEXCERPT in your event/list templates.

The snippet has two variables you may wish to edit:

  • $strip_HTML – whether or not to remove HTML tags from the custom excerpt. Be careful if setting this to false, as this can cut off in the middle of your tag attributes (e.g., <img src=”/wp-content/uploa” />)
  • $length – the length of your custom excerpt (characters)

Another Successful Website Weekend!

mugsyLast Weekend, the minnows gathered with 8 eager students to take on the challenging but exciting task of creating websites for each student over the weekend! We feel that it was a great success and we’re excited that this was the third Website Weekend in a row to sell out. With it came some great new projects (case studies coming soon!) and some amazing new relationships. We love this workshop and the opportunity it gives us to empower our students to take control of their web presence and build new businesses online.

raven bike

We also had a very special student this weekend, Mugsy! Not all dogs are a good fit for a workshop like this, but Mugsy is an absolute gentleman and he was a great addition to the class.

I really enjoyed the class–I found it fascinating, and it gave me new insight into why it’s so expensive to build a website! I can’t believe how much I learned. I thought you did a fantastic job teaching the class, and splitting up your time with the different students. Not an easy task… I am really pleased with the site too. I think it looks very professional, which is what I was going for. I will enjoy tinkering with it, adding the photos and more text… Pretty amazing, that I could find you just by a Google search and come away with such a great product. I will be in touch for sure. And, I will highly recommend you to everyone I know!

Lisa L.Website Weekend Student

Contortionist on BART

Unrelated to work or web, we saw (and captured video of) these amazing performers on BART last night. While not everyone seems to enjoy having the BART car they are riding in transformed into a performance art space, we have to admit, we do. Especially when the performance is this impressive. The SFWeekly’s Snitch (Erin Sherbert) even picked it up! If anyone know who these fellas are, let us know so that we can give them credit. And yes, of course, we tipped them.

Our Favorite Plugins: Post Thumbnail Editor

WordPress uses thumbnail images for lots of things, including to accompany blog posts as on our blog page. These images are automatically cropped from whatever larger image you upload, so that they are all a uniform shape. This is great, except when it isn’t. Sometimes cutting a square out of the middle of an image gives you a useful and compelling snippet, but sometimes it ends up being a part of the image that can’t stand alone (like just a picture of someone’s butt, for example). In the media library, you can go into edit the image, and apply whatever changes you make just to the thumbnail, and this is useful. But it only takes you so far. A lot of themes have many additional image sizes specified in the theme files, and the built in image editor in WordPress doesn’t allow you to treat each image size as a separate case and to crop them independently. Enter our newfound favorite plugin: Post Thumbnail Editor. It allows you to quickly and easily crop any and all sizes of images in your media library, and each of the crops can be tailored to the dimensions of the image. Sweet! post thumbnail editor

Our New Mobile First Child Theme for Genesis 2.0+

[box type=”download”]

Mobile First Genesis 2.0 Child Theme

Download our new Mobile First Child Theme for Genesis 2.0. The theme looks and feels identical to the Genesis 2.0 Sample Theme, however it has been optimized with a “Mobile First” approach, meaning faster load times and an overall better experience for mobile users. Download Now » See Demo »[/box]


We’ve long been huge fans of the Genesis Framework – it integrates with tons of well-designed child themes, it offers lots of amazing functionality and plugins, and the StudioPress support team is consistently speedy and helpful. One thing we’ve always wanted, however, is a basic Genesis child theme that is “Mobile First.” So we decided to go ahead and make our own! We wanted to keep things as simple as possible, so we started with the Genesis 2.0 Sample Theme and went from there. Most of the work just involved rearranging CSS, however you may want to check out the full list of details below for more information.

Theme Details

    • Requires Genesis 2.0+.
    • All media queries have been switched from “max-width” to “min-width”.
    • Media queries have been rearranged to proceed from smallest to largest widths.
    • Only two changes were made to the original CSS to preserve styling after rearranging the media queries:
      • Line 700: .sidebar .enews-widget was changed to .sidebar .widget.enews-widget
      • Line 1366-67: the margin-top selector was changed to margin
    • This theme’s functions.php is identical to that in the Genesis 2.0 Sample Theme, only difference being the child theme name, url, and version definitions. It adds theme support for:
      • HTML5
      • Responsive viewport meta tag
      • Custom background
      • 3-column footer widgets

Important Note

Being as this theme utilizes mobile first media queries, you’ll need to utilize a polyfill if you want the theme to appear correctly in Internet Explorer 8 and below. Here are a few options:


  1. Install Genesis 2.0. If don’t already have Genesis, you might want to get it.
  2. Download the Mobile First Child Theme for Genesis 2.0.
  3. Install the the child theme, either manually or via WordPress’ theme installer.
  4. Activate the child theme.
  5. Feel free to modify the child theme’s CSS and PHP to create your own unique look and feel.
  6. All done!

Change Log

  • 1.4
    • Fixed nav extras CSS to better display search bar.
  • 1.3
    • Moved .first {} CSS rule into media queries where it belongs (thanks again @GaryJ)
  • 1.2
    • Added missing width: 100%; rule for full width content
    • Added missing float: right; rule for .content div
  • 1.1
    • Updated style.css table of contents to reflect new media queries (thanks @GaryJ)


We’d love to hear it. Please let us know if you have any comments or suggestions below. Thanks!

Two amazing tools to find and edit images

In our most recent weekly team meeting, one of our minnows pointed out to the team two very awesome tools that will make our lives and our clients’ lives much easier. The first is an image search tool and the second is an image editing tool. Both are online, fast, and best of all – free!

Creative Commons Search

Creative Commons Search is a tool that allows you to search through various image search engines and look for images with licenses that allow you to use them commercially and/or modify, adapt, or build on to them. This is such a great alternative to Google Images because you know that these can be used on your website, for free, and do not have to worry about getting in trouble. Screen Shot 2013-08-12 at 10.26.13 AM

Clipping Magic

One technique that is often used when we are building websites is taking an image and removing the background. Clipping Magic is an alternative to the expensive, often confusing to navigate, Photoshop. Simply mark the area that you would like to keep with green and the area you would like to remove with red and in live time, this tool will allow you to take out the background!Screen Shot 2013-08-13 at 10.09.48 AM

Our Favorite WordPress Plugins Part 1

As you may know, WordPress has some core features included in every WordPress installation, but you can add additional features to WordPress sites by installing “Plugins”. We have decided to compile a list of some of our favorite plugins – those that have proved especially helpful (super time savers or things that help us sleep at night). We have installed these plugins on many a WordPress website and can say with great confidence (at time of publishing) that these plugins are pretty awesome. All most are free, some have premium (or paid) versions that add extra features. We will be making this a 10 (or more?) part series. First up: Black Studio TinyMCE

Black Studio TinyMCE Widget

What would we do without the “Black Studio TinyMCE Widget” plugin? We would hand-write a lot more HTML, that’s for sure! And we’d have a harder time making the sidebars on our websites easy for our (non-HTML-savvy) clients to maintain. Black Studio’s enhanced text widget that adds a WYSIWYG editor option as an alternative with TinyMCE buttons up top for inserting images, making links, adding lists and setting headings. Now you can add rich content to your sidebars as easily as you can add it to your posts and pages. The most advantageous thing about this plugin – to us – is that this plugin allows for our clients and students to be able to interact and maintain their widget content without having to know HTML. We know how to code by hand if needed, but we don’t expect that our clients (or students) should need to. We <3 this plugin. Example of Black Studio TinyMCE widget

Add Expanding “Read More” Links to Your WordPress Blog

Here’s a handy jQuery/CSS snippet that adds special “read more” links to expand and hide your WordPress blog posts, accordion style. This is pretty useful if your blog page is spitting out a bunch of long posts, and you’d like to consolidate some space. The code is set to work with default WordPress classes and ID’s, however it can be easily modified to work on any HTML. Enjoy!

Check out this Pen!

Bay Area Web Freelancers are SMART!

Last night we hosted the latest Bay Area Web Freelancers’ Meetup, where we shared tools of our trade. Everyone who had something to share just plugged into the projector and showed off the stuff they like. We already have better productivity, less eye strain, safer WordPress sites and an overall better outlook. Below are the tools that were shared, and thanks to Luke McCormick for making the list!

Alfred Alfred is a productivity application for Mac OS X, which aims to save you time in searching your local computer and the web.

MacVim MacVim is the text editor Vim for Mac OS X.

Moom Tool to easily arrange windows on Mac using your keyboard

Bug Herd Allows you to bug track by placing pins on your website where issues exist and assigning those issues to teammates

Trello Collaborative organizing tool. Similar to Asana or Eventbrite?

Push Pin Planner For resource planning helpful in managing the time allocation of a team

Blog Vault WordPress website backups

Web Flow New responsive web design tool no one has tried yet. Similar to Adobe Edge Reflow?

Node JS For building scalable network applications in JavaScript.

Yeoman Comprised of three tools for improving your productivity and satisfaction when building a web app: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).

Yo CLI tool for scaffolding out Yeoman projects.

Grunt An automated JavaScript task runner.

Bower Package manager by Twitter.

Code Kit Steroids for (front end) web developers.

Phabricator Bug tracker from Facebook. Includes code review, wiki and more.

WorkFlowy Way to organize your brain into nested lists.

Sublime Text Sublime Text is a sophisticated text editor for code, markup and prose.

Emmet Sublime plugin to improve html/css workflow.

Sublime SFTP Adds direct SFTP access to Sublime.

Underscore.js A JavaScript utility library.

Lo-Dash A low level utility library delivering consistency, customization, performance, and extra features.

D3 A JavaScript library for manipulating documents based on data using HTML, SVG and CSS.

JS Bin JS Bin is a JavaScript, HTML and CSS playground.

JS Fiddle JavaScript and CSS testing interface.

Bit Bucket Like Github, but private and free, from the Jira people.

Groundwork… Responsive design framework.

Font Awesome… Font-based icons.

Chrometa Automatically track of your time, especially billable time.

Flux Automatically adjust your computer’s brightness and color palette based on time of day to ease eye strain.

One Tab… Collect Chome tabs into a drop down menu to simplify your interface and save memory.

Org Mode An Emacs add-in for keeping outlines of notes.

Linode Xen VPS web hosting company.

Digital Ocean Scalable SSD cloud virtual servers.

Amazon Web Services Scalable computing platform (hosting).