Lil Josh

A tech blog about web development with PHP, MySQL, jQuery, CSS3 and various other programming languages.

Build a jQuery Twitter Feed

November 11, 2012

Copy and paste the code below into a post, page, widget, or your HTML code. Be sure to replace the screen_name on line 4.

[code lang="js" highlight="4"]

NOTE: You will need jQuery for this to work. If this isn't working, try including the following library at the beginning of this code.

<script src="http://code.jquery.com/jquery-latest.js"></script>
api feed jquery json tutorial twitter

3D Facebook Button WordPress Plugin

July 27, 2012

I’ve developed a new plugin that allows you to use a shortcode to create a Facebook logo that falls open when you hover, revealing how many likes your site has. The plugin can be found at:

http://wordpress.org/extend/plugins/3d-facebook-button/

My future plans are to allow users to like the site when the button is clicked and make a better non-WebKit browser (Firefox, IE) version. Let me know what you think!

3D Facebook Button like button wordpress plugin

How to Build a Floating Navigation Bar

July 21, 2012

This guide will show you how to keep your navigation at the top as you scroll down the page. You can see a demonstration on this page by scrolling down. Notice how the navigation scrolls down with you. There is very little code involved, so here we go!

  1. Determine what your navigation #ID is. In this example, my navigation ID is #navi You should replace mine with your own. There is a good plugin for Firefox and Chrome called Web Developer, which allows you to “Display Element Information” when you click on an element, such as navigation. I recommend using this plugin to determine your navigation #ID.
  2. Add this jQuery code near the footer/bottom of your site.:
    [code lang="js" highlight="7,18,20"]
    /****************************************
    * Floating Navigation jQuery feature
    ****************************************/
    $(function() {

    // get initial top offset of navigation
    var floating_navigation_offset_top = $('#navi').offset().top;

    // define the floating navigation function
    var floating_navigation = function(){
    // current vertical position from the top
    var scroll_top = $(window).scrollTop();

    // if scrolled more than the navigation, change its
    // position to fixed to float to top, otherwise change
    // it back to relative
    if (scroll_top > floating_navigation_offset_top) {
    $('#navi').css({ 'position': 'fixed', 'top':0});
    } else {
    $('#navi').css({ 'position': 'relative' });
    }
    };

    // run function on load
    floating_navigation();

    // run function every time you scroll
    $(window).scroll(function() {
    floating_navigation();
    });

    });

  3. Replace #navi with your own navigation ID on the lines highlighted above.
  4. OPTIONAL: To ensure your navigation stays on top, add a high z-index. Open your CSS stylesheet and find your navigation CSS and add this property:
    [code lang="css"]
    z-index:99999;

That's all! Feel free to leave your site URLs where you've used this feature. Also, if you have any recommendations for future how-to guides please contact me with your ideas.

fixed navigation floating navigation scrolling navigation sticky navigation

How to keep your WordPress site secure

July 14, 2012

In this article I will explain how to keep your WordPress site secure so that it is not vulnerable to an attack. WordPress is a popular target since many WordPress sites become outdated and hackers are aware of vulnerabilities in older WordPress versions.

Download the Latest WordPress now or visit Dashboard → Updates in your site admin to update now. For full instructions on updating WordPress see http://codex.wordpress.org/Updating_WordPress

Keeping WordPress secure is especially important on shared hosting (such as GoDaddy or HostGator), since a compromise can affect all of the sites on that server. The following are my recommendations for keeping WordPress secure so that your site is not a target for attack.

  1. Update WordPressplugins, and themes to the most current version. For instructions on updating WordPress see http://codex.wordpress.org/Updating_WordPress
  2. Locate wp-config.php on your server and update the security keys. This makes your site harder to hack by adding random elements to the password. For instructions on updating the security keys see http://codex.wordpress.org/Editing_wp-config.php#Security_Keys
  3. Make wp-config.php readable by only you (chmod 600 wp-config.php). This file contains database information and security keys that would allow a hacker to gain control of your site.
  4. Don’t have plugins that you don’t need. Review your plugins and remove any that are not used.
  5. Backup your database often. There are WordPress plugins that can backup your database automatically. I recommend WP-DB-Backup
  6. Backup all of your site files before doing an update (especially wp-content/ since that contains your site themes and plugins).
  7. NEVER have world writable files or folders.
  8. Remove unused WordPress users and update passwords regularly.
  9. If you are setting up WordPress, consider using a different table prefix (other than wp_). This makes it harder to hackers to guess the table name.
  10. All of the suggestions made above are irrelevant if your computer has a keylogger installed. Be sure to keep your OS and antivirus up-to-date.

Feel free to contact me if you have any questions about these suggestions or if you’d like me to take a quick look at your site.

how-to Security Wordpress