A tech blog about web development with PHP, MySQL, jQuery, CSS3 and various other programming languages. You will not find anything about ColdFusion, ASP.NET, C# on this blog.
February 18, 2012
I recently added Facebook like buttons to each of my posts and was surprised at how easy it was. There is no need to install plugins because it’s very simple.
- Go to Facebook and get the code to make the like button: https://developers.facebook.com/docs/reference/plugins/like/
- Copy the code from part one and go to your WP Dashboard under Appearance -> Editor
- Select your theme on the top right dropdown.
- Click header.php from the list of files.
- Paste the first code after the tag.
- Update that file.
- Open index.php and find the loop. It should look like this:
- Go back to Facebook and copy the second code.
- Paste it inside of the loop at the end of the “entry” div.
- Replace the data-href URL with and that will generate the URL for that post.
- Update that file.
- Open single.php and find the loop and do steps 9-11 again.
Pretty simple. I also recommend checking out the WP Facebook Open Graph protocol plugin http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/
facebook like button tutorial Wordpress
February 17, 2012
My goal for today was to make my blog mobile. A site should not just be developed for desktops. “With the galloping development of modern technologies the screen size margin of your readership can be anything in-between a 30″ desktop monitor and the iPhone’s 3.5″ screen.” Speckyboy.com
For this, I used a popular plugin called “WPTouch”. To install WPTouch:
- Login to your WordPress Dashboard
- Click Plugins -> Add New
- Search for “WPTouch”
- Install and activate the plugin
- Click Settings -> WPTouch
- In the general settings I left most of the options except I unchecked “Show Author’s Name”, “Show Categories”, and “Hide Excerpts”
- Update your footer message.
- In advanced settings I unchecked “Enable Categories tab in the header”
- In the Icon Pool create an icon (59x60px) and upload the icon (you will need to scroll down and save options after you upload the icon)
- I didn’t like the pinstripe background because it didn’t match my site, so I opened Dreamweaver and edited /wp-content/plugins/wptouch/themes/default/style.css and around line 2068 I changed the background.
- You may also want to change the site title font. In the same stylesheet the style is around line 193.
- Since I’m using Google web fonts, I had to modify the WPTouch core header file /wp-content/plugins/wptouch/themes/core/core-header.php and add the reference to the Google font before the ending
- I also added more fonts to the WPTouch plugin settings by editing /wp-content/plugins/wptouch/html/style-area.php around line 81
which will appear under Settings -> WPTouch
*Remember if you are adding Google web fonts you will need to add the reference in the core-header.php file.
If you have any questions, leave a comment. To learn more about WPTouch see http://wordpress.org/extend/plugins/wptouch/
android iPhone mobile themes Wordpress WPTouch
February 16, 2012
Today I added a Live Search (or autocomplete) plugin to my blog and I’d like to create a short tutorial for how you can add Live Search to your WordPress blog.
- Login to your WordPress Dashboard and add this plugin “Dave’s WordPress Live Search”
- Activate the plugin.
- Go to Settings -> Live Search
- Decide how many results you want to display (I set mine to 5)
- If your search is near the top leave the direction as “Down” (you may try experimenting but most likely leave as “Down”)
- Check “Display Post Excerpt” and leave the other 3 unchecked
- Leave the default style as gray.
- Save Changes
- Most likely the width of the search box will be off so go to Plugins -> Editor and select “Dave’s WordPress Live Search” from the top right drop down.
- Click daves-wordpress-live-search/css/daves-wordpress-live-search_default_gray.css from the list of plugin files.
- Change the width in ul.search_results to match your search box.
- Make any other style changes you’d like and click update file.
- That’s it! You now have a working live search box!
If you want to know more about this plugin, see http://wordpress.org/extend/plugins/daves-wordpress-live-search/
autocomplete live search tutorial Wordpress
February 15, 2012
I found a great tutorial on Speckyboy.com that shows how to make a beautiful CSS3 search bar (in fact I’m using it on my site). Read the tutorial here:
css3 design search tutorials