Nulife Services

Nulife Services

Nulife Services

Name/Status:
nulifeservices.com/Online

Software:
Adobe Photoshop, HTML & CSS

Position:
Design & Development

Description/role:
An informational site for a healthcare staffing company.

Technical Challenge:
Limited budget.

27. May 2010 by Gabe Diaz
Categories: Work | Leave a comment

Adding the Facebook Like Button to WordPress Posts

Today Facebook announced a slew of new social plugins that anyone can add to their web pages to make them more social. Among these new plugins is a new button to “Like” anything on the web, so lets take a look at adding the Facebook Like Button to WordPress posts.

There are 2 main versions of the Like button

The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the XFBML tag and requires you use the JavaScript SDK. The XFBML version allows users to add a comment to their like as it is posted back to Facebook.

The Facebook Like Button comes with a handy generator with several options for outputting the proper code to add the Like Button to any web page. This is fine and dandy for some sites/pages and only needs a little tweeking to add the button to your WordPress posts.

The Basic WordPress Code
The only thing needed to add the Facebook Like button to your WordPress posts is to include the proper code for your permalinks. Basically you add the WordPress the_permalink() code to the href= to get the following:

<iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink() ?>"
scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>

The above adds a 450px wide by 80px high box on your site that is ready to display thumbnails of every friend that has also liked the site/page. If you noticed in the Facebook Like Button generator there are several options for turning off thumbnails, changing font and even using a button count counter. You can append any of these settings after the URL in order to change the look of your button.

Editing the Facebook Like Button
Let’s add the following to change the options to the Facebook button, here we are changing to the count view, hiding thumbnails as well as changing the width and height. We will add the following the code above, after the permalink and before closing out the double quotes.

Add this to the above basic code:

%2F&amp;layout=button_count&amp;show-faces=false&amp;width=100&amp;action=like&amp;colorscheme=light

End up with a new style button:

<iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink() ?>%2F&amp;layout=button_count&amp;show-faces=false&amp;width=100&amp;action=like&amp;colorscheme=light"
scrolling="no" frameborder="0" style="border:none; width:100px; height:20px"></iframe>

This is the simple version, for a detailed button that integrates deep with Facebooks new social graph you will need to use the Javascript SDK version of the Like Button.

You can see an example of the iframe Facebook Like button below, if you are signed into Facebook and are reading this feel free to test it out!

21. April 2010 by Gabe Diaz
Categories: Blog | Tags: , , , | 4 comments

Adding an Popup Google Buzz Button to WordPress

With Google Buzz being the talk of the week it’s no surprise that alot of sites created their own Share on Buzz buttons which function similar to the ReTweet and Facebook Share buttons. There’s even a WordPress Plugin that’s been released along with many tutorials online of how to add the proper code to enable your posts to be shared on Buzz.

There’s no official Share on Buzz button nor do the current buttons share directly on Buzz but the buttons enable you to post an item to your Google Reader, in which you can add it your shared items. Google Buzz has the option to import your shared items from Google Reader so the workflow goes as follows:
Google Reader > Shared Items > Google Buzz
Simple and effective yet alot of the code that I’ve seen around the web forces you to either leave the page you are on or opens the Add to Reader in a new page, this doesn’t have to be the case.

Share on Google Buzz Popup Code

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'>
<img src="IMAGE.JPG" border="0" alt="Share on Google Buzz"/></a>

All you need to do is insert the above code in your Single.php file and replace IMAGE.JPG with the Buzz Logo of choice. There’s a nice Buzz logo psd file on DeviantArt by =Zadong and there are also several Buzz Share buttons over at ChethStudios. I decided to go the compact button route and ended up creating my own button which you can save and use if you please.

If you use the code above, the compact button or if you used a different technique to add a Buzz Share button to your site leave a comment and let me know, would love to see how people are implementing a Google Buzz share button. Also, if you are on Google Buzz leave a comment with a link to your profile so others can follow you and if you wish to follow me on Google Buzz just visit my Google Profile.

14. February 2010 by Gabe Diaz
Categories: Blog | Tags: | Leave a comment

Centra Healthcare Solutions

CentraHealthcareSolutions.com

CentraHealthcareSolutions.com

CentraHealthcareSolutions.com

Name/Status:
centrahealthcare.com/Online

Software:
Adobe Photoshop, HTML & CSS
Wordpress
Omnistar Recruiter

Position:
Design & Development

Description/role:
A new business dealing with direct placement for medical professionals. An informational site was needed along with the ability for interested medical professionals to view/search open positions, register/upload their resumes and to be able to apply to open positions online.

Technical Challenge:
Custom edits to Omnistar Recruiter.

31. January 2010 by Gabe Diaz
Categories: Work | Leave a comment

The Gyrowheel Part 1 Unboxing!

I don’t think I’ve been this excited about a product for my son in a long time! Recently in early December, Gryobike released it’s very first consumer product, the Gyrowheel along with the launch of it’s new site.

“Gyrowheel is a revolutionary front wheel for children’s bikes that eliminates the need for training wheels. Powered-on it provides high stability at low speed and makes learning to ride safer, easier, faster and a whole lot more fun!”

I ordered my Gyrowheel as soon as I could and a few days ago I received my fancy new high tech front wheel. I didn’t know what to expect when I opened the brown box but I was definitely excited to finally see it in person. When I opened the box I was not only happy to see such cool product in my hands but the packaging itself was awesome. The site, http://thegyrobike.com, has a streamlined look with just enough colors to express the fun and excitement of this product. The packaging continued this and was boxed with matching colors to the site, of course logo/tagline and the happy face stick figure leaning to the side riding his bike.

I won’t be able to put the wheel on my son’s bike for another week but expect some pics from the installation. Till then here are some of my pics and a little info vid from the Gyrowheel team.

Gyrowheel by Gyrobike

Gyrowheel by Gyrobike

Gyrowheel by Gyrobike

Gyrowheel by Gyrobike

11. December 2009 by Gabe Diaz
Categories: Blog | Leave a comment

Moving Your WordPress Install to a New Host

Background:
I finally took the plunge to upgrade this site to WP 2.8 after noticing that WordPress continued to not play nice with 1&1. Then again maybe I should say that 1&1 never played well with WordPress. I’ve covered some issues with 1&1 that included the scary 1&1 Error 500 issue as well as having to force enable PHP5 for 1&1 but once going to WP 2.8, a lot of things broke and it was due to the php.ini memory issue due to a cap by 1&1.

In looking for a new host, I decided to finally try HostGator as many people have had a great experience with them. In regards to WordPress, HostGator seems liked a good fit. 1&1 will allow a max of 20m of php memory to your php.ini while HostGator allows up to 64m of php memory, that’s a huge plus right there, throw in unlimited SQL databases and I was sold. Both 1&1 and HostGator offer larger php.ini memory options for dedicated servers but in this case we are dealing with shared servers. So let’s go ahead and outline the process of moving your database and WordPress install to a new host.

Getting Ready. Backup, Backup, Backup!
Since we are going to be moving a complete WordPress install along with the database we will essentially be creating a mirror copy of the install and database, the only significant change will be changes to your wp-config.php file since your site will have a new database name, user and password.

FTP to your current site and download all your site files and WordPress files to a site folder on your hard drive. If your WordPress install has a caching plugin, you may wish to deactivate it and not copy the cache files as there will be many.

Log into your WordPress installation and export all of your posts, pages, comments, customs fields, tags via the Tools>>>Export option, this will create a XML file of all your content, keep this in a safe place.

Next up may be the scary part for some people, you will need to access your database via phpMyAdmin. In here you will be able to export all of your WordPress tables.

If you have more than one database you may be presented with something similar in which you can choose between all of your databases. Here you want to make sure that you do not click export just yet, you want to open your WordPress database to be able to see all of the tables containing all your content. Click on your database name.
wp-database-move-01-thumb

Once you click on your database name you will be presented with all of your WordPress tables, your may look different due to using a custom prefix or certain plugins utilizing your database but it will be similar to the one below. At this point you will be ready to export via the tab towards the top of the page.
wp-database-move-02-thumb

You will now be at the export page, here you will be able to see all of the WordPress tables in the selection box that you will be exporting along some checkbox’s that need to be marked off.
In the SQL section
Check the following boxes:
‘Structure’
‘Add DROP TABLE’
‘Add AUTO_INCREMENT’ and
‘Enclose table and field names with backquotes’

In the data section check off the the “Data” selection box and the rest can be left blank.

Once you are ready, check off save and click go! Depending on the size of your database this may take some time to do a full export.
wp-database-move-03-thumb

Importing Your Old Data to Your New Database
1.) Create a new WordPress install with a new database
2.) Log in to phpMyAdmin and select your new database
3.) Click on “Select All” to check off the boxes on all your tables
4.) There should be a dropdown option area, select “Drop or Drop Tables”
5.) Click “Yes” if it asks you if you are sure you wish to “Drop the Tables”
6.) With an empty database now navigate to “Import”
7.) Select your old database export file and import it into your new WordPress database
8.) Now that you have your post content in your new database it’s time to move all of your uploaded pics, themes, plugins over. Via FTP upload your files to your new server.

If there is any confusion please visit the WordPress Codex page on Backing Up Your Database

08. October 2009 by Gabe Diaz
Categories: Blog | Tags: | Leave a comment

Enabling Author Pic and Bio for WordPress Single Posts

Background
Previously we covered, Displaying Author Pic and Bio in Your WordPress Post the Non-Gravatar Way a technique used to add an author block to the bottom of your posts in WordPress. Originally this technique was used to add an author block to articles written by an author of a specific category. By using Custom Category, Page and Post Templates for WordPress I was able to create a post template for a specific category knowing that one author would be contributing to that category. This works great for custom categories with custom post templates but what if you had a WordPress install with multiple authors, some who had bio and others who did not?

The Problem
The Displaying Author Pic and Bio in Your WordPress Post the Non-Gravatar Way technique made the author block appear on every single post in your WordPress install, let’s take the idea one step further and enable you to choose which posts to display a author block using the WordPress Custom Fields.

The Solution
We will be making edits to your single.php file, please make a backup of your originally single.php file just in case something goes wrong and you need to revert.

We will be using the author block example from Displaying Author Pic and Bio in Your WordPress Post the Non-Gravatar Way which is:

1
2
3
4
<div class="authbio">
<img src="<?php bloginfo('template_url'); ?>/images/<?php the_author_firstname(); ?>.jpg" alt="" class="alignleft"/>
<?php the_author_description(); ?>
</div>

We will also be using WordPress Custom Fields to trigger wether or not a WordPress Post will show an author block or not. For this example I added the author bio after the article, right before the share options and comments in single.php

1
2
3
4
5
6
7
8
9
10
<?php
   if($authbio = get_post_meta($post->ID, "authbio", "true")) {
?>
<div class="authbio">
<img src="<?php bloginfo('template_url'); ?>/images/<?php the_author_firstname(); ?>.jpg" alt="" class="alignleft"/>
<?php the_author_description(); ?>
</div>   
<?php } else {?>
* 
<?php }?>

What the above means:
WordPress checks for a Custom Field Key called “authbio” to see if there is any value. If there is a value, display the authbio div which includes our author pic and a short bio. If there is no “authbio” Custom Field Key then display *.

Essentially you can write a post, if you wish to display the author box then add the field “authbio” and give it a value of yes if you do not wish to display any author box then don’t add any field to that post.

For example purposes, this post had a custom field of “authbio” with a value of yes, you can see the author bio and pic at the bottom of the post. Please take a look at every other post on this site…you will notice that after every post you will see a * as this is the only post on this site with an author box.

Things to remember:
-If you are going to use this technique in your WordPress site remove the * or else you will have a * after every post with no author pic and bio, just leave it blank.
-You do not need to call your Custom Field Key “authbio” you can label it anything you want, just use the same naming convention in your php in the single.php.
-This posts references Displaying Author Pic and Bio in Your WordPress Post the Non-Gravatar Way several times, please read it if you have any questions about how to create an author bio and pic box.

Hope this helps, enjoy!

13. September 2009 by Gabe Diaz
Categories: Blog | 1 comment

Penthouse Super Party 2007

ThePenthouseSuperParty.com

ThePenthouseSuperParty.com

ThePenthouseSuperParty.com

Name/Status:
thepenthousesuperparty.com/Online
Archived Locally: gabediaz.com/2007
Software:
Adobe Flash, Photoshop & PHP

Position:
Design & Development

Description/role:
With Super Bowl XLI coming to Miami in 2007 the company wanted an online presence for their branded event.

Technical Challenge:
A very short turn around time and 1 man team.

21. June 2009 by Gabe Diaz
Categories: Work | Leave a comment

Custom Category, Page and Post Templates for WordPress

Quick overview of custom templates for WordPress Categories, Pages and Posts. You may already be familiar with Category and Page templates but custom Post templates are just as easy.

DISCLAIMER: Before making any edits to original files make sure to have backups in case something goes terribly wrong…not that it should but you can never be too safe!

WordPress Category Templates

WordPress Category templates are very easy to use, view the WordPress Codex – Category Templates and you will see that hierarchy for a category templates is:

  • 1. category-6.php
  • 2. category.php
  • 3. archive.php
  • 4. index.php

This basically just means that WordPress will first look for a template labeled category-6, if there is none, it will then look for category.php and so forth all the way down to index.php.

To create a custom category template, just copy your category.php and resave it as category+”your category ID number.” If you do not have a category.php, you can copy your archive.php or index.php but just remember that your custom template will look like the template you copied until you make your edits. So if you have a category.php, archive.php and index.php you will want to copy your category.php and work from there.

You can find your category ID number by logging into your WordPress backend…go to your categories section and hover over or copy any category names and you will see your category ID. Upload category-“ID#”.php to your theme directory and the specified category can now be freely styled to look differently than your other categories.

WordPress Page Templates

WordPress Page Templates may be easier than Category Templates. WordPress looks for templates in the following order:

  • 1. The Page’s selected “Page Template”
  • 2. page.php
  • 3. index.php

Let’s pretend we want to create a specific template for an “About Us” page. Most themes will have a page.php so once again, you can copy your page.php and resave it, let’s call it about.php.

Once resaved, our page template must start with the following 5 lines of code so add the following to the very top:

<!--?php
/*
Template Name: About
*/
?-->

The above sets a name for your page template, so you can enter just about anything in the Template Name: “Your Choice” For the ease of consistency I would label the template name something similar to what I am saving the file, so this about.php will have a Template name of About. Now that you have your Page Template named along with some copied format from your original page.php you can edit this about.php to your hearts desire. Any edits made to about.php will only affect those pages using this template. Upload your new about.php to your theme directory and we are all set.

To use a Custom Page template just create or edit any page. You should see a dropdown box labeled Page Template, if all is in order you should see your template name as an option in the dropdown.

WordPress Post Templates

WordPress Post Templates are great because they allow you to make posts in different categories different from each other.

For example let’s say you had 2 categories named Apples and Oranges. You styled each category differently using Custom Category Templates but also wanted posts that appeared in Oranges to have a different look than posts appearing in Apples.

Custom Category Templates do not pass any styling to the posts within, posts take their styling from either single.php or index.php as per the WordPress Template Hierarchy.

Most themes will have a single.php, so yes once again duplicate your single.php…twice. We only need two Post Templates in this example since we want one Post Template for Oranges and we will just be using our original Post Template for posts appearing in the Category Apples as well as for the rest of our posts in our blog.

Let’s name one of our copies of single.php to singleOriginal.php, this is a direct duplicate of our original file, unedited.

For our second copy of single.php, which will be used as a Custom Post Template for all the posts in Category Oranges, let’s save this file as singleOranges.php. This file will be the edited single.php that will have whatever custom edits you want for all Posts in the Category Oranges. Make your edits to this file and you will also need to retrieve the category ID for the category Oranges, let’s pretend it has an ID of 10.

Recap

Before we move ahead, let’s make sure we have everything in order, we should have 3 files and 1 Category ID number.

The 3 files consist of a singleOrignial.php which is a direct duplicate of our original single.php. We should also have a singleOranges.php which has our edits for our custom look for all posts in the Category Oranges (ID #10). And finally we should still have our original single.php unedited in it’s original format.

Now let’s edit single.php since WordPress first goes to single.php for all Post Templates. Edit your single.php with the following:

    <!--?php
    $post = $wp_query--->post;
    if ( in_category('10') ) {include(TEMPLATEPATH . '/singleOranges.php');}
    else {include(TEMPLATEPATH . '/singleOriginal.php');
    }
    ?&gt;

That’s it! Basically the above checks the posts to see if it’s category 10, if so use the template singleOranges.php, else use singleOriginal.php. What if you wanted a Custom Post Template for Oranges, Apples and Grapes but still wanted a single.php for everything else?

    <!--?php
    $post = $wp_query--->post;
    if ( in_category('10') ) {include(TEMPLATEPATH . '/singleOranges.php');}
    elseif ( in_category('11') ) {include(TEMPLATEPATH . '/singleApples.php');}
    elseif ( in_category('12') ) {include(TEMPLATEPATH . '/singleGrapes.php');}
    else {include(TEMPLATEPATH . '/singleOriginal.php');
    }
    ?&gt;

A very easy way to customize posts in any category. Go ahead and get creative with customizing then come back and leave a comment to show it off, would love to see what some people do!

13. June 2009 by Gabe Diaz
Categories: Blog | Tags: | 80 comments

I Love My iPhone Apps

For anyone who has an iPhone you probably already know that there are plenty of iPhone apps at the iTunes App Store. For those new to owning a iPhone, some apps come at a cost while there are many others free to download.

I have close to 50 apps loaded onto my phone, but in reality there are only a handful that I use on a daily basis.

As the App Store is about to hit 1 billion downloads, here are “5 Must Have Free Apps” that I find to be great.

  • TwitterFon – Yes Twitter is just about everywhere nowadays. From P. Diddy, to your local News Channel it seems that everyone has a Twitter account. The great thing about TwitterFon is that you have a menu bar on your screen which lets you sort through your Friends, Replies, Messages, Favorites and an option to Search. View profiles, see timelines and be able to retweet makes this my go to Twitter app.
  • Google – Even if you don’t have a Google Account to make use of the Gmail, Calendar, Docs etc. features, just installing this app for the the Google Search feature is worth it. If you search using the google search bar using the iPhones built in Safari browser you will see the same results as you would on your computer If you use the Google App search you will get results tailored to your location. Not to mention search by voice is pretty cool.
  • Fandango – Need to check what’s playing at your local theatre? Pop in your Zip Code and you are all set. Never tried to buy tickets through it but it is an option if your theatre supports it.
  • Free Wi-Fi Locator – Using your current location this little app returns the nearest locations that offer Free Wi-Fi. This is not to be confused with other apps such as WiFinder which just searches for the nearest Wi-Fi locations.
  • Pandora – Streaming music to your iPhone based on your choices. Listen to a song or two and Pandora will start to recommend music based on what you just heard. Create specific stations for different genres and enjoy free streamed music.

The above are only a handful of great apps so also check out: Skype, Mint.com, Facebook, AIM, Brightkite, Urbanspoon, Yelp and iTalk, you won’t be disappointed.

Have an app that you love? Please leave a comment and let me know, free or paid I love downloading and testing out new apps!

12. April 2009 by Gabe Diaz
Categories: Blog | 2 comments

← Older posts

Newer posts →