sts dropdown
This plugin (Download) creates a drop down menu for the static pages and subpages, links, categories and the archive in wordpress 2.1.x . It doesn’t interfere with the sidebar and leaves the display of the pages in the sidebar intact.
I’m not really familiar with php, so this code probably isn’t poetry really, but it worked for me. Any questions, feedback, critique or suggestions for improvements are very welcome.
It is based on several functions of the wp-templates in your wp-includes-folder, which I changed a little and added a drop down css, based on the css-drop down menu by tjkdesign (www.tjkdesign.com...).
Demo-Version
Basically the plugin creates some css in your header, so that your pages, their children etc. are automatically turned into a drop down menu. If you want to change the appearance , you can change the css within the plugin.
The 'exclude='-command works for the top pages as well. Just add the pages you don't want to be displayed on your site to the according field in the options panel in the admin panel. The same goes for the subpages.
The drop down pages can be sorted after their Page Order. In order to order the pages via that you will have to give them a page order number in the admin-panel under the according page under 'Page Order'. If you don't they will be displayed in the order of their page_id.
Attention: ‘sts-dropdown-css’ at the moment works only for three layers of pages! So, if you have not only parent, children and grand children pages but also grand grand children pages etc., the menu probably won’t work.
Installation:
1. Download the plugin.
2. Unzip files
3. Copy the file sts-drop-css.php into your plugin-folder. Make sure, you have wordpress 2.1.x installed.
4. Activate the plugin in the admin panel.
5. Copy the line
and paste it wherever you want the drop down menu to appear. (I placed it in kubrick’s theme after the header div and that is what the default-css refers to, but you can put it wherever you like. If you choose to put it into a different place, you may have to adjust the css within the plugin though.)
displays the pages
displays the links
displays the categories
displays the archives
That’s it. I hope you enjoy it and/or find it useful. The use of the plugin is free of course. However, if you think the maintenance of the plugin and this website is worth a small donation, I'd be happy if you clicked on the button 'Spenden' below. Thank you!
I’m not really familiar with php, so this code probably isn’t poetry really, but it worked for me. Any questions, feedback, critique or suggestions for improvements are very welcome.
It is based on several functions of the wp-templates in your wp-includes-folder, which I changed a little and added a drop down css, based on the css-drop down menu by tjkdesign (www.tjkdesign.com...).
Demo-Version
Basically the plugin creates some css in your header, so that your pages, their children etc. are automatically turned into a drop down menu. If you want to change the appearance , you can change the css within the plugin.
The 'exclude='-command works for the top pages as well. Just add the pages you don't want to be displayed on your site to the according field in the options panel in the admin panel. The same goes for the subpages.
The drop down pages can be sorted after their Page Order. In order to order the pages via that you will have to give them a page order number in the admin-panel under the according page under 'Page Order'. If you don't they will be displayed in the order of their page_id.
Attention: ‘sts-dropdown-css’ at the moment works only for three layers of pages! So, if you have not only parent, children and grand children pages but also grand grand children pages etc., the menu probably won’t work.
Installation:
1. Download the plugin.
2. Unzip files
3. Copy the file sts-drop-css.php into your plugin-folder. Make sure, you have wordpress 2.1.x installed.
4. Activate the plugin in the admin panel.
5. Copy the line
- <?php sts_list_pages('exclude=&sort_column=menu_order&title_li=' ); ?><?php sts_links_list(); ?><?php sts_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?><?php sts_get_archives('type=monthly'); ?>
and paste it wherever you want the drop down menu to appear. (I placed it in kubrick’s theme after the header div and that is what the default-css refers to, but you can put it wherever you like. If you choose to put it into a different place, you may have to adjust the css within the plugin though.)
- <?php sts_list_pages('exclude=&sort_column=menu_order&title_li=' ); ?>
- <?php sts_links_list(); ?>
- <?php sts_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?>
- <?php sts_get_archives('type=monthly'); ?>
That’s it. I hope you enjoy it and/or find it useful. The use of the plugin is free of course. However, if you think the maintenance of the plugin and this website is worth a small donation, I'd be happy if you clicked on the button 'Spenden' below. Thank you!
hi.. this destroys my kubrick-derived layout when looking at it in IE6;
i added a box below the hedaers, and now the header+footer are shifted to the left. if i try to correct it with IE-only paddings, the page-text shifts.. argl.. drives me mad..
any hints??
all the other browsers work fine!
Hi, just wanted to know if tehre is a vertical version of this for navigation. Thanks.
no, sorry, just as is.
but it shouldn’t be too difficult to change it to a vertical version. just change the css within the php-file accordingly. look at tjk for further information on what the css does.
Hi
Excellent plugin. Take a look at:
EFE & GB Nets
I styled the css myself. I suppose the only problem I see is not being able to add pages to the menu myself!
Once again, excellent plugin.
Rich
Hello - this looks like a great pulg-in and it installed easily and looked great - I could see the sub-pages but when I tried to move my mouse onto them they disappeared. Am I doing something wrong?
Thanks!
can you send me a link to your site? maybe I can help you then.
did you change anything in the plugin? css?
Oh yeah - I forgot the link - sorry! I actually just reinstalled it and it seems to be working now. I must have screwed it up some how the first time.
This is an amazing plug-in!
Thanks!
Just found your great little plugin. I hope I’ll be able to make it do what I want from it. Seems good but then again my skills are very limited. Good job. Really like it.
I wonder if there is a way to exclude certain pages, and I don’t mean subpages. I’m pretty new at this and I can’t really figure this out. I had a look (an intense stare) are the part in the .php on exclusion but it was way to complicated for me. Is there a simple solution to this?
yes, this is easy:
where you enter: {?php sts_list_pages(’exclude=&sort_column=menu_order&title_li=’ ); ?}
just add the page numbers you want to exclude like this:
{?php sts_list_pages(’exclude=13,14,15&sort_column=menu_order&title_li=’ ); ?}
that’s it. this works for all pages. parent, child and grandchild.
(to show the php here I changed <> into {}.)
I actually tried that earlier, maybe there is something wrong elsewhere. the following shows up in my header:
WordPress database error: [You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near ‘ 2 ORDER BY menu_order ASC’ at line 1]
SELECT * FROM wp_posts WHERE post_status = ’static’ AND ID = 2 ORDER BY menu_order ASC
Won´t bother you anymore now. I had made a change in the code were I shouldn’t have. Now it’s all good. Thanks for the help.
Great plugin! Can you maybe explain me how to change the color of the boxes (grey) to any other color and make the boxes smaller so that it fits more to my needs and colorscheme on my website
Thnxs in advance!
hi roy,
sure, you can change colors and the width of the boxes in the css within the plugin. Go to your admin navigation and go to plugin-editor. select the dropdown-plugin and go to the bottom of the file. there you’ll find the css. change the ‘width’ (there are several. for parent, child and grandchild-pages) and the background-colors the way you want.
But there’ll be a new version of the plugin in a week or so. not much different from the current, but there are some bugs with IE that have been fixed. So you change the css in the plugin now but be sure to download the new version next week and adjust the css there in the same way you are doing it in the current version.
Haha…why didn’t i think of that earlier *lol* It’s pretty clear …THNXS for the quick reply. And i’ll def download the new version.
Stefan, is it also possible to only have my categories all set out next to each other on top as dropdowns… so that if you hover over a category, the posts will drop down? If so, can you tell or explain me how…
No, I’m sorry, but I don’t think that’s possible. At least not with this plugin.
To show every post in the dropdown menu you would have to load every post every time beforehand.
And don’t think the plugin would be very useful anymore if it loaded every post every time you load the page.
no that’s not exactly what i mean. I would like to have my categories to be in the drop down instead of pages/links/archive etc.
Similar to this site: http://www.formatmag.com
Thanks for your reply
do you mean the categories from left to right and the subcategories in the dropdown?
I’m sure it’s not to hard to do that. but you’d have to change the plugin quite a bit. at the moment I can’t really tell you how though. sorry.
that’s exactly what i mean indeed…I can’t seem to find anyone on the web who knows how to do that…I saw your plugin and i thought it shouldn’t be that hard for the creator of it. I guessed wrong. Do you happen to know a workaround to achieve the thing i need? Thnxs
as I said, it’s probably not too hard to do. but I’m sorry, I don’t have time to look into that right now.
Ok..thnxs for your answers till now then…
I sent you an email with the changed plugin that should do want you wanted.
Tell me if you’ve received it and whether it’s working.
Hi Stefan,
Is there anyway for me to add custom pages to the nave? I have a couple that need to be hardcoded (one for a webcam, static home page etc.)
If there was a way to do that it would be amazing!
Thanks..Will
Hi Stefan! As i mentioned earlier, thanks for your help. The customized plugin is working properly. I’m now testing stuff out. Like removing the amount of posts notifications which you see in the nav bar. I’m really glad you could help me with this all! Cheers, Roy
@ roy:
to remove the amount of posts go into the plugin and find the line
if ( intval($optioncount) == 1 )
$link .= ‘ (’.intval($category->category_count).’)';
and outcode it. (/*… */)
@ will:
you should be able to add a hard coded page simply by adding it (with ul li etc.) where you want it to be. Unfortunately you won’t be able to add the hard coded page between other pages though (only between pages and archives, categories etc) and you won’t be able to add it as a subpage either, unless you create a hard coded page and make all pages you need to hardcode subpages of that page.
hm, do I make myself clear?
What I mean is this (to show the code here I changed <> into {}) :
Where you enter
{?php sts_list_pages(’exclude=&sort_column=menu_order&title_li=’ ); ?}{?php sts_links_list(); ?}{?php sts_list_cats(’sort_column=name&optioncount=1&hierarchical=1′); ?}{?php sts_get_archives(’type=monthly’); ?}
you could for example enter the hard coded pages between the php linesfor pages and the links like this:
{?php sts_list_pages(’exclude=&sort_column=menu_order&title_li=’ ); ?}
{div class=”barrow”}
{ul class=”drop”}
{li onmouseover=”this.className=’msieFix’” onmouseout=”this.className=””}{a href=”http://…”}my hard coded pages{/a}
{ul}
{li onmouseover=”this.className=’msieFix’” onmouseout=”this.className=””}{a href=”http://….”}webcam{/a}{/li}
{li onmouseover=”this.className=’msieFix’” onmouseout=”this.className=””}{a href=”http://….”}static home page{/a}{/li}
{/ul}
{/li}
{/ul}
{/div}
{?php sts_links_list(); ?}{?php sts_list_cats(’sort_column=name&optioncount=1&hierarchical=1′); ?}{?php sts_get_archives(’type=monthly’); ?}
@ Stefan, thanks again for your quick reply! Is it also possible to paste and edit the CSS file for the plugin in the style.css ? Cos then i can edit it in a CSS editor, as i find it easier to work with WYSIWYG when it comes to CSS files. For example i would like to have my NAVbar more nice in line with my header image. I’m not sure how to do this in your css…
Cheers,
Roy
sure you can move the css into the general css file. but you should also be able to use the css-editor with the css in the plugin file anyway. (e.g. if you use the css-editor in firefox).
THANK YOU!!!
Best. Plugin. Ever.
Hi stefan, i’ve just downloaded the developers addon tools for firefox. I will try and look at it today how this all works..For now i’m still trying to remove the amount of posts per category in the nav bar..
I will read your messages concerning this question i had, again and try to figure it out…
Greets,
Roy
I’ve just tried again to outcode the given by you, but i get this error:
“Parse error: parse error, unexpected ‘*’ in /data/members/paid/s/t/staygoldstudio.com/htdocs/www/studio/wp-content/plugins/sts-drop-css-changed-for-cats.php on line 392″ So i’m not sure what i did wrong, i did the exact thing you told me to. I found this line: if ( intval($optioncount) == 1 )
$link .= ‘ (’.intval($category->category_count).’)’;
And did this to it : /* if ( intval($optioncount) == 1 )
$link .= ‘ (’.intval($category->category_count).’)’;*/
But then i got the above given error…
Any ideas on how to do it. Maybe i’m doing something wrong.
Greets,
Roy
roy, I meant editcss
no, as far as I can see it’s correct.
I tried it again and here it works like a charm.
try to put the /* in a different row, maybe that helps.
/*
if ( intval($optioncount) == 1 )
$link .= ‘ (’.intval($category->category_count).’)';
*/
Stefan, thnxs, I placed the /*… */ in a different row and it works like a charm!
Hi Stefan,
I tried that fix but no luck the link idn’t positioned with the rest of the nav. Maybe it’s tied in with the css? Oh well - still a great plugin.
Sorry Will, I don’t really understand what you mean. of course you will have to adjust the css accordingly.
Thank you - Thank you - Thank you for this plug-in stefan!
This works perfect in firefox, but does not work in IE.
I could see the sub-pages but when I tried to move my mouse onto them they disappeared. Am I doing something wrong?
ref= Will G, am 3. Januar 2007 um 21:56 Uhr
I tried to reinstall such as Will, but this did not work for me.
Thank you for your support.
hi sam,
the problem is that I forgot to add a z-index in the css. the new version has it fixed but I don’t have the time at the moment to upload it and to change the post accordingly.
For now: Open the plugin and find the css at the very bottom. Add ‘z-index:5;’ (without the apostrophies) to the class .drop. That should fix it.
I will upload the fixed plugin as soon as I find the time.
a big thank you for that plugin, it made me come a big step forward to the intended look of my blog in development. One thing I had to fix though (I assume that this is due to WP 2.1 which I use):
in the function sts_get_pages I had to substitute
- “WHERE post_status = ’static’ ” .
with
- “WHERE post_type = ‘page’ ” .
apparently both posts and pages are now declared with post_status=publish, so this doesn’t work anymore.
Again, thanks for a great plugin !
Cheers,
Slater
glad you like it. thanks for that hint. you’re right. I haven’t had the time lately to keep the plugin up to date. As soon as I find the time I’ll adjust it to the latest wp-version and remove some bugs.
found another one: the pages were not displayed in alphabetical order. calling the script with &sort_column=post_title resolved the problem for me.
{?php sts_list_pages(’exclude=&sort_column=post_title&title_li=’ ); ?}
looks like a really neat little plugin, which does (almost) just what i need… i think i’d need the customized version which displays the posts under a category. tho one roy received… so, it’d be cool if someone could pass this on to me! big up…
I am receiving this error when trying to use the plugin with WordPress 2.1 - it has worked great with previous sites. Any ideas on how to get it to work with 2.1? The categories & links work - just the pages don’t.
WordPress database error: [Incorrect table name ”]
SELECT DISTINCT link_category, cat_name, show_images, show_description, show_rating, show_updated, sort_order, sort_desc, list_limit FROM `wpphs_links` LEFT JOIN “ ON (link_category = cat_id) WHERE link_visible = ‘Y’ AND list_limit 0 ORDER BY cat_name
sorry, I still haven’t found the time to update the plugin.
but, see what slater wrote 4 posts above. he said he figured it out and posted the solution.
An addition to slater’s comment. It needs to be:
- “WHERE post_type = ‘page’ AND post_status = ‘publish’ ” .
I also noticed you build a $css_class variable but never use it in the “this.ClassName”.
I am also looking for a add a special class to the first child of a main parent link, so that it can have extra padding to move it below the main parent. But I’ve only been able to get the padding to show above every child link.
Pictures make it a lot easier to see.
if want this:
——————————-
Main_Parent| Main_Parent2
——————————-
child1
child2
and not this:
——————————-
Main_Parent| Main_Parent2
child1 ———————-
child2
A combination of Slater’s fix and The Irish Thug’s suggestion has done the trick! Thanks so much! Menu working fabulously in Wordpress 2.1.
Stefan!
Great plug in this. Just what I have been looking for!
Everything works fine, exept I have problem with the WP-admin interface. When sts-dropdown is activated and I activate och deactivate another plug in, I end up with a blank screen rather then eturning to the plug in page. I can still reach it by refreching the browser, but it’s quite anoying. It appears in both IE6 and NS, and even if sts-dropdown is the olny plug in I’ve installed.
A look alike problem is that I can’t log out from WP-admin. The same thing happens with a blank screen, and when I refresh the browser I’m still logged in.
Any clou to why this is happening and what could fix it?
Stefan,
It was my mistake that was behind my problem above. I had put in an cage-return in the begining of the file, and that seems to have been the problem….
I still have the same problem as Jenn above with the “Incorrect table name”. It’s some were in the “sts_links_list” function, but I can’t figure it out. Any input welcome!
/o
I am sorry. I don’t have any time at all at the moment.
I’ll try to update the plugin mid till end of march.
Stefan, I too am looking forward to the update. I’ve had problems with WP 2.1.x. I’ll try again when the plugin is updated.
Wenn wird diese plugin für WP 2.1.2 erreichbar?
I upgraded to Wordpress 2.1.2 and can’t get the exclude pages function to work, any ideas?
I’ll update the plugin after April 4th.
I’m sorry, I have to much work to do until then. and someone has to pay the costs for this site.
Hi Stefan,
I tried installing your plugin code in my header.php, and nothing happened. Before I go screwing up my files, am I supposed to REPLACE this code:
current_page_itempage_item”>“>
with your plug in code? Thanks!
Oh, I use the 3K2 theme.
Hi Elizabeth,
okay, I had a look at the 3k2 theme.
Download the plugin again, I made some minor adjustments.
In the header.php simply place the plugin code behind the last div-tag and before the hr-tag (the very last tag). This should work. Well, it works on my computer.
Leave everything else as is. You can delete the superfluous code later, when you see that it is working.
Hope that was of any help. If you still have problems, don’t hesitate to ask.
Hi -
I’ve installed your plugin. I’m using it with pages only. In IE 6 there is a space between the menu and the drop down. There by I cannot drag from the menu and access any of the drop down menu options. The drop down disappears when I move my mouse into the space between them.
Is there a way to correct this? - http://209.216.203.7/bitsllc.com/wp/
Hey Barb,
this should be no problem at all.
You seem to have changed the css within the plugin, right? You have to adjust the css-settings for the Internet explorer as well, as it doesn’t understand the normal css. So got to the plugin editor and change the css within the plugin (at the very bottom) where it says * html .drop li:hover ul,* html .drop li.msieFix ul according to your needs.
By the way, if you only want to display pages, I had been working on a plugin only for that. This plugin has its own adjustment menu in the admin menu. So you wouldn’t have to change the css via the plugin editor but could do this easily via the regular admin menu. It even lets you adjust the width of every menu point individually. If you want to have this plugin let me know.
Hi,
First and foremost, my greetings for a great plug-in. This is incidentally the only menu that works with my WP 2.1.3 installation. I am using it for my cousin’s website and wanted your advice on the following:
Currently, all the menu items have a uniform width. However, that leaves uneven space between the items if the section headers are of different word length (e.g. ‘Contact’ and ‘About Rajendra’). Is there a way I can ensure that the space between the two sections is uniform instead of uniform width items?
Is there something that I can change in the code and make it happen?
Please help.
Thanks
Ashish
hi ashish,
thanks for your kind remarks.
What you want to have is actually not too difficult to achieve and I have done that for a plugin that only displays the pages (i.e. not archives, categories etc.). It involves some tweaking of the css and of the php though, because in order to give a menu item an individual width you would also have to give this item an individual css-class.
As I said, it’s not too difficult, but you should know a little (very little) about php.
If you only want to display pages, I can certainly send you the other plugin mentioned above. With this you can customize the width of every menu item individually.
Sorry, that’s all I can do for you at the moment, as I have too much work to do to change the sts-dropdown plugin according to your needs.
Hehe, you could change ‘About Rajendra’ to ‘About me’ though. That way it would probably be the same width and height as ‘Contact’.
Stefan,
Thanks for the pointer. I modified the line you specified and it removed the extra space. However, what I have noticed is that things now look fine in IE 6.0, but IE 7.0 seems to offset the drop down way to the right. Is there a way to right a rule just to be used for IE 7? If I modify the current rule, then IE 6 will look strange.
Please send me your page only plugin. I’d be interested in trying it out.
Barb
Hey Barb,
I am sorry, I can’t help you with IE7 at the moment as I don’t have it and don’t want it. The latest version the plugin is tested with is IE 6.
But you are right, I should look into this problem again. Seems like I’ll have to change the css completely again to make it work in IE7 too.
As for the pages plugin: You’ll find the same problem there, too. But I’ll try and find it, test it again and mail it to you.
[UPDATE: I had a look at IE7. It shouldn’t be that big a problem. I’m working on it. Please come back later.]
Hi Stefan,
Displaying pages suits me perfectly.
About tweaking the CSS and php, the only thing I would expect is to have a uniform margin/padding on left and right of every ‘li’…that should do the trick I guess.
I did try to change the ‘about rajendra’ to ‘about me’ as you suggested and tried to have more or less uniform length, but some things are impossible - like ‘ About Harmonium’ (the musical instrument)…
Thanks for your time. If you can send me the customized plugin at the mentioned email address, it will be really great.
In the meantime, I will try and change the php to have uniform padding/margin with my limited knowledge
Hi, Great plugin. I’m using it on http://www.brownsvillehistory.org
Hi Stefan (and barb),
about the IE7 problem: apparently the easiest way to fix that is to include a conditional comment in your wordpress header.php to load an additional css file for IE7. See e.g. webcredible for a short and good description of the problem.
I fixed my dropdown with a new css file that looks like this:
.drop li ul a { margin-left:-119px; width: 118px; }
.drop li ul a:hover { margin-left:-119px; width: 118px; }
.drop li li ul a { margin-left:-186px; width: 118px; }
.drop li li ul a:hover { margin-left:-186px; }
The IE7-css file only needs to include the IE7 fixes.
Cheers,
Slater
thanks a lot, slater, I’ll look into that.
I have too much work to do at the moment though. a solution with different css-files was what I was thinking of, too. I think the plugin needs a complete makeover. I’ll work on that as soon as I find the time.
hallo,
erstmal muss ich sagen, dass der plugin echt top ist!
ich hab ihn mir ein bisschen angepasst, was soweit auch alles gut geklappt hat - ich habe nur noch ein problem - bei den kategorien wird hinter dem namen die anzahl der geposteten beiträge angezeigt - ist das in dem plugin verankert und wenn ja wie bekomme ich das raus?
vielen dank im vorraus
stefan
Excellent plugin!
This will definitely make my work easier when design sites for my small business clients.
Thanks!
Design for success,
Sherman
Stefan,
danke for your plugin. I am attempting to include a css effect for active/current page. I have not discovered how to modify your code to add the tag for ‘active’ page. EG, active menu item could be tagged ‘current_page_item’ & css is thus :
.drop li current_page_item a{
color: #333;
background-color: #eee;
Can you suggest a solution? Best regards!
Very nice plugin, it is exactly what I want and have been able to customize the css to work on my site in Firefox and IE7. The menu does not work right in IE6. The drop downs drop down (or up) way over to the far left, miles away from where they appear in FF and IE7. Any ideas?
http://gs-nmtrails.org
Thanks in advance,
Karen
amazing plugin, great
Hi, Great plugin.
HI. Is it possible to get different classes for .drop li?
Example: Please look at the li-class:
home
page1
page2
page3
li onmouseover=”this.className=’msieFix’” onmouseout=”this.className=”” class=”home”>home/a/li
li onmouseover=”this.className=’msieFix’” onmouseout=”this.className=”” class=”2″>page1/a/li
li onmouseover=”this.className=’msieFix’” onmouseout=”this.className=”” class=”3″>page2/a/li
li onmouseover=”this.className=’msieFix’” onmouseout=”this.className=”” class=”4″>page3/a/li
hi,
also das wäre echt dufte wenn du eine horizontale version uploaden könntest. ich krieg das nur mit css nicht gebacken, dann funktionierts irgendwie nich mehr einwandfrei wenn alles auf einer höhe is, der mouseover spinnt und es ist sofort komplett ausgeklappt.
vielen dank für deine hilfe im vorraus.
nils