I have been writing a wordpress theme from scratch and I have run into a problem with my top drop down menu. This drop down worked in html but didn't function once I brought everything into wordpress. Here is the code that I have inputed into my header.php
<div class="nav">
<ul >
<?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>
</ul>
</div>
For some reason none of my submenu items are populating and all of my main menu items are just stacked on top of each other in the left side of the page. Any help would be great
Related
I am using a client portal plugin that automatically creates menus on client pages. The color and font styling I was able to match via CSS, but the menu has a little animation that I would like to also duplicate so the menus are consistent on every page. I assume - hope - I can copy this effect from the theme and insert it into the file governing the plugin's menu styles. I need to know, first, where to locate the menu style in a theme, and then, where to place it in the plugin. All suggestions are welcome and appreciated. Below are some suspects, but in all honesty, I'm just guessing here:
From the header php file:
<header id="masthead" class="site-header <?php echo astrid_has_header(); ?>" role="banner">
<div class="container">
<div class="site-branding col-md-4 col-sm-6 col-xs-12">
<?php astrid_branding(); ?>
</div>
<div class="btn-menu col-md-8 col-sm-6 col-xs-12"><i class="fa fa-navicon"></i></div>
<nav id="mainnav" class="main-navigation col-md-8 col-sm-6 col-xs-12" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</header><!-- #masthead -->
From an Inspection of the plugin menu:
<ul id="primary-menu" class="menu"><li id="menu-item-2232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2232">NOT A CLIENT?</li>
</ul>
I'd guess there is a javascript file used in the plugin (in addition to the css you found) that completes the menu animation. With some detective work you might be able to find the javascript library or code and turn around to use it with the new menu you're creating.
Dig into the source files of the plugin or inspect the source of the page and see what js files are loaded to identify which might be tied with that plugin.
After you find some js files to inspect or test. Link to the possible js files/libraries on your new page testing out the menu and see what happens.
I've run into a small problem coding my own WP theme from scratch (with a static Home page and a separate Blog page). I can't change the font-color of my blog posts (that display after I click them). So I have a two-part question:
Why can't I get the_content to change color on my single.php page? Here's my code:
<?php
get_header();
the_post();
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
}
?>
<div class="white">
<div class="container">
<h2 class="black-text light" style="margin:0;">
<?php the_title();?>
</h2>
<h5 class="black-text" style="margin:0 0 7% 0;">
<?php the_author();?>
</h5>
<p class="black-text">
<?php the_content();?>
</p>
</div>
</div>
<?php
get_footer();
?>
What's happening is on my single.php page (which I'm using to design my individual blog posts), I've put 'the_title();' in an <h2>, 'the_author();' in an <h5>, and 'the_content();' in a <p>. I've also told each of those elements to show as black text. However, only the <h2> and <h5> change to black text. When I inspect it with Dev Tools, what's happening is WP is ignoring my hard-coded <p>, and creating new <p> of its own WITHOUT the black-font formatting.
My second question:
Am I even doing this right?? It displays fine on my local development, but am I doing this all in the correct way? Basically, I have a front-page.php that displays my Home Page. Then I have an index.php that shows the main blog page with small excerpts. Then, when a user clicks on a single blog post to open it, the individual post is shown with the single.php template. Is this right?
If a reference would help, you can see it here: www.uptowndownentertainment.com/blog
The code is missing from your post, you need to indent it with four spaces to make it show up. Looking at this page you seem to have added this before the content:
<p class="black-text" style="color:black !important;">
But the actual text is inside another paragraph element so it's not affected by that code. Wordpress automatically does this when writing posts. The easiest solution might be to add this to your style.css:
.container p {
color: black;
}
And then remove the style markup from the headers and paragraphs. It's always better to keep styles in the CSS instead of right in the code.
I've encountered another silly problem while trying to enable sidebar on pages on Wordpress Twentyeleven theme.
I've given my .entry-content class:
.entry-content {float:left !important;width:648px !important;}
excuse me for those !importants, I just don't dare to edit the default style.css...
Now I've added
<?php get_sidebar(); ?>
By the end of page.php, just above the get_footer stuff... and sidebar apparently displays UNDER my .entry-content, on the right hand side....
I've trying giving the sidebar a float:right, but it still won't float.
Here is an example.
Inside <div id="main"> you have a <div id="primary">.
Set a width on the primary div and this is solved.
Like this: #primary {width:400px;}
I am trying to modify sub-menus of a Wordpress site. Wordpress generates the following HTML code for the sub-menus
<ul class="sub-menu" style="top: 50px; visibility: visible; left: 0px; width: 202px; display: none;">
<li class="menuitem123 menu-item menu-item-type-post_type menu-item-object-page menu-item-123" id="menu-item-123">Link Name</li>
<!-- other li elements follow -->
</ul>
Here's my invocation of the wp_nav_menu
<?php if(has_nav_menu('secondary')):?>
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_container' => 'div', 'container_id' => 'secondary-menu','menu_class' => '', 'theme_location' => 'secondary'));?>
<?php endif;?>
The problem is, I want to customize the inline style (or preferably move it out into a css file) that Wordpress is generating for the ul element, mainly the width. I have searched high and low but cannot find from where Wordpress is picking up the inline style and inserting it. I need to get rid of the inline style because I need to set different width for other sub-menus.
I could adapt the answer given on this wp_nav_menu change sub-menu class name? link which suggests sub classing the Wordpress Walker class.
Please can someone provide some pointers on what else should I be checking to see from where Wordpress is picking up the inline style?
Many thanks.
WordPress itself does not generate any inline styles, so most probably the deal is in your plugins or theme installed. According to your code, you do not use customized walkers, so the only deal may be in filters attached to standard Walker_Nav_Menu (see nav-menu-template.php file, at the beginning). Corresponding filters are most probably: nav_menu_css_class, nav_menu_item_id, walker_nav_menu_start_el.
I am new to making WordPress themes but I have managed to include the navigation menu list in my theme. I want to turn it into a horizontal drop-down menu using CSS but I am having all kinds of trouble figuring it out.
I have used this code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
To output this:
<div id="nav-container">
<div class="menu">
<ul>
<li class="current_page_item">Current Page</li>
<li class="page_item page-item-58">Menu Item #1
<ul class='children'>
<li class="page_item page-item-62">Child Item #1</li>
<li class="page_item page-item-60">Child Item #2</li>
</ul>
</li>
</ul>
</div>
</div>
Can someone please tell me, or point me in the right direction for turning this into a drop down menu? As a note I do not know how to change the way the nav list is output either :(.
I know this might be a big ask but any help would be greatly appreciated!
Thanks
Ben
Lots of docs and examples available: http://codex.wordpress.org/Navigation_Menus and http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus and http://codex.wordpress.org/Function_Reference/wp_nav_menu
Making dropdown menus in wordpress with their "menus" in the dashboard is extremely easy. You can simply make your menu and indent any of the items you would want inside a dropdown by simply dragging it a little bit to the right (it snaps into place) and wordpress by default will add the .dropdown class that you can then style with CSS however you want.
If you need help beyond that with the CSS then it's probably a good idea to learn how to make CSS dropdown menus so you can compliment it with this.
Cheers.