Shailan.com » wordpress http://shailan.com About wordpress plugins, themes & web design Wed, 28 Jul 2010 14:46:36 +0000 en hourly 1 WordPress pushes the limits with PHP & Mysql http://shailan.com/wordpress-push-the-limits-up-with-php-mysql/ http://shailan.com/wordpress-push-the-limits-up-with-php-mysql/#comments Mon, 26 Jul 2010 21:08:48 +0000 Matt Say http://shailan.com/?p=1054 Continue reading →

This post is originally posted on Shailan.com.
Visit Shailan.com for more..

]]> Mark Jaquith announced that wordpress will no more support PHP4 & MySQL4. If you are (your host is) using PHP 4 or MySQL 4 you may not be able to catch the next wordpress update. Don’t know which version you have? Mark created a health check plugin just for this issue. You can install it using one click installer script on his site.

Well, I did my health check. I’m fine ;) How about you?

This post is originally posted on Shailan.com.
Visit Shailan.com for more..

related posts you may like:

]]> http://shailan.com/wordpress-push-the-limits-up-with-php-mysql/feed/ 0 Custom Dropdown Menu Using WordPress 3 Nav Menus http://shailan.com/custom-dropdown-menu-using-wordpress-3-nav-menus/ http://shailan.com/custom-dropdown-menu-using-wordpress-3-nav-menus/#comments Mon, 26 Jul 2010 12:44:12 +0000 Matt Say http://shailan.com/?p=1025 custom-menu-dropdown

Wordpress 3 brought many great features. One of those great features was navigation menu support. Although many themes not supporting this great feature yet, you can use it with dropdown menu widget to create custom menus on your site. In this tutorial i will explain you how to use custom navigation menus with dropdown menu widget. First make sure you have latest wordpress installation. Custom Navigation Menu support comes with Wordpress 3. So if your wordpress version is lower than that, you need to update first. Don't worry, it will worth it ;) If you have the latest wordpress installation now, you will see Menus link under Appearance section of the admin panel. Click on Menus to start building our brand new custom menu. Wordpress may warn you about "theme doesn't support custom menus" but don't worry. We will be using menu in our dropdown widget so it doesn't matter. You see white box there under + sign. Enter a name for our new menu. For example, let's call it, "My Custom Dropdown". How original! Click on create menu button afterwards to create the menu. Your menu is created now but it doesn't have any link inside. You will see tools on the left to add links to your custom menu. You can add blog pages & categories to your menu. You can also add custom links to your menu. After you add links, you can easily order your menu items using drag and drop. You can create sub menus dragging a link item under another. After your ordering is complete, save your menu. This menu is now added to dropdown menu widget. Steps from now on requires dropdown menu widget installed on your site. If you haven't already click here to get it. Add a dropdown menu widget to your widget area. Note that not all the themes have header widget areas. I like my custom themes to have it. Makes wordpress more customizable. Select your custom menu from the Menu selection of dropdown menu widget. And click on Save. If you just installed the dropdown menu widget you may need to visit menu style page. Change dropdown menu theme to any theme you like and then click on Save Changes. Now visit your blog and enjoy your new custom menu. Cheers! ]]> custom-menu-dropdown

WordPress 3 brought many great features. One of those great features was navigation menu support. Although many themes not supporting this great feature yet, you can use it with dropdown menu widget to create custom menus on your site. In this tutorial i will explain you how to use custom navigation menus with dropdown menu widget. First make sure you have latest wordpress installation. Custom Navigation Menu support comes with WordPress 3. So if your wordpress version is lower than that, you need to update first. Don't worry, it will worth it ;) If you have the latest wordpress installation now, you will see Menus link under Appearance section of the admin panel. Click on Menus to start building our brand new custom menu. WordPress may warn you about "theme doesn't support custom menus" but don't worry. We will be using menu in our dropdown widget so it doesn't matter. You see white box there under + sign. Enter a name for our new menu. For example, let's call it, "My Custom Dropdown". How original! Click on create menu button afterwards to create the menu. Your menu is created now but it doesn't have any link inside. You will see tools on the left to add links to your custom menu. You can add blog pages & categories to your menu. You can also add custom links to your menu. After you add links, you can easily order your menu items using drag and drop. You can create sub menus dragging a link item under another. After your ordering is complete, save your menu. This menu is now added to dropdown menu widget. Steps from now on requires dropdown menu widget installed on your site. If you haven't already click here to get it. Add a dropdown menu widget to your widget area. Note that not all the themes have header widget areas. I like my custom themes to have it. Makes wordpress more customizable. Select your custom menu from the Menu selection of dropdown menu widget. And click on Save. If you just installed the dropdown menu widget you may need to visit menu style page. Change dropdown menu theme to any theme you like and then click on Save Changes. Now visit your blog and enjoy your new custom menu. Cheers!

related posts you may like:

]]> http://shailan.com/custom-dropdown-menu-using-wordpress-3-nav-menus/feed/ 0 Dropdown Menu Widget Update 1.5.2 http://shailan.com/dropdown-menu-widget-update-1-5-2/ http://shailan.com/dropdown-menu-widget-update-1-5-2/#comments Thu, 24 Jun 2010 16:52:09 +0000 Matt Say http://shailan.com/?p=955 dropdown-menu-widget-brand-new

I updated the dropdown menu widget plugin today. It was a huge update so i think i will get a lot of comments about the new version. This update was necessary to make it work with wordpress 3.0. While doing that i played a little with default styles & plugin itself. Here is a list of things that are new with this update:
  • Wordpress 3.0 compatible,
  • Support for Wordpress 3.0 navigation menus, (Widget automatically adds your navigation menus to menu select dropdown)
  • Themes got better & simpler now,
  • Fixed background problems with themes (for example "Shiny black" theme now supports wider links),
  • Added option to rename home link. You can easily change your home link text from Settings -> Dropdown menu options panel,
  • Added custom css insert option. Now you can easily add your customization without changing any files.
While updating the plugin i wanted it to be a clean version. So i removed some unused elements from the plugin. Here is a list of things i removed from the plugin,
  • Removed Exclude Pages plugin. This wasn't working because of meta box changes in wordpress. You can easily get this plugin from wordpress plugins.
  • Removed inline style option from the plugin. You can use custom css instead of inline styling.
  • Removed Custom Walker support for now. I may add it later on if needed.
  • Removed Blue Tabs theme because it was custom walker dependant.
I hope you won't get hurt by those changes. And after all those changes what's next? Here is a list of things i want to complete with the next version:
  • Easy Menu Theme Creator,
  • Custom class support,
  • A New Tabbed Menu Theme.
Now, its your turn. Just update the plugin an see if you'll like it. If you see a problem you can report bugs here [and] you can request a custom theme here.]]> dropdown-menu-widget-brand-new

I updated the dropdown menu widget plugin today. It was a huge update so i think i will get a lot of comments about the new version. This update was necessary to make it work with wordpress 3.0. While doing that i played a little with default styles & plugin itself. Here is a list of things that are new with this update:
  • WordPress 3.0 compatible,
  • Support for WordPress 3.0 navigation menus, (Widget automatically adds your navigation menus to menu select dropdown)
  • Themes got better & simpler now,
  • Fixed background problems with themes (for example "Shiny black" theme now supports wider links),
  • Added option to rename home link. You can easily change your home link text from Settings -> Dropdown menu options panel,
  • Added custom css insert option. Now you can easily add your customization without changing any files.
While updating the plugin i wanted it to be a clean version. So i removed some unused elements from the plugin. Here is a list of things i removed from the plugin,
  • Removed Exclude Pages plugin. This wasn't working because of meta box changes in wordpress. You can easily get this plugin from wordpress plugins.
  • Removed inline style option from the plugin. You can use custom css instead of inline styling.
  • Removed Custom Walker support for now. I may add it later on if needed.
  • Removed Blue Tabs theme because it was custom walker dependant.
I hope you won't get hurt by those changes. And after all those changes what's next? Here is a list of things i want to complete with the next version:
  • Easy Menu Theme Creator,
  • Custom class support,
  • A New Tabbed Menu Theme.
Now, its your turn. Just update the plugin an see if you'll like it. If you see a problem you can report bugs here & you can request a custom theme here.

related posts you may like:

]]> http://shailan.com/dropdown-menu-widget-update-1-5-2/feed/ 11 WordPress 3.0 is here! http://shailan.com/wordpress-3-0-is-here/ http://shailan.com/wordpress-3-0-is-here/#comments Fri, 18 Jun 2010 10:37:11 +0000 Matt Say http://shailan.com/?p=934 Continue reading →

This post is originally posted on Shailan.com.
Visit Shailan.com for more..

]]> After a little delay on schedule, here comes one great release : “WordPress 3.0 Thelonious!”.
Yesterday Matt announced the new release of wordpress, called “Thelonious” after Thelonious Monk.

This new version has a lot of enhancements including the most wanted navigation menu support, custom headers, custom background, shortlinks support, and better use of custom post types and custom taxonomies. WordPress 3 admin interface is lighter and faster with less colors to let you focus on content more. Updating plugins & even themes got easier; you can update all the outdated plugins with a click of a button!

You can view the release video trailer below for more tips on the new release:

You should also watch Matt’s talk at WordCamp San Francisco on the announcement page for a brief history on development.

You can view more information on WordPress 3.0 on the WordPress Codex.

So, What are you waiting for? Go update your blog!

This post is originally posted on Shailan.com.
Visit Shailan.com for more..

related posts you may like:

]]> http://shailan.com/wordpress-3-0-is-here/feed/ 2 5 ways to hide your private content in wordpress http://shailan.com/5-ways-to-hide-your-private-content-in-wordpress/ http://shailan.com/5-ways-to-hide-your-private-content-in-wordpress/#comments Fri, 11 Jun 2010 13:19:16 +0000 Matt Say http://shailan.com/?p=874 blogging-private-with-wp

SAY you want a private blog to post your secrets OR make your blog available for the registered users only. Wordpress allows you to create protected (private) posts but if you want full privacy this won't be enough. In this post i will show you how you can easily turn wordpress into a private blog.

  1. Absolute Privacy

    This plugin allows you to lock down wordpress completely against unregistered views. You can also disable feed views within same plugin. One of the best features that plugin gives option to allow view on certain pages. You need to enter page id's you want to be visible. All other content will be hidden to guest views.

  2. Private WP

    This plugin disables all content views and redirect users to login screen. It has a simple interface and does just what you expect to.

  3. Private Only

    This plugin redirect all users to login screen. One great feature is that you can customize the login interface using this plugin. This will make your site more attractive. Not tested in wordpress 3.0 though.

  4. WP-Private

    Wp-Private allows you to hide certain parts of content only. You can use [protected] & [/protected] shortcode tags to hide your content from guests or regular users. Plugin will display a login form or a text message telling user should register or subscribe. One feature it brings is that not all registered users can view the content. That's why settings page is entitled "Premium Content Manager".

  5. Private WP Suite

    Private WP Suite is as simple as abc. It allows you to lock down your blog, your feeds and even your uploads (Needs .htaccess read/write rights). It also allows you to keep certain ip addresses out of the protection. I don't think this ip feature is really usefull though. I don't recommend using it.
Here i showed you 5 different plugins to lock down your blog and start posting protected. I hope you liked it. ]]> blogging-private-with-wp

SAY you want a private blog to post your secrets OR make your blog available for the registered users only. WordPress allows you to create protected (private) posts but if you want full privacy this won't be enough. In this post i will show you how you can easily turn wordpress into a private blog.

  1. Absolute Privacy

    This plugin allows you to lock down wordpress completely against unregistered views. You can also disable feed views within same plugin. One of the best features that plugin gives option to allow view on certain pages. You need to enter page id's you want to be visible. All other content will be hidden to guest views.

  2. Private WP

    This plugin disables all content views and redirect users to login screen. It has a simple interface and does just what you expect to.

  3. Private Only

    This plugin redirect all users to login screen. One great feature is that you can customize the login interface using this plugin. This will make your site more attractive. Not tested in wordpress 3.0 though.

  4. WP-Private

    Wp-Private allows you to hide certain parts of content only. You can use [protected] & [/protected] shortcode tags to hide your content from guests or regular users. Plugin will display a login form or a text message telling user should register or subscribe. One feature it brings is that not all registered users can view the content. That's why settings page is entitled "Premium Content Manager".

  5. Private WP Suite

    Private WP Suite is as simple as abc. It allows you to lock down your blog, your feeds and even your uploads (Needs .htaccess read/write rights). It also allows you to keep certain ip addresses out of the protection. I don't think this ip feature is really usefull though. I don't recommend using it.
Here i showed you 5 different plugins to lock down your blog and start posting protected. I hope you liked it.

related posts you may like:

]]> http://shailan.com/5-ways-to-hide-your-private-content-in-wordpress/feed/ 0 Dropdown Menu Widget Update: 1.4.0 http://shailan.com/dropdown-menu-widget-update-1-4-0/ http://shailan.com/dropdown-menu-widget-update-1-4-0/#comments Thu, 13 May 2010 16:38:01 +0000 Matt Say http://shailan.com/?p=823 Continue reading →

This post is originally posted on Shailan.com.
Visit Shailan.com for more..

]]>

I made two updates to the dropdown menu widget.  Here are the updates:

  1. Fix IE display errors. This support is added using jquery. So it should work with every wordpress installation. Since IE doesn’t support hover pseudo class for li elements i added a simple javascript to add .hover class when you mouse over them. I tested it on my site with IE8 and it is working now. Not tested with older IE versions though.
  2. Second update is about wrapping menu items. As you see on my menu items with long text on it like “Dropdown Menu Widget” make menu large and some people don’t like this view. That’s why i added option for no-wrap. Now you can easily change this wrapping behaviour from your options panel. (Note: This behaviour is limited for certain themes only.)

And here is a list of things i want to add to the next versions:

  1. Support for WordPress 3.0 menu & navigation system,
  2. Theme edit screen,
  3. Visual theme selection,
  4. z-index option.

You can download the latest version of the dropdown menu widget here.

That’s all for now. If you like this plugin please support its development. Thanks!

You may also like my Subpages Plugin for wordpress. Check it out!

This post is originally posted on Shailan.com.
Visit Shailan.com for more..

related posts you may like:

]]> http://shailan.com/dropdown-menu-widget-update-1-4-0/feed/ 4 image banner widget update, it now supports category selection http://shailan.com/image-banner-widget-update-it-now-supports-category-selection/ http://shailan.com/image-banner-widget-update-it-now-supports-category-selection/#comments Thu, 06 May 2010 14:47:04 +0000 Matt Say http://shailan.com/?p=808 image-banner-widget-display-for

I added category select option to the image banner widget. Now you can easily display banners only for certain categories. While adding the banner to your sidebar or widget area, just select its category from the dropdown. After you save the widget it will display only on the category page you selected. It will appear both on category archive pages and posts pages with same category. I also updated category text widget which displays content/html based on the category. Now you can also select All categories. So you won't need normal text widget anymore. You can easily convert your widget to a category specific or general content anytime. You can download latest version of the category text widget here. Liked those widgets? Don't forget to visit my wordpress plugins page for more widgets.]]> image-banner-widget-display-for

I added category select option to the image banner widget. Now you can easily display banners only for certain categories. While adding the banner to your sidebar or widget area, just select its category from the dropdown. After you save the widget it will display only on the category page you selected. It will appear both on category archive pages and posts pages with same category. I also updated category text widget which displays content/html based on the category. Now you can also select All categories. So you won't need normal text widget anymore. You can easily convert your widget to a category specific or general content anytime. You can download latest version of the category text widget here. Liked those widgets? Don't forget to visit my wordpress plugins page for more widgets.

related posts you may like:

]]> http://shailan.com/image-banner-widget-update-it-now-supports-category-selection/feed/ 2 how to change post thumbnail crop position in wordpress http://shailan.com/how-to-change-post-thumbnail-crop-position-in-wordpress/ http://shailan.com/how-to-change-post-thumbnail-crop-position-in-wordpress/#comments Wed, 05 May 2010 08:58:46 +0000 Matt Say http://shailan.com/?p=781 wp-thumb-crop-position

I get many complaints about wordpress thumbnail (aka post featured image in wordpress 3) crop position lately. Many of my clients tell that they need top part of the image as thumbnail rather than the useless middle part. That's why i dived into the core and got the solution for cropping top part of the thumbnails. Here i will show you how to change crop behaviour of wordpress. Cropping function is called image_resize and it is located in media.php. Step1. Open media.php file under wp-includes folder. Step2. Find the function named "image_resize_dimensions" (Around line 309). Unfortunately this function is not pluggable and doesn't use any hooks so we will edit it directly. Find the lines: [php]$s_x = floor( ($orig_w - $crop_w) / 2 ); $s_y = floor( ($orig_h - $crop_h) / 2 );[/php] Step3. Those two variables define the start point of crop that will be used. Here is a sample image that will be cropped with those variables shown: Step4. If you want top of part of the image as post featured image then $s_y value must remain zero. So we change that line to: [php]$s_y = 0; //floor( ($orig_h - $crop_h) / 2 );[/php] Step5. Save the file and upload it to wp-includes folder. Last Step. A post image is cropped at the first time it is uploaded. To update thumbnails you need this great plugin called Regenerate Thumbnails. This plugin takes post thumbnails and crops them again using your latest media settings. After you install it click on the "Regenerate All Thumbnails" button under tools. It will automatically crop all the post thumbnails again. This will take a minute or two depending on your server and number of posts you have. After the regeneration is complete all your thumbnails will be cropped from top. You can download the modified media.php for wordpress 2.9.2 here: media.php ]]> wp-thumb-crop-position

I get many complaints about wordpress thumbnail (aka post featured image in wordpress 3) crop position lately. Many of my clients tell that they need top part of the image as thumbnail rather than the useless middle part. That's why i dived into the core and got the solution for cropping top part of the thumbnails. Here i will show you how to change crop behaviour of wordpress. Cropping function is called image_resize and it is located in media.php. Step1. Open media.php file under wp-includes folder. Step2. Find the function named "image_resize_dimensions" (Around line 309). Unfortunately this function is not pluggable and doesn't use any hooks so we will edit it directly. Find the lines: [php]$s_x = floor( ($orig_w - $crop_w) / 2 ); $s_y = floor( ($orig_h - $crop_h) / 2 );[/php] Step3. Those two variables define the start point of crop that will be used. Here is a sample image that will be cropped with those variables shown: Step4. If you want top of part of the image as post featured image then $s_y value must remain zero. So we change that line to: [php]$s_y = 0; //floor( ($orig_h - $crop_h) / 2 );[/php] Step5. Save the file and upload it to wp-includes folder. Last Step. A post image is cropped at the first time it is uploaded. To update thumbnails you need this great plugin called Regenerate Thumbnails. This plugin takes post thumbnails and crops them again using your latest media settings. After you install it click on the "Regenerate All Thumbnails" button under tools. It will automatically crop all the post thumbnails again. This will take a minute or two depending on your server and number of posts you have. After the regeneration is complete all your thumbnails will be cropped from top. You can download the modified media.php for wordpress 2.9.2 here: media.php

related posts you may like:

]]> http://shailan.com/how-to-change-post-thumbnail-crop-position-in-wordpress/feed/ 3 adding “nofollow” option to wordpress add link page http://shailan.com/adding-nofollow-option-to-wordpress-add-link-page/ http://shailan.com/adding-nofollow-option-to-wordpress-add-link-page/#comments Fri, 30 Apr 2010 22:18:42 +0000 Matt Say http://shailan.com/?p=764 wp-add-link-nofollow-fix

With default wordpress add link page you are not allowed to type into the rel input box. Since nofollow is popular now one of my clients requested this option to be added to the add link feature. Add link form is generated by edit-link-form.php under wordpress admin folder. XFN metabox is generated from meta-boxes.php file though. So this is the file we are going to edit. Here is how to add nofollow option to wordpress add link page: 1. Open  /wp-admin/includes/meta-boxes.php. 2. Find the function link_xfn_meta_box and find following lines: [php]<tr> <th scope="row"> <?php /* translators: xfn: http://gmpg.org/xfn/ */ _e('identity') ?> [/php] 3.Right before the <tr> tag insert the following code: [php]<tr> <th scope="row"> nofollow </th> <td> <label for="nofo"> <input class="valinp" type="checkbox" name="nofo" value="nofollow" id="nofo" <?php xfn_check('nofo', 'nofollow'); ?> /> nofollow</label> </td> </tr> [/php] This will add "nofollow" option to add link options. 4. Save and upload the file to the same folder. 5. And you are done. Now you can add nofollow rel tag to your links from wordpress add link page. ]]> wp-add-link-nofollow-fix

With default wordpress add link page you are not allowed to type into the rel input box. Since nofollow is popular now one of my clients requested this option to be added to the add link feature. Add link form is generated by edit-link-form.php under wordpress admin folder. XFN metabox is generated from meta-boxes.php file though. So this is the file we are going to edit. Here is how to add nofollow option to wordpress add link page: 1. Open  /wp-admin/includes/meta-boxes.php. 2. Find the function link_xfn_meta_box and find following lines: [php]<tr> <th scope="row"> <?php /* translators: xfn: http://gmpg.org/xfn/ */ _e('identity') ?> [/php] 3.Right before the <tr> tag insert the following code: [php]<tr> <th scope="row"> nofollow </th> <td> <label for="nofo"> <input class="valinp" type="checkbox" name="nofo" value="nofollow" id="nofo" <?php xfn_check('nofo', 'nofollow'); ?> /> nofollow</label> </td> </tr> [/php] This will add "nofollow" option to add link options. 4. Save and upload the file to the same folder. 5. And you are done. Now you can add nofollow rel tag to your links from wordpress add link page.

related posts you may like:

]]> http://shailan.com/adding-nofollow-option-to-wordpress-add-link-page/feed/ 0 how to widgetize your theme in 3 simple steps! http://shailan.com/how-to-widgetize-your-theme-in-3-simple-steps/ http://shailan.com/how-to-widgetize-your-theme-in-3-simple-steps/#comments Fri, 30 Apr 2010 14:55:10 +0000 Matt Say http://shailan.com/?p=727 widgetize-your-wp-theme

Widgets are certainly one of the best features in wordpress. It is all customizable and it is so easy to use. It all started with vertical sidebars but i believe all-widget themes will be so popular with the release of wordpress 3.0 which brings user navigation menus to the wordpress widgets. Here i will show you how to add a horizontal widget area to your theme header so that you can easily put your navigation menu, ad banners and all kind of text/html/javascripts. Before starting i advice you to get a copy of notepad++ since it makes codes more understandable with coloring. Here is a list of things to do:
  1. Define widget area
  2. Put the widget area code in your header
  3. Styling the widget area
  4. Adding widgets to your header

1. Defining the widget area:

  1. Open functions.php file in your theme folder. And make a search for "register_sidebar" in your file. This is generally where we register our widget areas to wordpress.
  2. Copy & Paste the following code to the appropriate blank space ( For example after: register_sidebar(array( ....  )); ) [php]register_sidebar(array( 'id' => 'header-widgets', 'name' => 'Header widgets', 'description' => 'Widget area below the header', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' ));[/php] Note that id value for widget area must be unique.
  3. And now our widget is registered, save the file and close it.
You can install a new theme using zip files without messing with FTP. Simply save your files and when you are finished editing you can zip them and upload it through wordpress admin panel (Appearance -> Add New Themes -> Upload). Remember to delete old theme before uploading the new one.

2. Put the widget area code in your header:

  1. Open header.php in your theme folder.
  2. Copy & Paste the following code where you want your widget area to appear. [php] <div id="header-widgets"> <?php dynamic_sidebar('header-widgets'); ?> </div> [/php] It will be generally after site description. Be sure your code is inside <div id="header">...</div> tags.
  3. Save the file and close it.

3. Styling the widget area:

  1. Open your styles.css file. A blank styling template should be like that:[css].sidebar{/* styles that apply to all sidebar class elements*/ } #header-widgets {/* styles that apply to header-widgets layer */ } #header-widgets .widget{/*styles that apply to all widgets under this widget area*/} #header-widgets .widgettitle{/*widget headings*/} [/css] If you are fond of css you can fill in this template and append it to the end of file.
  2. First thing we do is hiding widget headings. We won't use widget headings in this widget area:[css]#header-widgets .widgettitle{ display:none !important;  } [/css]
  3. We should also remove margin and padding for widget container so that widgets will fit better:[css]#header-widgets {padding:0px; margin:0px; }[/css]
  4. Let's say you want a little margin between widgets:[css]#header-widgets .widget{ margin-bottom:10px; }[/css]
  5. This will be enough styling for a simple widget area. If you want widget specific styling, you can enter it below your styling file like this:[css]#header-widgets .widget_text{ text-align:center; } [/css]
  6. Here is the final code:[css]#header-widgets {padding:0px; margin:0px; } #header-widgets .widget{ margin-bottom:10px; } #header-widgets .widgettitle{ display:none !important; } #header-widgets .widget_text{ text-align:center; }[/css]

4. Adding widgets to your header:

  1. First save and upload your files to your theme directory. Remember to overwrite your old files for your changes to appear.
  2. Now if you visit Appearance -> Widgets panel you will see our new widget area called "Header Widgets".
  3. You can add as many widgets as you like they will all appear in your header.
  4. Check your site about the appearance and go on playing with css codes until you are happy with it.
And we are all done. I have some pre-made all widget wordpress themes. You can use them as you like: [subpages childof="312" depth="1" exceptme="true"] If you are looking for widgets to use in your widget area here are some of my widgets & plugins: [subpages childof="295" depth="1" exceptme="true"] I hope you find this tutorial useful. If you are looking for a wordpress expert I am currently available for freelance projects. Contact me for a quote, it is always free!]]> widgetize-your-wp-theme

Widgets are certainly one of the best features in wordpress. It is all customizable and it is so easy to use. It all started with vertical sidebars but i believe all-widget themes will be so popular with the release of wordpress 3.0 which brings user navigation menus to the wordpress widgets. Here i will show you how to add a horizontal widget area to your theme header so that you can easily put your navigation menu, ad banners and all kind of text/html/javascripts. Before starting i advice you to get a copy of notepad++ since it makes codes more understandable with coloring. Here is a list of things to do:
  1. Define widget area
  2. Put the widget area code in your header
  3. Styling the widget area
  4. Adding widgets to your header

1. Defining the widget area:

  1. Open functions.php file in your theme folder. And make a search for "register_sidebar" in your file. This is generally where we register our widget areas to wordpress.
  2. Copy & Paste the following code to the appropriate blank space ( For example after: register_sidebar(array( ....  )); ) [php]register_sidebar(array( 'id' => 'header-widgets', 'name' => 'Header widgets', 'description' => 'Widget area below the header', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' ));[/php] Note that id value for widget area must be unique.
  3. And now our widget is registered, save the file and close it.
You can install a new theme using zip files without messing with FTP. Simply save your files and when you are finished editing you can zip them and upload it through wordpress admin panel (Appearance -> Add New Themes -> Upload). Remember to delete old theme before uploading the new one.

2. Put the widget area code in your header:

  1. Open header.php in your theme folder.
  2. Copy & Paste the following code where you want your widget area to appear. [php] <div id="header-widgets"> <?php dynamic_sidebar('header-widgets'); ?> </div> [/php] It will be generally after site description. Be sure your code is inside <div id="header">...</div> tags.
  3. Save the file and close it.

3. Styling the widget area:

  1. Open your styles.css file. A blank styling template should be like that:[css].sidebar{/* styles that apply to all sidebar class elements*/ } #header-widgets {/* styles that apply to header-widgets layer */ } #header-widgets .widget{/*styles that apply to all widgets under this widget area*/} #header-widgets .widgettitle{/*widget headings*/} [/css] If you are fond of css you can fill in this template and append it to the end of file.
  2. First thing we do is hiding widget headings. We won't use widget headings in this widget area:[css]#header-widgets .widgettitle{ display:none !important;  } [/css]
  3. We should also remove margin and padding for widget container so that widgets will fit better:[css]#header-widgets {padding:0px; margin:0px; }[/css]
  4. Let's say you want a little margin between widgets:[css]#header-widgets .widget{ margin-bottom:10px; }[/css]
  5. This will be enough styling for a simple widget area. If you want widget specific styling, you can enter it below your styling file like this:[css]#header-widgets .widget_text{ text-align:center; } [/css]
  6. Here is the final code:[css]#header-widgets {padding:0px; margin:0px; } #header-widgets .widget{ margin-bottom:10px; } #header-widgets .widgettitle{ display:none !important; } #header-widgets .widget_text{ text-align:center; }[/css]

4. Adding widgets to your header:

  1. First save and upload your files to your theme directory. Remember to overwrite your old files for your changes to appear.
  2. Now if you visit Appearance -> Widgets panel you will see our new widget area called "Header Widgets".
  3. You can add as many widgets as you like they will all appear in your header.
  4. Check your site about the appearance and go on playing with css codes until you are happy with it.
And we are all done. I have some pre-made all widget wordpress themes. You can use them as you like: If you are looking for widgets to use in your widget area here are some of my widgets & plugins: I hope you find this tutorial useful. If you are looking for a wordpress expert I am currently available for freelance projects. Contact me for a quote, it is always free!

related posts you may like:

]]> http://shailan.com/how-to-widgetize-your-theme-in-3-simple-steps/feed/ 0