Download to read offline
Uploaded byhiren soni
Wordpress Widgets type
This document provides information about various widgets available in WordPress and how they work. It describes default widgets like archives, calendar, categories, custom menu, meta, pages, recent comments, recent posts, RSS, search, tag cloud, and text. It also covers how widgets are configured and displayed, and provides instructions for creating custom widgets by extending the WP_Widget class and defining required functions.
Wordpress Widgets type
- 1. Widgets • WordPress Widgetsadd content and features to your Sidebars. • Examples are the default widgets that come with WordPress; for post categories, tag clouds, navigation, search, etc. • Plugins will often add their own widgets.
- 2. • Widgets wereoriginally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly "widgetized" WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure. • Widgets require no code experience or expertise. • They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.
- 3. Archives Widget • TheArchives Widget organizes your previously published posts by month. • Settings – Once you add the widget to your sidebar from Appearance → Widgets, you’ll see that the widget settings look like this: Title: Set the title to be displayed above the archives in your sidebar. (i.e. Archives, Old News) Show post counts: If this box is checked, the total number of posts published during that month will be displayed next to the link. Display as a drop down: Check this box to display the months on a single line, as a drop down menu, rather than as a list. This is handy if you want to save space or have been writing your blog for a long time.
- 4. Calendar Widget • TheCalendar Widget is a simply, easy-to-use widget that displays links to your posts by date. • Settings – Once you add the widget to your sidebar from Appearance → Widgets, you’ll see that the widget settings look like this: – Title: Set the title to be displayed above the calendar in your sidebar. (i.e. Calendar, Posts This Month)
- 5. Categories Widget • TheCategories Widget organizes your posts by category in your blog’s sidebar. • Note: Only categories that are attached to posts will be displayed in the widget. • Title – Sets the title that will display above the categories in the sidebar. (i.e. Categories) • Show as dropdown – Check this box to display the categories in a drop down menu rather than as a list. This is handy if you want to save space or have a lot of categories. • Show post counts – If this box is checked, the total number of published posts for that particular category will be displayed next to the link. You can show post counts with both the list and dropdown menu formats. • Show hierarchy – If you have parent and child categories (subcategories within main categories) you can choose to display the hierarchy (pictured below) or just leave the list “flat,” without indicating which subcategories fit inside your main categories (pictured above). You can show category hierarchies with both the list and dropdown menu formats.
- 6. Custom Menu Widget •The Custom Menu Widget allows you to display pages, categories, and custom links in your blog’s sidebar. • Title: Sets text that will display immediately above the custom menu in the sidebar. • Select Menu: Use this to choose which of your custom menus to display. If you haven’t already created a custom menu, you’ll need to do that first on the Appearance -> Menus page.
- 7. Meta Widget • TheMeta Widget is a simple tool that makes it easy to log in and out of your blog and access your dashboard and RSS feeds from your sidebar. • Title: Set the title to be displayed above the meta links in your sidebar.
- 8. Pages Widget • ThePages Widget displays your blog’s pages in your sidebar. This can make it easier for your readers to navigate around your blog. • Title: Set the title to be displayed above the list of pages. • Sort by: When displaying the list of pages you can sort by Page title, Page order, or Page ID. Selecting Page title will display your pages alphabetically. With Page order, you take control over the ordering. You will need to set the page order option for each page. Sorting by Page IDs will display your pages in the order they were first created. • Exclude: If you would like to exclude any pages from being displayed, you can enter the Page IDs (separated by commas).
- 9. Recent Comments Widget •The Recent Comments Widget is a sidebar tool that displays the most recent comments readers have left on your blog. • Title Set the title that will display above the recent comments area in your sidebar. (i.e. Recent Comments, What Readers Are Saying, etc.) • Number of comments to show How many of the recent comments you would like the widget to display. The maximum you can show is 15.
- 10. Recent Posts Widget •The Recent Posts Widget displays your most recent posts in your sidebar, making it easy for your readers to see what’s new on your blog. • Once you add the widget to your sidebar from Appearance → Widgets, you’ll see that the widget settings look like this:
- 11. • Title: Setsthe title that will display above the recent posts in the sidebar. (e.g., Latest Posts, What’s New) • Number of Posts: Limits the number of posts to display. (If you have fewer posts than the limit, that number of posts will show.) • Display post date: Shows or hides the published date of the post.
- 12. RSS Widget • TheRSS Widget displays posts from any RSS feed. • Enter the RSS feed URL here: You will need to get the RSS feed URL from the blog or web site you would like to display in the sidebar. • Some RSS examples: – http://en.blog.wordpress.com/feed/ – WordPress.com news feed – http://www.nytimes.com/services/xml/rss/nyt/Opinio n.xml – New York Times Op-Ed headlines – http://www.amazon.com/rss/tag/sci-fi/popular/ – Most popular Sci-fi products on Amazon
- 13. • Give thefeed a title: Set the title displayed above the feed items. • How many items would you like to display?: Sets the number of entries from the feed to show on your sidebar. • Display item content?: Check this box to show a brief excerpt from the post in addition to its title. • Display item author if available?: Check this box to show the author’s name. • Display item date?: Check this box to show the date the post was published.
- 14. Search Widget • TheSearch widget adds a search box to your blog sidebar or footer, allowing readers to easily search your site for posts and pages you’ve written in the past. Note: Some themes have a search bar built into the header. In this case, if there is no option to remove it in Appearance → Theme Options, it is not removable. If you have the Custom Design upgrade, you can hide it using CSS.
- 15. • The Searchwidget will return results from the titles and the bodies of your posts and pages, and from media titles, alt text, file names, and captions. It will not return results from widgets, comments, categories, or tags. • Also, note that the search results will display posts with the matching term in the post title in reverse- chronological order. • Then, it will display posts with the matching term in the post body in reverse-chronological order. • So for example, if you have just published a post about Michigan titled “This Weekend,” and you also have an older post titled “Michigan,” searching for ‘michigan’ will display that older post at the top of the list.
- 16. Tag Cloud • TheTag Cloud Widget shows a list of all the tags you’ve assigned to your posts. The most common tags will be displayed in the largest font size. • The Tag Cloud Widget will display up to 75 of your most popular tags. • Note: Only tags that are attached to posts will be displayed in the widget. • Title: The title displayed above the widget on your blog.
- 17. Text Widget • TheText Widget allows you to add text or HTML to your sidebar. It’s the most popular widget because of its power and flexibility. • You can use a text widget to display text, links, images, HTML, or a combination of these. • Note: Text Widgets fall under the same code security restrictions that posts and pages do, so if you use any code that isn’t allowed, it won’t be displayed.
- 18. Widget Creation • WordPresswidgets are classes, which makes them easy to duplicate. • Creating a new widget is a matter of copying the basic widget class, then adjusting the enclosed functions to output the content you have in mind. • The widget class contains four functions: – one that registers the widget. – one that prints the widget output. – one that updates the widget options. – one that displays the options form.
- 19. • To createa widget, you only need to extend the standard WP_Widget class and some of its functions. • Structure: class My_Widget extends WP_Widget { public function __construct() { // widget actual Processes } public function form( $instance ) { // outputs the options form on admin } public function update( $new_instance, $old_instance ) { // processes widget options to be saved } public function widget( $args, $instance ) { // outputs the content of the widget } } register_widget( 'My_Widget' );
- 20. The Widget OptionsPanel is Optional • Defining the form() and update() functions is optional. They are necessary only if your widget needs some configuration input from the user. You can leave them out if you don’t want to provide any widget options.
- 21. Constructor • The widgetclass’s constructor gives WordPress some information on the widget. The name of the widget, the dimensions of the widget’s options panel, the description to be shown under the widget’s name in the Widgets administration page are all configured in this function. This constructor defines two arrays and then passes them to the WP_Widget parent class.
- 22. • The firstargument to the parent class constructor is a unique identifier for the widget defined by this class. • The second argument is the name of the widget as it will be shown to the user in the Widgets administration page. • The third argument is an associative array with the following keys: – classname –This element’s class name will be set to this value. – description – The description of the widget as it will be shown in the Widgets Administration section. • The fourth argument is an associative array with the following keys: – height – Height of the widget’s options panel. – width – Width of the widget’s options panel.
- 23. Define the OptionsPanel Interface • WordPress expects the form() function defined above to output the input fields to the receive input from the user. function form($instance) {} • The function takes one argument – $ instance. This variable contains the configuration values for this widget. • The fields in the options are placed within a <form> tag that is submitted via an AJAX request. Which means a form tag shouldn’t be added in the definition above. WordPress handles the saving of the widget data for you. • The $this->get_field_name() and $this->get_field_id() functions are used to generate names for the form fields so that there are no conflicts in names with the input fields on the Widget options page.
- 24. Save Options PanelSettings • The business logic that saves the settings selected in the options panel above should be placed in the save() function. • function update($newinstance,$oldinstance) {} • The function takes two arguments : – The first argument – $newinstances in this case – has the configuration information of the widget as it was entered in the options panel. WordPress automatically detects all the form elements and uses their names for array elements. – The second argument – $oldinstance in this case – has the configuration information of the Widget prior to changing the settings. • Options Panel Doesn’t Support File Uploads
- 25. Define the Widget •Now we are going to define the widget itself. WordPress expects the HTML of the widget to be generated by a function named widget() function widget($args,$instance) { extract($args); $before_widget; $before_title; $title; $after_title; $after_widget; } • The widget function takes two parameters: $args and $instance.
- 26. • The $argsvariable contains a few theme related variables: • before_widget – The HTML to be printed before the widget body. • after_widget – The HTML to be printed after the widget body. • before_title – The HTML to be printed before the title of the widget. • after_title – The HTML to be printed after the title fo the widget.
- 27. • The abovementioned variables are set in the WordPress theme by the Theme author in the declaration of the theme sidebar in the functions.php file. • The variable $instance has the configuration information for this widget instance that was saved in the update() function in the previous step. • The first line of the calls the extract() function. The function takes an associative array. It creates variables named after the keys of the array and sets them to the value corresponding to those keys.
- 28. Register Widget • Theregister_widget() function takes one argument – the name of the widget class.