SIC Digital Blog

  • WordCamp Miami 2011 – Theme Development for Beginners (Video)

    Posted Mar 17 2011 by Michael in , , with 3 Comments

    As promised here’s the video of my presentation at WordCamp Miami. Thanks to David Bisset for posting it up. If you have any questions leave a comment :) .

    Mike Chacon on “Theme Development For Beginners” at #wcmia from David Bisset on Vimeo.

  • WordCamp Miami 2011 Was Awesome!

    Posted Mar 6 2011 by Michael in , , , with 2 Comments

    First off, I’de like to thank everyone who volunteered and spoke yesterday. Every single presentation was awesome. I was massively excited to be around so many WordPress lovers and intelligent people that came out. I hope everyone stays in touch and we can continue to grow this community of ours. Big ups to WPCandy for live blogging the event as well as Webatonic and Fashify for covering via video (coming soon). I can only hope that we can do it even bigger and better next year! Maybe see everyone in Atlanta next? hmmm…..

    If anyones interested I was thinking of recording a short video series going over my presentation again. 40 minutes was no where near enough to explain the inner workings of WordPress themes, and “the loop” is alot to take in in one shot if you’re not a developer. So let me know if anyones interested in the comments.

    Thanks again everybody. You guys (and girls) are too cool for school.

  • WordCamp Miami 2011 – Coming This Saturday To The University of Miami

    Posted Mar 1 2011 by Michael in , with 0 Comments

    Hey folks! I know It seems like I’ve abandoned my blog, I’m trying to get better, I promise. Anyway… although my WordPress blog has been neglected, I make my living designing and developing themes for WordPress, and I’ll be speaking this weekend at WordCamp Miami about it! So if you’re in the Miami area come check it out.

    What Will I Be Presenting You Ask?

    At 3:40pm I’ll be going over the basic parts you’ll need to create your first WordPress theme! I’ll also be going over what files control what pages as well as some of the basic hooks you’re going to need to get started (If you’re not sure what hooks are don’t worry). If you’re not in to creating your own themes it’s always helpful to know where to go to make little changes to your WordPress website or blog, so it’s worth having a look. In case you miss it, Aristotle Olay of Fashify and Yevgeny of Webatonic will also be out covering the event so hopefully we’ll have some good video to put up.

    Also don’t forget to check out “How To Be A WordPress Rockstar”, by my good friend Ptah Dunbar.

    I hope to see you all there! WordCampMia.com

  • Live with Gary Vaynerchuck on Sirius Satelite Radio

    Posted Oct 1 2010 by Michael in  with 2 Comments

    I just had an interesting experience. I was just live on Gary Vaynerchuck’s radio show on Sirius Satelite Radio. It’s interesting because of why I would even call in to this radio show. Gary Vaynerchuck is a social media/personality ninja of sorts. His radio show is about wine, not much of a wine advocate myself, I would have no business listening to his show, much less calling in. By establishing himself as a brand, he has crossed markets, pulling in to his wine show a person who was originally only interested in the Social Marketing realm. He’s a really smart guy definitely worth checking out. The video below generally sums up Gary.

  • How to Create a Custom Post Type with Image Uploads For WordPress 3

    Posted Jul 22 2010 by Michael in , with 104 Comments

    I’ve been working on a project to create a CMS for a series of dental websites. One of the important things is to be able to make the CMS as simple as possible for the end users, so I’ve set out using WordPress 3′s new custom post types to create and display these nice and neat. For this example I wanted to create a post type for “Before and After” images. Rather than having the end user have to go to media, upload it, and then grab the link for the page I wanted to have them to be able to go in to a “Before and After” post type and simply upload1 upload2 and press publish. Here’s how I went about doing it.

    Step 1 : Create the Custom Post type

    Custom post types are pretty easy to create:

    // Creates before and after post type
add_action('init', 'post_type_before_after');
function post_type_before_after()
{
  $labels = array(
    'name' => _x('Before and Afters', 'post type general name'),
    'singular_name' => _x('Before and After', 'post type singular name'),
    'add_new' => _x('Add New', 'before_and_after'),
    'add_new_item' => __('Add New Before and After')
 
  );
 
 $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => true,
    'menu_position' => null,
    'supports' => array('title','excerpt'));
 
  register_post_type('before_and_after',$args);
 
}

    Step 2: Creating the meta boxes

    The custom post type above if you look at the code

     'supports' => array('title','excerpt'));

    What this does is tell WordPress what stuff you want on the admin page. I only want the title and excerpt fields on mine because I’m going to add some extras. You could also add, “editor”,
    comments” etc..

    <?php
$prefix = 'sic_';
 
$meta_box = array(
	'id' => 'my-meta-box',
	'title' => 'Before and Afters',
	'page' => 'before_and_after',
	'context' => 'normal',
	'priority' => 'high',
	'fields' => array(
		array(
			'name' => 'Before',
			'desc' => 'Select a Before Image',
			'id' => 'upload_image',
			'type' => 'text',
			'std' => ''
		),
				array(
			'name' => '',
			'desc' => 'Select an After Image',
			'id' => 'upload_image_button',
			'type' => 'button',
			'std' => 'Browse'
		),
	array(
			'name' => 'After',
			'desc' => 'Select an After Image',
			'id' => 'upload_image2',
			'type' => 'text',
			'std' => ''
		),
	array(
			'name' => '',
			'desc' => '',
			'id' => 'upload_image_button2',
			'type' => 'button',
			'std' => 'Browse'
		),
	)
);
 
add_action('admin_menu', 'mytheme_add_box');
 
// Add meta box
function mytheme_add_box() {
	global $meta_box;
 
	add_meta_box($meta_box['id'], $meta_box['title'], 'mytheme_show_box', $meta_box['page'], $meta_box['context'], $meta_box['priority']);
}
 
// Callback function to show fields in meta box
function mytheme_show_box() {
	global $meta_box, $post;
 
	// Use nonce for verification
	echo '<input type="hidden" name="mytheme_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';
 
	echo '<table class="form-table">';
 
	foreach ($meta_box['fields'] as $field) {
		// get current post meta data
		$meta = get_post_meta($post->ID, $field['id'], true);
 
		echo '<tr>',
				'<th style="width:20%"><label for="', $field['id'], '">', $field['name'], '</label></th>',
				'<td>';
		switch ($field['type']) {
 
 
 
 
//If Text		
			case 'text':
				echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:97%" />',
					'<br />', $field['desc'];
				break;
 
 
//If Text Area			
			case 'textarea':
				echo '<textarea name="', $field['id'], '" id="', $field['id'], '" cols="60" rows="4" style="width:97%">', $meta ? $meta : $field['std'], '</textarea>',
					'<br />', $field['desc'];
				break;
 
 
//If Button	
 
				case 'button':
				echo '<input type="button" name="', $field['id'], '" id="', $field['id'], '"value="', $meta ? $meta : $field['std'], '" />';
				break;
		}
		echo 	'<td>',
			'</tr>';
	}
 
	echo '</table>';
}
 
add_action('save_post', 'mytheme_save_data');
 
// Save data from meta box
function mytheme_save_data($post_id) {
	global $meta_box;
 
	// verify nonce
	if (!wp_verify_nonce($_POST['mytheme_meta_box_nonce'], basename(__FILE__))) {
		return $post_id;
	}
 
	// check autosave
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
		return $post_id;
	}
 
	// check permissions
	if ('page' == $_POST['post_type']) {
		if (!current_user_can('edit_page', $post_id)) {
			return $post_id;
		}
	} elseif (!current_user_can('edit_post', $post_id)) {
		return $post_id;
	}
 
	foreach ($meta_box['fields'] as $field) {
		$old = get_post_meta($post_id, $field['id'], true);
		$new = $_POST[$field['id']];
 
		if ($new && $new != $old) {
			update_post_meta($post_id, $field['id'], $new);
		} elseif ('' == $new && $old) {
			delete_post_meta($post_id, $field['id'], $old);
		}
	}
}
 
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_bloginfo('template_url') . '/functions/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');

    Ok so what this has done is write all of the meta box fields that you want. The php reads what you put in the array and all of those switch cases check to see what kind of input field it is then create the format accordingly. You can copy and paste that exactly as is and it will work for this tutorial.

    This should leave you with

    Step 3: Getting the WordPress Media Upload working for the browse buttons

    So now we have the meta boxes for the custom field but what we want is the end user to be able to click browse and upload an image or select from the gallery. Just for usability sake you know? Heres how we do it.

    If you look at the code above

     function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_bloginfo('template_url') . '/functions/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');

    This loads the wp_enqueue_script(‘thickbox;), as well as registers the “my-upload” function which will be used to link to some jquery that adds functionality to our browse buttons.

    Step 4: The Jquery for the Browse Buttons 

    jQuery(document).ready(function() {
 
jQuery('#upload_image_button').click(function() {
											  window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#upload_image').val(imgurl);
 tb_remove();
 
 
}
 
 
 tb_show('', 'media-upload.php?post_id=1&amp;type=image&amp;TB_iframe=true');
 return false;
});
 
 
});
 
jQuery(document).ready(function() {
 
jQuery('#upload_image_button2').click(function() {
											   window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#upload_image2').val(imgurl);
 tb_remove();
 
 
}
 
 tb_show('', 'media-upload.php?post_id=1&amp;type=image&amp;TB_iframe=true');
 return false;
});
 
 
 
});

    Want to learn more WordPress?

    This book is way worth checking out if your just getting in to WordPress. Chris Coyier is awesome and this book is a great place to start.

  • Need help in WordPress or Jquery? Try IRC

    Posted Jul 21 2010 by michael in , , , with 3 Comments

    If you don’t know, IRC stands for Instant Relay Chat. It’s basically a kind of chatroom you can access through a desktop application. The mostly popular for Windows being mIRC ( I use Colloquy for the Mac). It’s been some time since I’ve seen a real reason to be cruising IRC, but I’ve recently discovered that there are some active online communities around some of the things I’m most interested in! Looking for some help for a Jquery plugin I was writing recently I discovered a JQuery IRC channel full of Jquery Ninjas ready and willing to help you. This led me to wonder what other channels might be around for some of this stuff. It sure beats asking questions through emails or comments. You can start an instant chat with someone! Here’s some info on the channels for WordPress and Jquery.

    WordPress IRC Channels

    To participate, you need an IRC client. Once configured and installed, point it toirc.freenode.net and connect. You’ll need to choose a nickname, and then “join” the#wordpress channel. An alternative to installing your own IRC client is to use the freenode web chat.

    #wordpress

    General support channel for all WordPress related questions. Plugin and theme development questions are welcome. This is not the support channel for WordPress.com.

    #wordpress-dev

    Channel for WordPress core developers to discuss the development of the WordPress core code. This channel is not designed for support with plugin or theme development. This channel is where the weekly WordPress dev chats are held.

    #wordpress-core-plugins

    Channel for WordPress core plugins to discuss the development of their plugins. This is not a general support channel for plugin or theme development.

    #wordpress-gsoc

    Channel for WordPress Google Summer of Code (GSoC) discussions.

    #wordpress-ui

    Channel for WordPress user interface and user experience discussions.

    #wordpress-polyglots

    Channel for WordPress internationalization discussions.

    #wordpress.com

    Support channel for blogs and services hosted by WordPress.com.

    Source: WordPress.org/irc

    Jquery IRC Channels

    Server: irc.freenode.net
    Room: #jquery

    jQuery team members, especially John Resig (nick: JohnResig), Joern Zaefferer (nick: JoernZaefferer), and Yehuda Katz (nick: wycats) are frequently in attendance, helping experienced and new users alike with both complex and trivial problems.

    The IRC Channel is best if you need quick help with any of the following:

    • JavaScript
    • jQuery Syntax
    • Problem Solving
    • Strange bugs

    Source: http://blog.jquery.com/2007/02/17/the-jquery-irc-channel/

    Hope this helps, post any other useful IRC channels you might have for web development/design in the comments.

  • NBA Free Agent and All Star Website Showcase

    Posted Jul 7 2010 by Michael in , with 2 Comments

    Published: 7/6/10

    With all the buzz online about the NBA free agency, I thought it would a good time to check out the websites of some of the NBA’s top players. How are the big boys presenting their brands? Long after basketball has stopped paying the bills, they’re brands and legacy’s can continue to work hard for them, helping them sell grills, get endorsements, the whole sha-bang. The internet and social media have changed the game. Now that stars have the power to distribute themselves without the help of TV, Radio, and Traditional Media, their brands are in their own hands.

    Lebron James started a twitter today that has already reached over 150,000 followers. That built in audience is worth a lot to endorsers and advertisers. This direct connection with fans, translates straight in to dollars. These websites should be used to bring your buzz, spread content, and make it as easy as possible for you’re fans to stay connected. So who’s got professionals working their online identities? Here’s a round up of All Star NBA players’ Official Websites.

    Tim Duncan (slamduncan.com)

    Link: Tim Duncan’s Official Website

    Slam Duncan, the online home of Tim Duncan is an OK website as far as looks go. The design is a little dated, but it’s held up well. If you’re the coder type, you’ll notice the table based layout and general stale nature of everything. There isn’t any fresh content, blog, Facebook, or Twitter. It’s kind of the typical nice site from a few years back that only gets little updates, no major online presence here.

    • Table Based Layout – old design
    • Total Lack of Social Media
    • Most content is just links to NBA.com


    Dirk Nowitzki (41-world.com)


    Link: Dirk Noitzki’s Official Website
    Dirk Noitzki’s website is …interesting. He loses points for having a 100% flash website, but the real issue I have is the weird puppet of himself that is the background. His arms move while his face and body remain totally still. Freaks me out. There is a blog but no Facebook or Twitter connectivity anywhere to be found. Finally, there is a store where you can get some Dirk Gear, but it looks a little shady to me.

    • Up to date blog
    • 100% Flash design
    • No Facebook or Twitter Connectivity
    • Really Creepy Design Concept


    Carmello Anthony (thisismelo.com)


    Link: Carmello Anthony’s Official Website

    Carmello Anthony has a really strong brand presence in his website. He’s got all the social media bells and whistles, and a whole online community where Mello Fans can get together and talk about his awesomeness.

    • Flashy, really clean modern design.
    • Gear Store
    • Lots of Video and Media
    • Twitter, Facebook, Blog, all the goodies.


    Kobe Bryant (kb24.com)


    Link: Kobe Bryants Official Website

    The NBA’s MVP of 2010′s website is more online store and less online presence. There is a social network where Kobe fans can join and talk to each other, but the website is geared toward selling Kobe Gear more than selling Kobe. It’s a pretty clean website as far as design goes, not as awe inspiring as I would expect from such a superstar with such a big budget. There are no external social media features to be found. No facebook? No twitter? There is at least a social network area where Kobe fans can interact.

    • Clean Design
    • WordPress Based
    • Social Media Powered by BuddyPress with over 3,100 members
    • No Twitter or Facebook
    • Online Store


    Allen Iverson (alleniverson.pro)


    Link: Allen Iverson’s Official Website

    Allen Iverson’s official website is a fan website based around a social network. It’s a cool idea, he just provides a place for his fans to talk. The design is pretty clean, all around respectable website.

    • Social Network with over 11,000 members
    • Gear Store

    Amare Stoudemire (amarestoudemire.com)


    Link: Amare Stoudemire’s Official Website

    I have to say that of all the sites that I checked out, Amare Stoudemire had the best. It’s well designed, well coded, and has all the connections to all his content online.

    • WordPress Based
    • Up to date blog with good content
    • Fully Connected to Facebook and Twitter
    • Gear store


    Chris Bosh (chris-bosh.com)

    http://chris-bosh.com

    Chris Bosh totally missed the boat, his website doesn’t work at all. Hopefully it’s just down because it just crashed from a massive influx of traffic from free agency Twitter.

    • Status: BROKEN


    Dwayne Wade (dwyanewade.com)


    Link: Dwyane Wade’s Official Website

    Being from Miami, I have lots of love for Dwayne Wayde. His website just doesn’t reflect his caliber. He’s got the Twitter and the Facebook going on, but that’s pretty much it. There are 2 year gaps in his blog posts and generally the site seems abandoned short a blog post pulled from the Huffington Post. Not the worst on this list, but pretty close.

    • No Branding – Is that a logo on the top left?
    • Little Media or original content
    • Twitter, Facebook, RSS, going on but thats about it

    Lebron James (lebronjames.com)


    Link: Lebron Jame’s Official Website

    As of now Lebron Jame’s website is just a landing page for you to sign up to his mailing list. There are a few sentences on the site that suggest a media hub and social network for Lebron James is on it’s way. The landing page is very cool and slightly interactive. There’s Ajax contact form, all the social media links, and a really interesting set of links hidden in his face on the left side. I’d be really interested to know how they coded that, if you look at the source it’s pretty complex.

    • Just a landing page for now.
    • Looks like his web and online marketing team is pointed in the right direction

    Article By: Michael Chacon
    [fb-share]

  • Mashable Social Media Day 2010: Miami Beach Recap

    Posted Jul 2 2010 by Michael in , with 1 Comment

    June 30, 2010 marked the first annual Social Media day event here on Miami Beach. Thanks to the folks from BRPR for putting the whole thing together and the Pelican South Beach for providing a venue. Not only was the venue packed, but there was a great crowd of young, hip, social media rockin’, gadget totin’ web moguls in the making.

    The full spectrum: bloggers, developers, marketers, designers. Brought together by their love of the web and social media. I had few great conversations, got a few cards, and had a few drinks. What I haven’t been able to get out of my head is, why don’t we do this more often? It doesn’t take a powerhouse like Mashable to spark real world networking. We need to make this happen a lot more in Miami. With the plethora of art, fashion, music, and everything else, it seems obvious that the web community would be thriving. It’s ironic, Smashing Magazine’s latest article is titled “Designers, Don’t Do it Alone.” In our industry with so many great tools and resources we tend to close ourselves up and ignore our real life communities. Sure, we tweet back and forth, email, use Facebook, but there isn’t anything that can compair to a face to face.

    I’de like to reach out to everyone here: Designers, developers, bloggers, marketing people, everyone. We need to do this more often. Lets get together and push this industry forward. There’s strength in numbers and there’s a lot we can learn from each other.

Have a question? Give us a call! 305-741-4742