In this WordPress tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.

In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let’s jump in and learn how to create our own Tabber widget, which we’ve made available for downloading at the end of this article.

Saving Sidebar Space

The main advantage of tabs is that you can fit more widgets into the sidebar. And tabs look good. The image below shows how much vertical space is taken up by three standard widgets (using the default Twenty Ten theme). The default layout is on the left, and our tabber widget is on the right:

Before We Start

A few things are useful to know. Because we are building a widget in this article, you might want to learn about WordPress’ Widgets API and how to create a basic widget:

• “Widgets API,” WordPress Codex
• “Creating Widgets for WordPress 2.8,” Tim Trott, Azulia Designs
• “Advanced WordPress Widgets,” WP Roots

Use these resources as needed while following the tutorial along.

The Basic Idea

The idea for this widget is simple: select a sidebar, and the Tabber widget will grab all of its widgets and display them as tabs. In the widget’s interface, you can select a sidebar, specify an extra CSS class and optionally apply your own styles. When enabled, the plugin will register an extra sidebar (which may be removed if you have other ways to add a sidebar). Then, using the same code, you can add more sidebars, and each of them can hold instances of the Tabber widget.

To control your widgets, Tabber uses idTabs for jQuery, created by Sean Catchpole, but you could always use another solution. Note that additional CSS is loaded to style the resulting widget.

So, the goal with Tabber is to transform any widget’s output into markup that can be used to display tabs

tags for this. Other themes may use complicated markup that can’t be predicted or successfully transformed into the output needed for tabs.

The solution to this problem is to intercept the widget’s parameters before rendering, and then to restructure them into useful structures using JavaScript or jQuery for the tabbed output. More on that later.

action. We register the widget on line 17.

Widget interface.

The Main Tabber Widget Class

Tabber is a normal widget, and in this case it is located

SETTINGS: PLUGIN INTERFACE

The widget has two settings:

• “sidebar”
  to hold the ID of the selected sidebar
• “css”
  for extra CSS classes to style the Tabber widget

When selecting which sidebar to use, you must avoid using the sidebar that holds the Tabber widget. Otherwise, it will spin into endless recursion. To avoid this, before rendering the widget’s content, check whether the selected sidebar is the same as the parent sidebar. This can’t be prevented while the widget is set up, because the widget’s panel affords very little control over this.

Also, using sidebars that are not normally used is a good idea. To help with this, the plugin includes sample code to help you add an extra sidebar.

This function requires the name of the sidebar, and it will display all widgets in it. Line 9 contains the check mentioned before, to prevent recursion when displaying sidebar content if the selected sidebar is the same as the parent sidebar.

Lastly, the filter is removed, and any widgets belonging to other sidebars are displayed normally, without modification.

WIDGET MODIFICATION

To prepare for the transformation done with JavaScript, the tabber widget includes the

tag for the control tabs. After this filter, the widget’s output will look like this:

JavaScript For Widget Transformation

Once the widget’s presentation is modified, one thing remains: to complete the transformation and get the titles from the widgets and turn them into tabs:This code uses jQuery to get all of the Tabber widgets based on the

• will hold only its content.

Final Tabber example.

Finally, when all this is done, we enable idTabs to activate the tabs control. And with the default styling loaded from the

How To Install The Tabber Plugin

• Download version 1.0.0 of the Tabber plugin.

As with any other plugin, unpack it, upload it to WordPress’ plugins folder, and activate it from the plugins panel. When you go to the “Widgets” panel, you will see an additional sidebar, “Tabber Example Sidebar,” at the end on the right. And “Available Widgets” will show one more widget, “D4P Smashing Tabber.”

Add this new widget to the “Main Sidebar.” From the “Sidebar” widget drop-down menu, select “Tabber Example Sidebar,” and save the widget. Now, open the “Tabber Example Sidebar” and add the widgets you want to be displayed as tabs. You can add as many widgets as you want, but pay attention because if you add too many, the tab’s control will break to two or more lines, and it will not look pretty. Starting with two or three widgets is best.

Conclusion

Creating one widget to display several other widgets as a tab isn’t very difficult, as you can see. The trick is in adjusting the widgets’ output to a format that can be transformed into tabs, and then using JavaScript to display them. We’ve explored just one possible transformation method; you can always experiment with ways to rearrange widget elements.

We used idTabs here, but there are many methods of displaying tabs, and not all of them require JavaScript:

• idTabs
• EasyTabs
• jQueryUI Tabs
• Tabify

I prefer using a jQuery-based solution, and idTabs is very easy to use and easy to style and it works in all browsers. Check out other solutions, and see what extra features they offer to enhance your own tabbed widgets.

from : http://www.smashingmagazine.com/2014/08/27/a-tour-of-wordpress-4-0/

[quote font=»verdana» font_size=»14″ font_style=»italic» color=»#474747″ bgcolor=»#F5F5F5″ bcolor=»#dd9933″ arrow=»yes» align=»centre»]This Demo Content Brought to you by Momizat Team [/quote]

this is tags and keywords : wordpress themes momizat Tutorial wordpress templates

Practical Tips From Top WordPress Pros Recently I shared with you some advice from the WordPress community to beginners. But what if starting out is already a dim memory? What if you’re already so immersed in the world of WordPress that you dream of Trac and you bore your partner with talk of your latest achievement with custom post types?

Below are some tips from WordPress pros from across the community. Many of the tips cover development, but there’s also advice on business, running your website and, of course, getting involved with the community.

Image: Phil Oakley

Tips For Developers

USE EVERYTHING WORDPRESS HAS TO OFFER

WordPress’ core can do a lot for you, without you having to write a bunch of code. WordPress is much more powerful when you make use of its APIs and built-in functionality. “If you use WordPress as your framework,” says Trent Lapinski, “it will enable you to focus on developing an innovative plugin or theme.”

Matty Cohen recommends always looking for and using functionality available within WordPress before creating a function from scratch. “Examples of this include, at the higher level, using the WordPress Settings API and, at the lower level, using themedia_handle_upload() function to upload your files, rather than a custom upload routine.” Matty gives an example of this with his WooSlider plugin. In order to create a familiar and consistent experience for WooThemes users, he did the following:

• He used the Settings API for the settings screen.
• He added a tab to the “Upload/Insert Media” popup for creating shortcodes. This interface uses a combination of the Settings API, custom form-creation logic, and some custom JavaScript to create the HTML output and the shortcode.

WooSlider uses built-in WordPress functionality to make the user experience better.

Making use of everything WordPress has to offer results in less coding for you and a better overall experience for users. But those aren’t the only benefits. Amy Hendrix points out that the code you write will be future-proof. Writing your own scripts could eventually result in conflicts.

USE HOOKS

Hooks are the means by which you hook into WordPress and add your own code without modifying core files. There are two types of hooks: actions and filters. Action hooks are places where you can insert and run code. Filters are used to manipulate output.

If you’re working with WordPress’ core and with plugins and themes, then you should be extending by making use of all of the hooks available. Adam Brown maintains a list of all of the hooks that have ever appeared in WordPress.

IMPLEMENT HOOKS

Create your own hooks. By implementing hooks in your plugins and themes, you create opportunities for other people to extend them and create add-ons. Shane Pearlmanbelieves that by doing so, you “encourage plugin developers to make opportunities for the community to extend and also use them.”

Not only does this create opportunities for other developers, but you make life easier for yourself. “With a ‘well-hooked’ theme or plugin,” says Simon Wheatley, “you can make adjustments between clients, or between sites on a multisite setup, a lot more easily than by effectively forking your own code for every scenario.”

WRITE SECURE CODE

If you write plugins or themes, keeping the code secure is critical. How bad would you feel if your code was responsible for websites getting hacked? Brad Williamsrecommends learning how data validation pertains to WordPress. A detailed page on data validation can be found in the Codex; so, if you’re a developer, you have no excuse for writing insecure WordPress plugins and themes. Following the guidelines will ensure that your code is safe and secure from exploits and hacks. As Ryan Hellyer points out, “Having a beautiful website which does exactly what a client requires is great, but it’s not so great when it gets injected with spam links and is de-indexed from search engines!”

FOLLOW BEST PRACTICES

Ryan Duff and Brad Williams highlight some best practices that developers should stick to:

• Make sure the data that you’re passing is always being passed in the way it’s expected to. Setting a variable on an incorrect line could result in a trickle-down effect of error messages.
• WordPress has coding standards, so stick to them. This will keep your code in a format that all WordPress developers will recognize, making bug tracking much easier!

EMBRACE THE CODE BASE

Both Helen Hou-Sandi and Jake Goldman of 10up recommend that you spend time looking at the code base. As Jake points out, “Relying on the Codex and Google searches for solving unique problems with WordPress is like trying to tune a car’s performance without ever looking under the hood.” Rachel Baker also suggests looking at the change logs, and Silviu-Cristian Burc? points us to his advice in “How to Become a WordPress Guru.”

A good integrated development environment (IDE) for PHP — such as NetBeans, PhpStorm, phpDesigner or Vanilla Eclipse — will offer code auto-completion for WordPress functions and their arguments and will display documentation on functions inline. You’ll be able to easily jump to function and class declarations to study them. “Think the core code base is too scary?” asks Jake. “Pick a file in wp-includes and start reading — you might be surprised by how approachable it is, and how much you can learn.”

Looking at the code, as Helen adds, also increases the likelihood that you’ll find a way to contribute code to the WordPress project. You’ll also become familiar with plugins and themes, understand how people do things properly, and recognize when they get it wrong.

SHARE YOUR CODE

It’s in the nature of code in an open-source project to be shared, forked and iterated on. If you’re working on solutions, then share them with the community. “Share and publish your solutions, as a plugin, widget or theme,” says Cátia Kitahara. “Not for every project, but with most of them, we end up with a solution that could be of use to many others. So, do it as a way of giving back to the community. I know it takes time to prepare something to be distributed through the repositories, but remember the time WordPress saves for us!”

You could put your code on GitHub, which Ben Balter recommends:

“GitHub’s got a very different culture, and the ability for anyone to submit a pull request is a real game changer. It really lowers the barrier to contribute, and democratizes the entire plugin authoring experience. As a bonus, use GitHub’s built-in wiki functionality to maintain your plugin’s documentation (especially FAQ), so that anyone, even non-technical users, can contribute.

Lastly, if you have plugin tests, integrate with Travis CI so that you can automatically test pull requests before merging. To help you get started, a handful of tools are out there, such as GitHub ? WordPress.org deployment scripts and GitHub wiki ? WordPress readme converters.”

Eric Mann points out that if you’ve built your project in isolation, then you’re likely missing out on different approaches. Sharing your code with people gives them the opportunity to point out how it can be improved. WordPress itself is built collaboratively and is the result of hundreds of minds looking at it from different perspectives. If you want your code to excel, you should be sharing it, too.

USE CUSTOM POST TYPES

Taking advantage of custom post types for specific use cases is a great way to leverage WordPress. At the Theme Foundry, Drew Strojny has three custom post types: themes, stories and tutorials. This enables members of his team to quickly find and create content.

Drew recommends making custom post types even more flexible by adding custom meta data. This enables you to style your content and provides opportunities to reuse that meta data across your website. He provides the example of the meta data he uses with the “Story” post type in use on his “Customer Stories” page.

from : http://www.smashingmagazine.com/2013/03/20/practical-tips-top-wordpress-pros/

[quote font=»verdana» font_size=»14″ font_style=»italic» color=»#474747″ bgcolor=»#F5F5F5″ bcolor=»#dd9933″ arrow=»yes» align=»centre»]This Demo Content Brought to you by Momizat Team [/quote]

this is tags and keywords : wordpress themes momizat Tutorial wordpress templates