{"id":232,"date":"2011-06-03T06:53:10","date_gmt":"2011-06-03T06:53:10","guid":{"rendered":"http:\/\/spartatech-inc.com\/beginnerwordpresstutorials\/?p=232"},"modified":"2019-11-06T08:16:00","modified_gmt":"2019-11-06T08:16:00","slug":"how-to-use-jquery-for-wordpress-theme-styling","status":"publish","type":"post","link":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/2011\/06\/03\/how-to-use-jquery-for-wordpress-theme-styling\/","title":{"rendered":"How to use JQuery for WordPress Theme Styling"},"content":{"rendered":"<div style=\"width:550px\">\n<h3>JQuery Tabs for WordPress Website<\/h3>\n<p>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\u00a0 <a href=\"http:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JQuery UI library<\/a> available under GPL license.<\/p>\n<div>\n<ul>\n<li><a href=\"#tabs-1\">First<\/a><\/li>\n<li><a href=\"#tabs-2\">Second<\/a><\/li>\n<li><a href=\"#tabs-3\">Third<\/a><\/li>\n<\/ul>\n<div>Creating tabs is easy with JQuery UI Library.<\/div>\n<div>Creating tabs is fun with JQuery UI Library.<\/div>\n<div>JQuery UI Library makes developers life easy.<\/div>\n<\/div>\n<div class=\"demo-description\">\nClick tabs to swap between content that is broken into logical sections.\n<\/div>\n<p><!-- End demo description--><br \/>\nHere is the code for tabs:<\/p>\n<pre style=\"overflow: scroll;background: #ededed\">&lt;div id=\"tabs\"&gt;\r\n\t&lt;ul&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"<a>#tabs-1<\/a>\"&gt;First&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"<a>#tabs-2<\/a>\"&gt;Second&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"<a>#tabs-3<\/a>\"&gt;Third&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;\/ul&gt;\r\n\t&lt;div id=\"tabs-1\"&gt;Creating tabs is easy with JQuery UI Library.&lt;\/div&gt;\r\n\t&lt;div id=\"tabs-2\"&gt;Creating tabs is fun with JQuery UI Library.&lt;\/div&gt;\r\n        &lt;div id=\"tabs-3\"&gt;JQuery UI Library makes developers life easy.&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Add the following javascript code in the header section of your wordpress theme<\/p>\n<pre style=\"overflow: scroll;background: #ededed\">&lt;link href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8\/themes\/base\/jquery-ui.css\" rel=\"stylesheet\" type=\"text\/css\"\/&gt;\r\n&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8\/jquery-ui.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n$(\"#tabs\").tabs();\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>If you want to change the style of tabs you can modify jquery-ui.css file. Alternatively you can use the <a href=\"http:\/\/jqueryui.com\/themeroller\/\" target=\"_blank\" rel=\"noopener noreferrer\">themeroller<\/a> to change the tabs style.\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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\u00a0 JQuery UI library available under GPL license. First Second Third Creating tabs is easy with&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[36],"tags":[58,64],"class_list":["post-232","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-jquery-tabs","tag-wordpress-theme-development"],"_links":{"self":[{"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/posts\/232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/comments?post=232"}],"version-history":[{"count":3,"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/posts\/232\/revisions"}],"predecessor-version":[{"id":290,"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/posts\/232\/revisions\/290"}],"wp:attachment":[{"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/media?parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/categories?post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spartawebsolutions.com\/beginnerwordpresstutorials.com\/wp-json\/wp\/v2\/tags?post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}