• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

Beginner Wordpress Tutorials

  • Home
  • WordPress Tutorials
  • Articles
  • Web Design
  • About

How to use JQuery for WordPress Theme Styling

June 3, 2011 by FWB Editor

JQuery Tabs for WordPress Website

Tabs are generally used to efficiently break content into multiple sections that can be swapped to save space, much like an accordion. The easiest way to add stylish tabs to a wordpress is by usingĀ  JQuery UI library available under GPL license.

  • First
  • Second
  • Third
Creating tabs is easy with JQuery UI Library.
Creating tabs is fun with JQuery UI Library.
JQuery UI Library makes developers life easy.
Click tabs to swap between content that is broken into logical sections.


Here is the code for tabs:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">First</a></li>
		<li><a href="#tabs-2">Second</a></li>
		<li><a href="#tabs-3">Third</a></li>
	</ul>
	<div id="tabs-1">Creating tabs is easy with JQuery UI Library.</div>
	<div id="tabs-2">Creating tabs is fun with JQuery UI Library.</div>
        <div id="tabs-3">JQuery UI Library makes developers life easy.</div>
</div>

Add the following javascript code in the header section of your wordpress theme

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

If you want to change the style of tabs you can modify jquery-ui.css file. Alternatively you can use the themeroller to change the tabs style.

Filed Under: Web Development Tagged With: jQuery Tabs, wordpress theme development

Primary Sidebar

Categories

  • Cell Phones
    • iPhone
    • Mobile Audio Video
    • Mobile Cell Phone
    • Mobile Cell Phone Accessories
    • Mobile Cell Phone Reviews
    • Mobile Cell Phone SMS
  • Computers
    • Computers and Technology
    • Data Recovery
    • Laptops
  • ECommerce
    • Email Marketing
    • Internet and Businesses Online
    • Internet Marketing
  • Internet
    • Broadband Internet
    • Cable & Satellite TV
    • Networking
  • Miscellaneous
    • Online Education
  • Multimedia
    • Audio Streaming
    • Video Streaming
    • VoIP
  • Software
    • Computer Games
    • Databases
    • Windows
  • Web
    • Domain Names
    • RSS
    • Web Design
    • Web Development
    • Web Hosting

Footer

  • Home
  • WordPress Tutorials
  • Articles
  • Web Design
  • About

Latest Blog Posts

  • How to use JQuery for WordPress Theme Styling
  • Broken Link Checker – Essential Webmaster Tools
  • Features of a Well Designed Website
  • iPhone App Provides Access To Local Libraries
  • Website Design For Mobiles and iPhones – The Next Big Wave!

Blogroll

  • Documentation
  • Plugins
  • Suggest Ideas
  • Support Forum
  • Themes
  • WordPress Blog
  • WordPress Planet

Copyright © 2023 · Genesis Sample on Genesis Framework · WordPress · Log in