You are Viewing : Home → CSS3 → WP UI – Using Multiple jQuery UI custom themes

WP UI – Using Multiple jQuery UI custom themes

By kavin |

With WP UI 0.5.5, it is now possible to use multiple custom themes downloaded from jQuery UI themeroller. Till now it was not straight away possible to use even multiple jQuery UI themes on the same page, but trust me, with this guide, it’s a breeze!

Create and download the custom theme from themeroller

Visit the jQuery UI themeroller page. You will now land on the Roll Your Own tab. You can start customizing your theme from here.

1-open-themegallery

jQuery UI theme roller

If you want to base your custom theme on another theme, click the “gallery tab”, and click edit under the desired theme.

Basing a custom theme from another jQuery UI theme

Choosing a theme as the base

Customize the theme to your heart’s content.

Customize and download a jQuery UI theme

Customize and Click Download theme.

Now comes the essential part, entering the correct CSS scope and folder name. I chose .wpui-custom and wpui-custom as an example, and this will be the argument to the WP UI shortcodes later on.

[wptabs style="wpui-custom"] ....................

[wptabs type="accordion" style="wpui-custom"]....
  1. As it is essentially a CSS class name, it shall contain alphabets, letters(not as the first character though), hyphens and underscore.
  2. Make sure you enter the preceding dotbefore the CSS scope.
  3. You can also click “unselect components“, before clicking download. This will cut down the download size to  400KB~
4-wp-ui-css-scope-jquery-ui-themes

Choosing a CSS scope

Click Download and then save the file (named something like jquery-ui-1.8.xx-custom.zip.)

Uploading the files to your server

Unzip the downloaded file and in the folder unzipped, navigate inside the CSS folder. There should the folder “wpui-custom” , as per our example and we chose that at the last step. This is the only folder we need to upload.

6-wpui-custom-theme-folders

Extract the custom theme folder from the downloaded file

Fire up your FTP client, login to your server and browse to your uploads directory.

If the wordpress blog is in http://example.com/blog ,then the uploads folder should be at /blog/wp-content/uploads/ , assuming that your wordpress is installed in the folder “blog” present in the root folder. Basic guide on using FileZilla is at codex.

This should brief that in a bit.

Filezilla-uploading-jquery-ui-themes-to-wordpress

Create and upload the custom themes inside the folder – wp-ui, under uploads

That’s all, the hard part’s over. Now the fun part.

Manage jQuery UI custom themes with WP UI

  • Go to wordpress admin -> WP UI options page -> Style Tab -> Manage jQuery UI custom themes. See that empty table over there? That’s ready for some fresh made Custom themes.
  • Click scan uploads, it should start scanning the uploads/wp-uidirectory and add them to the list.
  • Do you have your theme uploaded elsewhere,want to link the theme? Click Add Theme.
  • Need to edit that last entered theme? just Double click anywhere on the row, edit box will open up.

Now just click changes and you are ready to go!

7-wpui-custom-theme-manager

Managing Custom themes in WP UI options page

Using the custom themes with Shortcodes

Remember that shortcode argument I told you earlier? Yes, that is now the style’s name. To use it, take for example with our example customize-downloaded-custom(ah!) theme “wpui-custom” ,

[wptabs style="wpui-custom"]...............

Now view the front end of your blog, your tabs and accordion should be using custom themes you created!

Cheerio!

Kavin

← Previously :
Next : →
  • plugin_user

    Thanks, upgrade works great ! Best regards, plugin_user

    • Kavin Gray

      Thanks buddy, you’re welcome. :)

  • http://www.facebook.com/abdulrahman.hariri Abdulrahman Hariri

    Great feature! Thanks!

  • http://www.facebook.com/abdulrahman.hariri Abdulrahman Hariri

    I think there is something wrong with the scan theme feature. it is asking me to create a folder wp-content/uploadswp-ui rather than wp-content/uploads/wp-ui and I am guessing the / was dropped for some reason :)

    • Kavin Gray

      Hai Abdul, I might need some additional details about the wordpress, php server and permissions. Please post a thread at the Forums, we shall continue from there. :)

  • Jeffplaysguitar

    I uploaded the theme I created just fine.  And it shows up in my wpui editor block on the settings in wordpress.  However, I can’t make it my default or use the shortcode to get it to work.

    • Kavin Gray

      You can not make it default, yet. However if it is linked properly, it should work if shortcode is used with the style argument

      [wptabs style="wpui-custom"]

      You can check the source of your site to verify if the stylesheet is linked. :)

      • Jeffplaysguitar

        Where are all the files of the other themes stored? 

        • Kavin Gray

          All the jQuery UI themes are loaded from Google CDN.

        • Jeffplaysguitar

          I emailed you.  Any luck?

        • Kavin Gray

          Did you check the reply? :)

      • Jeffplaysguitar

        I’ve double checked my source and it’s fine.  On top of that, my style is always whatever I put as my default.  Even if I use shortcode to change a style it doesn’t change my style.  My style is always whatever I make as my default.

        • Kavin Gray

          Link to your stylesheet and a test page, please? :)

  • http://www.mimetismo.com.br/ Mimetismo Agência Web

    Hi,

    where is the examples of real life?  I saw this address (http://kav.in/projects/blog/wp-ui-tabs-accordion-sliders-demo/) but there is no any example real getting posts, pages, cats etc using ‘accordion’ or tables.

    Please, let me see some real examples and sintax to compare with my tries.

    I did teste in my page this code:

    [wptabs type="accordion" color="wpui-quark" effect="fade" speed="Teste"]
    [wptabtitle]Teste 1[/wptabtitle]
    [wptabcontent]fsadfdfsd[/wptabcontent]
    [wptabtitle]Teste 1[/wptabtitle]
    [wptabcontent]fsadfdfsd[/wptabcontent]
    [wptabtitle]Teste 2[/wptabtitle]
    [wptabposts cat="4" number="2"]
    [/wptabs]

    but, no run correct.

    An another time I test this sintax:

    [wptabs type="accordion" color="wpui-quark" effect="fade" speed="Teste"]
    [wptabposts cat="4" number="2"]
    [/wptabs]

    and again, the results wasn’t good.

    Please, help me!

    Att.
    Marinho
    jmarinhojr@gmai:disqus
    l.com

    • Kavin Gray

      Hi, there are examples in this page, at the bottom of the post.

      wptabposts are individual non-enclosing shortcodes , that are used separately.

      [wptabposts type="accordion cat="135" number="5"]

      Also make sure the category ID or name is valid, which is probably the most important. I suggest you read the the post to get the idea. :)

      • http://www.mimetismo.com.br/ Mimetismo Agência Web

        Hi, thanks for your help.  Let me do other question.  Is there the possibility of you made some “videos” using vimeo or youtube?  It’ll be very interesting to show capability products.

        Did you think about it?

        Best regards!

        • Kavin Gray

          Yes, i’ve always wanted to do that. Just haven’t got time though, i hope soon i will!

  • http://www.facebook.com/profile.php?id=100002915522199 Zainal Kl
  • Rob Sheldrake

    Custom themes simply do not work when using Themeroller. Everything I try has the same result… I can see the new background colour, I can see the correct icons and accordions work (tabs dont), however, the icon is above the label and the accordion/tabs are distorted.

    HELP!!!!

    • Kavin Gray

      Hi Rob, please try the following.

      1) Disable the custom CSS3 themes in Options page -> Styles tab -> Uncheck “load all styles”.
      2) Select a Custom theme downloaded from themeroller as your default, assuing that you uploaded, scanned and added.

      Please let me know. :)

      • Rob Sheldrake

        Hi Kavin, Exactly the same problem. I had actually tried this before but I went through the motions again just to prove to myself that I had tried this. It feels to me like some default styling is not being loaded.

        • Ruth

          I have a similar problem. I made a custom theme in theme roller. It works if I use horizontal tabs or accordion, but not vertical (which is what I want). I have also tried unchecking the “load all styles” box, with no change. Is there anything I can do?

          Otherwise, an awesome plugin. The best I have used (and I have used many!).

        • Kavin Gray

           Hi Ruth, above problem was solved before a couple versions. jQuery themes are less flexible, you might need to put some extra css to make them work correctly.

          http://pastie.org/private/lupahpu3vedwdedq78bq

        • IainB85

          I have the same problem described by Ruth above. I went and customized one of the jQueury templates as described above, followed the instructions, got it to install and show up OK in the list, but when I use it the formatting is all messed up in my vertical accordion. The triangle’s are above the text, tabs that were horizontal using a default jQuery theme are now vertical, etc.

          I looked at the code you pasted above… is this supposed to go in the generated .css file?  If so, it did not have any impact for me. 

        • Kavin Gray

           Hi there, the code goes on “Options page-> Style tab -> Custom CSS”.

  • http://twitter.com/beogradskioglas Beogradski oglasi

    Great feature! 

  • Fergpeterkin

    Hi I was trying to upload using this method and  when I scanned the plugin I got this message:
    “The directory wp-ui does not exist. Create the following folder through FTP or hosting’s file manager.
    /var/www/vhosts/arttus.co.uk/httpdocs/wp-content/uploads/wp-ui/”
    any ideas what I need to do?
    Thanks
    ferg

    • Fergpeterkin

      sorry this was what it said
      “The directory wp-ui does not exist. Create the following folder through FTP or hosting’s file manager.
      /var/www/vhosts/arttus(dot)co(dot)uk/httpdocs/wp-content/uploads/wp-ui/”

    • Kavin Gray

      Hi,  that message occurs only the plugin is not able to find a directory named “wp-ui” under /wp-content/uploads/.

      If you are sure you created and uploaded the files correctly, then please make sure the files permissions are set as needed.

  • http://www.inestus.com/ Anil

    hi Kevin, I want to close the according when page loads when some body clcik on the tab than it has to open. How should we do that ???

    Thanks

    Anil

  • jag

    Hi

    I’m trying to use a custom theme and the only method by which I can make it work is to select it as the default theme. Any ideas where I am going wrong?

    The code that I use is [wptabs style="pink-theme" type="accordion"]

    Thanks
    Jag

    • Kavin Gray

      Hi Jag, this is a bug with the current version, an update will released in ~ 2 days that corrects this problem. Please stay tuned.

      • jag

        Thanks for letting me know Kavin.

        Jag

  • http://holyszko.com/ Michal Holyszko

    Hi,

    When I click the “scan” this message appears:

    The directory wp-ui does not exist. Create the following folder through FTP or hosting’s file manager.
    [my_domain]/wp-content/uploadswp-ui/

    where [my_domain] is the rest of the path (hidden here for obvious reason)It seems that the script tries to scan the “uploadswp-ui” instead the “uploads/wp-ui”
    (missing baskslash?)TIA,Michal Holyszko

  • Bill Wills

    This plugin is causing conflicts with my post pages.  If I deactivate the plugin the conflict disappears.  Any suggestions on how to resolve, I’ve tried it with several similar WP themes and it has the same affect.  Here is a post with WP-UI activated.
    http://wielandcommunities.hwrwp.com/2012/02/17/houses-south-fulton/

    Here is another without the the tab on the post page:
    http://wielandcommunities.hwrwp.com/2012/02/15/484900-2771-paces-lookout-lane-unit-30-atlanta-ga-30339/

    • Kavin Gray

      Hi Bill, Most likely this is a conflict against another plugin or code, rather than the theme. The page you linked ( with tabs ) is looking as it should but without style – This can be totally corrected by selecting the style, Options page -> Style tab -> Select mutiple styles -> Check wpui-quark.

      If you are not sure this addressed the issue, please post in the forums. :)

  • Anonymous

    WP-UI causes display issues in my posts.  Looks to be a conflict with my WP Theme.  I’ve tried switching to other similar themes and they all have the same conflict with WP-UI.
    Here are a couple of links for examples:
     
    http://wielandcommunities.hwrwp.com/2012/02/17/houses-north-fulton/
     
     
    http://wielandcommunities.hwrwp.com/2012/02/15/484900-2771-paces-lookout-lane-unit-30-atlanta-ga-30339/
     
    The right side panel is not formated and puts unformated info below the post that should be in the right panel.

    • Kavin Gray

       Disable the related posts feature, This should resolve the issue.

      Also there are a couple div and para elements end tags that might be missing in your template, Please check on that.

  • Tom2012

    Hi Kavin,When I wrap the tap set and use the default of WP UI plugin, it displays a blue play image next to the tabs as picture below that I do not like. How can I get rid of them?
    Thank you for great work!

  • Mirefoot

    Hi, I can’t get my custom theme to save, what do I do next

  • Jae

    The last bit doesn’t seem to work with WP 3.5. I do everything as directed, and as I’ve done before when I was on WP 3.4.2 but when I click “Save” it doesn’t save.

  • Jae

    So, I downgraded back to WP 3.4.2, as 3.5 was not allowing me to save my custom style and I re-uploaded the custom style. But it doesn’t work! I can save it O.K., but the style isn’t working. It’s as if I haven’t got any CSS there at all, with just plain text! Any ideas?

  • Mathan

    for wp ui accordion, how can i use “heightstyle:content”, now its works by default “auto”: All panels will be set to the height of the tallest panel.how can i change this?