Author Archive for Benjamin – Page 2

Resizing the WordPress Excerpt Box

wordpress-logo-hoz-rgb

This is a regular occurrence. You or your client are using a theme that takes advantage of the excerpt box in the WordPress post editor to display unique content in different locations of the theme. But each time you go to the WordPress editor page you always have to adjust the size of the excerpt meta box because its always too small. If this is something that has happened to you... there is an easy fix. This code goes in your active theme's functions.php file and will automatically adjust the size of the excerpt meta box for you.

function excerpt_textarea_height() {
    echo'
    <style type="text/css">
        #excerpt{ height:500px; }
    </style>
    ';
}
add_action('admin_head', 'excerpt_textarea_height');
Comments (3)
Categories : Code Snippets, WordPress, WordPress Hack
Tags : ,

Stop WordPress from Compressing JPGs

Did you know that WordPress compresses your jpg files? Well, if you down want any loss of quality of your images... especially if you are sharing some photographs, add this line of code to your active theme's functions.php file.

add_filter('jpeg_quality', function($arg){return 100;});

Now the jpg files you upload will be the exact file you upload, not some compressed version.

Comments (6)
Categories : Code Snippets, WordPress, WordPress Tweak
Tags : , ,

Friday Tweet Recap

If you are not following me on twitter, you have probably missed out on some interesting and creative links that would be helpful in your web development career. So this is the weekly Tweet recap, so you don't miss out on some cool stuff. I don't highlight all the tweets of the past week, just the best of the best.

Also don't forget that iThemes.com released a sneak peak at the upcoming Builder Events Block, I posted a how-to on adding per-post CSS to WordPress, WordPress 3.4 Beta 2 was released, and my wife figured out the secret to truly great housekeeping.

Stay tuned to Twitter, Google+, Linkedin, Facebook, and this site to get some quality tips about what's happening in the tech world.

Comments (0)
Categories : Recap
Tags :

CSS Snippet – Multiple Backgrounds

csscode

Example Code

.element {
   background: url(images/image1.png) center center no-repeat,
               url(images/image2.png) top left repeat;
}

What the Code is Doing...

In our background declaration of the element selector, we are assigning image1.png to appear in the center (horizontally) and the center (vertically) without repeating. Then before we end the background declaration, we add an additional image, image2.png, to start at the top-left of the browser and repeat continuously.

Browser Support

The following browsers support multiple backgrounds:

Read More→
Comments (0)
Categories : Code Snippets, CSS
Tags :

Do you forget to set your featured image in WordPress?

wordpress-logo-hoz-rgb

If you are anything like me or have a client who is like me, this code will help you tremendously. If you ever forget to set a the featured image (post thumbnail) in your WordPress post, this code will automatically grab the first image in your post and set it as your featured image. You can simply drop this code into your active theme's functions.php file and you are all set.

function autoset_featuredimage() {
	global $post;
	$already_has_thumb = has_post_thumbnail($post->ID);
		if (!$already_has_thumb)  {
		$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
			if ($attached_image) {
				foreach ($attached_image as $attachment_id => $attachment) {
				set_post_thumbnail($post->ID, $attachment_id);
			}
		}
	}
} 
add_action('the_post', 'autoset_featuredimage');
add_action('save_post', 'autoset_featuredimage');
add_action('draft_to_publish', 'autoset_featuredimage');
add_action('new_to_publish', 'autoset_featuredimage');
add_action('pending_to_publish', 'autoset_featuredimage');
add_action('future_to_publish', 'autoset_featuredimage');

Now your clients don't have to mess up your nice custom built front page that utilizes featured images from posts when they forget to set the image.

Comments (0)
Categories : Code Snippets, WordPress, WordPress Hack
Tags : , ,

Adding Per-Post CSS to WordPress

customcss

Sometimes when I'm creating a post or a page in WordPress, I want to do something specific with CSS. And I really don't want to jump back and forth with Coda, my editor. So, I decided to use this little piece of code to create a Custom CSS Meta Box appear right under my WordPress post/page editor that would allow me to type my CSS selectors and declarations right on the post/page. Now, the CSS I place in the Custom CSS Meta Box will ONLY appear on that specific page or post. This idea is accomplished in four little PHP functions that can be placed in your active theme's functions.php file.

The first function creates the ability to add the meta boxes to the pages and posts. ProTip: Just add additional lines of code to add this meta box to Custom Post Types.

function bb_custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}

The next function creates the text areas of the meta box so that we can input our custom css. It also ties the CSS typed into the meta box to that specific post/page ID.

function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}

Then we need to be able to save the CSS that we type into the meta box, so we add the content from the Custom CSS meta box to the post meta area.

function bb_save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}

Now we need a way to insert the correct Custom CSS into the header of the specific page or post that has content entered into the Custom CSS meta box.

function bb_insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

Finally, we hook all of these functions into the necessary WordPress hooks using add_action.

add_action('admin_menu', 'bb_custom_css_hooks');
add_action('save_post', 'bb_save_custom_css');
add_action('wp_head','bb_insert_custom_css');

If you want the full code, I've made a PasteBin file for all to use.

Comments (4)
Categories : Code Snippets, WordPress
Tags : ,

Chrome Browser Extensions for Web Developers

chrome

As many of you know, I use the Chrome browser heavily in my development workflow. Combined with the strong webkit layout engine and some very useful extensions (plugins) the web development process is made easier with Chrome. I thought I would share some of my favorite Chrome extensions, so that everyone else can benefit as well.

Web Developers

The Web Developer extension places a toolbar icon on the browser that will open up a number of tools that are useful for developers. Tools that interact with CSS, forms, images, provide information, resizing, rulers and much more. This is the official port of the Web Developer addon for Firefox.

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page.

Sight

The Sight extension makes reading source code on the browser much easier by providing syntax highlighting.

Firebug Lite

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.

Don't forget the super powerful Chrome Inspector that is built into Chrome, where you can do so many things in your development workflow.

Comments (0)
Categories : Tools, WebDev
Tags :

Free Alternatives to Instagram

hipster

If you are one of the thousands of Instagram users who are deleting their Instagram accounts now that Facebook has acquired Instagram for a staggering $1 Billion, you might be on the lookout for some great free alternatives. Here are three great (FREE) alternatives.

Hipster

Android | iOS

Hipster is a fun way to share where you are and what you're doing. Using Hipster you are able to create and send beautiful photographic postcards. Your postcards will be composed of a photo, text, location, and more, which will provide a window into what you are currently experiencing. Through postcards, Hipster creates a real-time, visual record of locations and events all around the world.

Features:

  • Choose your postcard style from many gorgeous themes.
  • Share your postcards on Facebook, Twitter, Tumblr, Foursquare and Flickr.
  • Keep track of where your friends are and what they are doing.
  • View the most interesting postcards that were sent from your location.
  • Tag the friends who are in your postcards.
  • Signup with Facebook or email (tap the more button).

Pixlr-o-matic

Android | iOS

You can add fun retro effects to your photos in a snap and transform your photos into cool looking vintage images. Editing is as easy as one, two, three with Pixlr-o-matic to add effects, overlays and borders. So many options to choose from, there are more than 2,000,000 possible finishes to make your photos look spectacular!

Features:

  • Color overlays help you adjust the mood – amplify the tone, cool it down, or add surreal shades
  • Lighting effects add drama, sparkle or a grunge look
  • Finish off your photo process with the right frame – pick a border style that fits you
  • Want it all in a single swipe? Try the randomizer and we’ll select an effect, overlay, and border for you.
  • No camera required! Select a photo from your gallery and start applying effects. If your device has a camera, you can also snap a new picture from within the app
  • Share your vintage image directly with your friends through Facebook or imm.io
  • Export your finished image back to your gallery. Images can be saved in high resolution, depending on the resolution of the original image

Streamzoo

Android | iOS

Streamzoo is a free, fun and easy way to create and share beautiful photos that'll have your friends begging to know how you did it. There's a filter and border combination for your every mood, and with so many other awesome editing options, Streamzoo is the only photo app you need in your toolbox. And once you're done, share your photo in one shot with your friends and family on both Streamzoo and your favorite social networks.

Features:

  • Follow @users or #hashtags, and like and comment on photos to award leaderboard points to your friends.
  • 14 Filters (Lomo, C-41, X-Process, Toy Hipster, Old School, Masterpiece, Sunshine and more).
  • 15 Borders (White, Black, Canvas, Film, Gritty, Old Vignette, Viewfinder, Dusty, Retro and more).
  • 6 Crop shapes (Square, 3x2, 4x3, 16x9, Custom and Golden Ratio). You can also Rotate and Flip!
  • Rectangle, Parallel, Circle, and Ellipse Tilt-Shifts (All adjustable with a pinch).
  • Edit Hue, Saturation, Brightness and Contrast.
  • Unlock badges for uploading photos to your favorite streams (Sunsetter, Foodie, Beach Bum, Sky Walker, and many more).
  • Share your photos on Facebook, Twitter, Tumblr and Flickr.
  • Separate Title & Description for photo-blogging while out and about.
  • Full-featured Web experience at http://streamzoo.com

If you are leaving Instagram, what are you using... or are you sticking with Instagram?

Comments (0)
Categories : Android, Freebie
Tags : , , ,

Top 20 CSS3 Tools and Cheat Sheets

CSS3-tools

Cascading Style Sheets (CSS) are rules that describe how your document will be presented by providing the look and formatting in a markup language. CSS3, the latest version of CSS that MOST browsers support, provides tremendous flexibility, power and enhancement to a style sheet. But trying to remember all the browser-specific or complex declarations can be a pain. So I've compiled the top 20 CSS3 tools and cheat sheets so that your future with CSS3 will be bright and sunny.

CSS3 Tools and Generators

CSS3 Click Chart

CSS3 Please

CSS3 Maker

Color Scheme Designer

CSS3 Generator

CSS3 Button Maker

Gridinator

SkyCSS Tool

CSS3 Transforms

CSS Lint

CSS3 Pie

CSS Tab Designer

Web Browser CSS Support

CSS3 Selector Test

Clean CSS

CSS Gradient Generator

JSFiddle

CSS3 Cheat Sheets

CSS3 Cheat Sheet

CSS3 Cheat Sheet

CSS3 Compatibility

CSS3 Color Names

Learn more about CSS3

HTML5 Rocks

One of the best and most popular HTML5 / CSS3 / Javascript presentations.

What about you? Do you have any favorite online CSS tools?
Comments (1)
Categories : WebDev
Tags : ,

The Alphabet of Positive Living

While unpacking and sorting through some old boxes of notes and writings, I came across this list that was written down many years ago. It's a great reminder of things to be done to help live a positive and productive life. I'm calling it the Alphabet of Positive Living.

Accept Differences
Be kind
Count Your Blessings
Dream
Express Thanks
Forgive
Give Freely
Harm no one
Imagine more
Jettison Anger
Keep Confidences
Love Truly
Master Something
Nurture Hope
Open Your Mind
Pack Lightly
Quell Rumors
Reciprocate
Seek Wisdom
Touch Hearts
Understand
Value Truth
Win Graciously
Xeriscape
Yearn for Peace
Zealously Support a Worthy Cause
Are there letters you would change?
Comments (0)
Categories : Thoughts
Tags : ,
« Previous Page
Next Page »

Domain Names For Sale

Popular Posts

  1. Per-Post CSS in WordPress
  2. Speed up your WordPress Site 10x
  3. Add Menu Items to Admin Toolbar
  4. CSS Snippet – Multiple Backgrounds
  5. Top 20+ CSS3 Tools and Cheat Sheets
  6. Understanding WordPress Action Hooks
  7. Clients are Scared of Posts
  8. Autoset your Featured Image in WordPress
  9. Stop WordPress from Compressing JPGs
  10. Free Alternatives to Instagram
  11. Resizing the WordPress excerpt meta box
  12. Add WordPress Syntax to Coda
  13. Add a Search Box to WordPress Navigation
  14. Set Maximum Post Title Length
  15. Adding a Google+ Button to WordPress
  16. WordPress Frameworks
  17. The Alphabet of Positive Living
  18. Changing the WordPress Read More Text
  19. Newbies Guide to Web Hosting
  20. Learning from Steve Jobs

Subscribe for Updates

Subscribe to receive updates, code snippets, early access to plugins, and much more.
  • This field is for validation purposes and should be left unchanged.