Monthly Archives: August 2011

A simple tabbed navigation menu created with CSS, HTML, and jQuery

Posted on August 29, 2011 by
2 comments

Here are the codes that I use to create a tabbed navigation menu for a website.

You can see a demo of the tabbed menu here.

First, copy and paste this block of code into your stylesheet:

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}

ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}

ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}

ul.tabs li a:hover {
background: #ccc;
}

html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}

.tab_content {
padding: 20px;
font-size: 1.2em;
color:#333;
}
Then, copy and paste this block of code into your web page where you want the tabbed menu to appear:
<ul class="tabs">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        Content of the first tab
    </div>
    <div id="tab2" class="tab_content">
       Content of the second tab
    </div>
</div>
Now, copy and paste this block of code into the <head> section of your web page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script>
Now, all you will need to do is style the menu the way you want and add your content to the different tabs.
Let me know if you have any questions or run into any issues with this.
Categories: CSS, HTML, jQuery | Tags: , , , , , ,

WordPress Tricks: Display a list of the titles of the most recent blog posts from several different categories

Posted on August 28, 2011 by
1 comment

Here is the code you can use to display the titles of your most recent posts in specific categories on a WordPress page.

Copy this block of code:

<?php
//for categories 1,5,3, show 1 post
$cat_args=array(
  'include' => '1,5,3',
  'orderby' => 'name',
  'order' => 'ASC'
   );
$categories=get_categories($cat_args);
  foreach($categories as $category) {
    $args=array(
      'showposts' =>3,
      'category__in' => array($category->term_id),
      'caller_get_posts'=>1
    );
    $posts=get_posts($args);
      if ($posts) {
        echo '<p><h4>Latest <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.' Posts</a>: </h4></p> ';
        foreach($posts as $post) {
          setup_postdata($post); ?>
          <p style="margin-left:20px;">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
          <?php
        } // foreach($posts
      } // if ($posts
    } // foreach($categories
?>
</div>

Now, simply paste that block of code into the page template where you want to display the list of post titles.

You can include or exclude posts from certain categories if you wish and can also control how many post titles to show from each category.

Let me know if you have any questions or trouble with this.

If you are looking for a way to display a certain number of blog post titles from just one category, you can use the code in my post Get the titles of recent blog posts from a certain category using wp_query.

Categories: PHP, WordPress | Tags: , , , , ,

WordPress Tricks: How to call and display one specific post

Posted on August 25, 2011 by
No comments

Here is the line of code I use to display the content of one particular post somewhere on my WordPress website:

<?php
$post_id = 26;
$queried_post = get_post($post_id);
$content = $queried_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]&gt;', $content);
echo $content;
?>

You will obviously need to replace the post ID (26) in the code above with the post ID of the post you want to call.

 

 

Categories: WordPress | Tags: , , , , ,

Creating a custom Twitter feed of search results for a specific term

Posted on August 22, 2011 by
8 comments

Here are the codes you need to create a custom Twitter feed that displays search results for a specific term or user.

First, let’s create the Javascript file that makes it all work.

Copy and paste this code into your favorite text editor:

$(document).ready(function() {
    // json call to twitter to request tweets containing our keyword, in this case 

'thelibzter'
    $.getJSON("http://search.twitter.com/search.json?q=thelibzter&callback=?", function(data) 

{
        // loop around the result
        $.each(data.results, function() {
            var text = this.text;
    
            if(text.charAt(0) != '@') {
                // construct tweet and add append to our #tweets div
                var tweet = $("<div></div>").addClass('tweet').html(text);
                // analyse our tweet text and turn urls into working links, hash 

tags into search links, and @replies into profile links.
                tweet.html('<div>' +
                    tweet.html()
                    .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:

[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
                    .replace(/(^|\s)#(\w+)/g,'$1<a 

href="http://search.twitter.com/search?q=%23$2">#$2</a>')
                    .replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/

$2">@$2</a>')
                    + '<br /><a href="http://www.twitter.com/' + 

this.from_user + '/status/' + this.id_str + '" target="_blank">' + $.timeSinceTweet

(this.created_at) + '</a></div>'
                    )
                    .prepend('<a href="http://www.twitter.com/' + 

this.from_user + '" target="_blank"><img src="' + this.profile_image_url + '" width="48" 

height="48" /></a>')
                    .appendTo('#tweets')
                    .fadeIn();
            }
        });
    });
});

(function($) {
    $.timeSinceTweet = function(time) {
        var date = new Date(time);
        var diff = ((new Date()).getTime() - date.getTime()) / 1000;
        var day_diff = Math.floor(diff / 86400);
        
        if (day_diff < 0 || day_diff >= 31 || isNaN(day_diff)) {
            return "View tweet";
        }
        
        if(day_diff == 0) {
            if(diff < 60) {
                return Math.ceil(diff) + " seconds ago";
            }
            else if(diff < 120) {
                return "1 minute ago";
            }
            else if(diff < 3600) {
                return Math.floor( diff / 60 ) + " minutes ago";
            }
            else if(diff < 7200) {
                return "1 hour ago";
            }
            else if(diff < 86400) {
                return Math.floor( diff / 3600 ) + " hours ago";
            }
        }
        
        if(day_diff == 1) {
            return "Yesterday";
        }
        else if(day_diff < 7) {
            return day_diff + " days ago";
        }
        else if(day_diff < 31) {
            return Math.ceil( day_diff / 7 ) + " weeks ago";
        }
        else {
            return "View Tweet";
        }    
    }
})(jQuery);

 

You will want to change the words highlighted in red above (thelibzter) to whatever search term you want to use.

Save the file as main.js and upload it to your server.

Now, add this line of code to the <head> section of your website:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>

Make sure that the path to main.js is correct.

You will want to style the Twitter feed to match the design of your web page. Add this code to your stylesheet and feel free to edit it to make the Twitter display the way you want:

#container { width: 500px; margin: 0 auto; }
#tweets .tweet {
  padding: 10px 20px;
  font-size: 15px;
  position: relative;
  border-bottom: 1px dashed #ededed;
  overflow: hidden;
}
#tweets .tweet img { margin-right: 12px; float: left; }
#tweets .tweet .content { width: 400px; float:  left; }
#tweets .tweet .content a.view { font-size: 10px; }

Now, simply add this code to your web page wherever you want the Twitter feed to appear:

<div id="container">
  <h1>Search results for "TheLibzter"</h1>
  <div id="tweets"></div>
</div>

And that’s it! Let me know if you run into any issues or have any questions.

You can find instructions and codes to use to create your own custom Twitter feed here – creating a custom Twitter widget for your website.

You can also find several custom Twitter feeds that I designed and are available for you to use here – custom Twitter feeds for your website.

Categories: Javascript, Random | Tags: , , , ,

WordPress tricks: How to make navigation menu items automatically evenly spaced and centered

Posted on August 20, 2011 by
1 comment

Here is the method I use to create an automatically evenly spacing navigation menu in a WordPress website. This way, no matter how many or how little pages your navigation menu contains, the menu items will be evenly spaced and centered.

First, create a new menu in WordPress by logging into the dashboard and clicking Menus under Appearance in the sidebar. Add all of the pages that you want in the navigation menu to your new menu.

Next, you will need to call this new menu in your header.php file instead of the default pages menu. See my post – WordPress tricks: Using a manually created menu for your main navigation menu  - for instructions on how to do this.

Next, you will need to edit the stylesheet codes that affect your navigation menu.

First, add these codes to the <ul> styles for your menu:

width: 928px;
  text-align:justify;
  margin:0 auto;

Obviously, you will want to change the width in the code to whatever the width of your menu is.

Next, add these codes to the <li> styles of the menu:

display: inline-block;

Note: you will want to erase any “position” or “float” declarations for the <li> items.

Now, you need to create a new menu item and add it to your menu. Go back to Appearance > Menus and add a menu item called “filler” or “test” or whatever you want. We are going to style this menu item so that it does not actually appear in the menu so it doesn’t matter what it’s called.

Important: make sure your “filler” menu item is positioned as the last item in the menu! Even later on, when you add new items to the menu, be sure that the “filler” menu item is always the last item on the menu.

Now, after you save the menu, visit your website. You will see the “filler” menu item at the end of the navigation menu. The next thing you need to do is to find it’s menu item ID number. To do this, either right-click the item and select “Inspect element” to use Firebug or view the source of the page. Each <li> item in the menu has it’s own ID – <li id=”menu-item-###”>. You need to figure out the ID number of the “filler” menu item.

Once you know the menu item ID, go back to your stylesheet. Add this block of code to your stylesheet:

#menu-item-519 {
 width:100%;
    display: inline-block;
    height:0px;
}
#menu-item-519 a {
 display:none;
}
#menu-item-519 a:hover {
 display:none;
}

Replace the numbers “519″ in the block of code above with the actual ID number of your ”filler” menu item.

This code prevents the “filler” item from actually displaying in your menu.

This method to create an evenly spacing navigation menu to your WordPress site worked well for me but let me know if you have any issues or trouble at all.

I based this menu trick off of the information I found in this article - http://dr2ab.wordpress.com/2011/03/24/even-horizontal-spacing-of-menu-items-with-css/.

Categories: CSS, WordPress | Tags: , , , , , ,

WordPress tricks: Using a manually created menu for your main navigation menu

Posted on August 20, 2011 by
1 comment

Here is the method I use to call one of my manually created menus in WordPress as my main navigation menu.

First, you obviously need to create the menu and add the links you want to it. You can do this by logging into the dashboard and going to Menus under Appearance in the sidebar.

Once you have the menu created, go to Editor under Appearance in the sidebar.

Open the header.php template file.

Find the line of code that calls the default pages menu. It should look something like this:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

And replace it with this:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'menu' => 'main' )); ?>

Make sure you replace the word “main” in the code above with the name of the menu that you want to use for your main navigation menu.

 

Categories: PHP, WordPress | Tags: , , , ,
Previous Entries