I'm building a simple static website with Foundation.
I'm wondering how I can code the menu navigation of site without repeating the menu code on each html page (so it is easier to maintain in the future)? I could do a Javascript include with the menu but I wouldn't be able to change the navigation class appearance for each menu item (ex.: highlight "About Us").
Or is there a tool out there that would help to maintain a large menu items on a pure static web site?
I actually just tried to figure this out recently, although I ended up using PHP. If you want to use PHP, here is the following snippet I used:
Create a function
<?php
function echoActiveClassIfRequestMatches($requestUri) {
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="active"';
}
?>
Then, add these to your <li> tags:
<li <?php echoActiveClassIfRequestMatches("about-us")?>>
About Us</li>
Hope this helps. I'll try to give credit if I can find the link where I found this solution.
Related
I am using wordpress and on the page "sidebar.php" I have the following code:
<?php wp_list_pages('post_type=wiki&depth=1'); ?>
It works great but what I need to do it that what I click on a Menu item on the sidebar I need the sub items to display on the main page.
UPDATE:
What I basically need to do is to have the first level items on the left (As it currently is), and when those links are clicked then the sub items of those items will be listed on the index.php (main page).
I am using the wp-wiki plugin to display the pages as wiki pages but the actual but the list is the same, just showing as a different type:
post_type=wiki
Can anyone help please?
Thanks
<?php
wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID.'&depth=0');
?>
There's several ways you can accomplish this. WordPress actually has an example of exactly what you're looking to do in the Codex. (link - the last example in that section, right above the "List subpages even if on a subpage" heading)
There's several ways to do this though - that's just one example. But that code above, you just pop into your sidebar.php file. You can also create a widget out of it. And as someone else mentioned, you can use the new menu system for WordPress (but you can indeed, make it dynamic.) But the above example in the Codex is the simplest method.
Actually, an easier method would be just to list all subpages and use CSS to hide and show the child items based on what page you're on. The classes are already set up for you. Just view your source code and you can see it. So you'd do something like:
`li ul.children {display:none; }
li.current_page ul.children { display:block; }`
and variations thereof.
What about using the new menu function in wp 3?
That way you could include your type with any sub page you want (won't be dynamic though) and then add your favorite javascript or good css to show those sub-pages.
I use my custom block for displaying a flash game at the front page of my Drupal 7 installation, but there is also the annoying message:
<div id="first-time"><p>No front page content has been created yet.</p>
<div class="item-list"><ul><li class="first last">
Add new content</li>
</ul></div></div>
below it and I can't remove it. Is there please a hook for adding custom CSS? In my module I would like to make the #first-time light grey or invisible.
I prefer not to add a blank content just to get rid of that text.
Thank you!
Alex
UPDATE:
I've added the following to my module:
function game_init() {
drupal_set_message('XXX init called XXX');
if (drupal_is_front_page()) {
drupal_add_css('#first-time {color: green;}', 'inline');
}
}
but don't see that CSS-code or XXX string inside my front page.
UPDATE2:
Oh, I had to clear the cache and now it works (the Drupal docs seem to be wrong here - there was written that 'inline' CSS is not cached...)
Hiding the CSS is the WRONG way of doing it. why did you created your content as a Custom Block?
you should create a "Page" and set this page as front page in the Configuration->Site Information.
Whatever. you can also use any of these options but is not recommended.
you can also also add a BlankPage by Adding only the Title(then hiding it in PHP on page.tpl.php)
you can add your css in /templates/themes/bartik.info
you can call drupal_add_css on the _init() hook of your custom module.
Blocks are used to display information in every page(although we can set to display only on certain pages). Say For Example. A Menu, or A Shopping Cart etc.
If you want to add some CSS for a module, you should use drupal_add_css()
Why not simply add this CSS to your theme?
I have recently started on Drupal (v 7) to create a small company website.
After much reading and watching tutorials, I have started to create my new theme from scratch. I have defined regions and customised the page.tpl.php file to place them into the template (and node.tpl.php etc). All these changes are working and the layout is looking good, and any item I add appears in the main content output.
In my footer region, I have created a block in which I would like links to appear. I have also created a content-type called footer links (with relevant fields) and I have created a couple items of content for it.
The block is showing fine (the title and block body appear). However, despite scouring the documentation, I am not sure what needs to be done to make the items of content (footer links) appear in this block.
Any help appreciated, thanks!
info file snippet for a region
regions[footer_one] = Footer Column One
... and code in page.tpl.php
<div class="one">
<?php if ($page['footer_one']): ?>
<?php print render($page['footer_one']); ?>
<?php endif; ?>
</div>
If you just need simple footer links, no need to create a content type for this, you can simple create a menu and add a menu block in footer.
If you really want to use your own content type for these links, you can create a view (with views module) to display what you want in a block.
About creating a theme from scratch, did you try before to create a sub theme ?
PS: I don't think drupal is a good cms for "small company website".
Views is really powerful and sounds like it will do exactly what you need. Otherwise, you can create a menu for your items and place that menu in your region as well.
Regarding your original code, you'd probably need to grab the information about the nodes from the database in order to construct a list on your own, but views basically does that for you :)
I cannot for my life figure out how to get the downloaded plugin Twitter hash (http://wordpress.org/extend/plugins/twitter-hash-tag-widget/) to show on my index.php page. Read about it and this HTML code was given as an example in many places:
<li id=”twitter">
<ul>
<li><a href=”http://www.site1.com/”>Site One Name</a></li>
</ul>
</li>
But obviously all it does is a HTML list so it shows nothing of how to connect to the widget I have. I also added the file functions.php with the following lines:
<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
and dragged the widget to its place on the wordpress widget page.
All help appreciated for a very new wordpress user!
//Margareta
Right, solved it by using the Kubrick theme instead of the simplified theme that I had used earlier. Now it is showing on the side without me doing anything. Great stuff!
I'm currently migrating my HTML website into a WordPress theme.
My current HTML website makes full use of jQuery's .load() function, by where I change the content of the page (via a DIV), using .load() based on my side menu options selected by the user.
For example:
HTML Code:
<div id="sidebar">
<ul id="themenu" class="sf-menu sf-vertical">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
jQuery Code:
$("#themenu li a, #subcat li a").click(function(){
var toLoadCF = $(this).attr("href")+" #contentfooter";
$('#contentfooter').fadeIn("slow",loadContent);
function loadContent() {
$("#contentfooter").load(toLoadCF);
}
return false;
});
So using this as an HTML situation, the user clicks on the "About Us" menu option, which would basically in turn load the "about-us.html" file based on a href tag for About Us.
Now in the WordPress world, I have created a custom page template for About Us called "about-us.php" that is linked to a WP Admin dashboard page called "aboutus" (permalink), so my a href value is "url/aboutus/"
Based on this, how can I achieve the same result in WordPress to emulate my HTML coding using jQuery .load?
Please be aware that I have added all the necessary info in my header.php, index.php and sidebar.php files.
I'm just unsure how to reference the a href file, so that my about-us.php file is loaded using jQuery's .load().
I'm not too sure how to approach this from a WordPress perspective.
First off I'd go about making the site fully functional WITHOUT the javascript loading. This'll get your navigation and site layout proper before you get fancy and will also provide a fallback for crawlers and for when your JS breaks.
Next, make a subset of templates, or modify your existing templates, to react to a GET var in the URL to exclude everything but the main content area of the template. For the Ajax load you won't need things like the header, foot and sidebar.
Then I'd use jQuery to grab navigation links click events, modify the request URI to put a GET var in, and then make the request using .load().
A side benefit of this is when you turn on caching (yes, you want to run your site with caching, its wordpress, its far from "light") your Ajax requested pages will also be cached for tighter load times and less resource usage.
I assume since you've done it before that you know how to handle the jQuery action binding, request and response parsing.