I am using a blank theme template to create a wordpress theme and I enabled menus by adding the below code to header.php:
<body <?php body_class(); ?>>
<div id="navbar"></div>
<div id="wrapper" class="clear">
<nav>
<?php wp_nav_menu( array('theme_location' => 'primary' ) ); ?>
</nav>
And I added this to functions.php:
if (function_exists('register_nav_menus')) {
register_nav_menus(
array(
'main_nav' => 'Main Navigation Menu'
)
);
};
The menu shows up and works fine when I add links to pages but when I add a custom link to say http://www.google.com with the label Google nothing shows up in the navigation bar. When I view the source the custom link is not being populated at all.
<nav>
<div class="menu">
<ul>
<li class="page_item page-item-9">Anatomy</li>
<li class="page_item page-item-11">History</li>
<li class="page_item page-item-7">Home</li>
</ul>
</div>
</nav>
My css for the nav is simple:
nav {
padding:0;
margin:0;
position:absolute;
width: 900px;
}
nav ul li
{list-style: none;
font-family: 'Numans', sans-serif;
font-size: 15px;
color: #ffffff;
text-align:left;
text-transform: uppercase;
padding: 0;
margin: 0 30px;
display: inline;
position: relative;
top:-32px;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
}
nav ul li a:visited
{color: #ffffff;
}
nav ul li a:hover
{color: #cccccc;
}
nav ul li a:active
{color: #ffffff;
}
I am very new to php and wordpress theming and I can't find anyone online with the same issue.
The issue is that your theme_location does not match the name you assigned when you registered the menu.
When you registered the menu, you called it main_nav. Since you called it that, in order to display that menu, you need to change the call to the menu to reference main_nav, like so:
wp_nav_menu( array('theme_location' => 'main_nav' ) );
Related
Okay, new to WordPress. I have created the wordpress recent posts widget, which has generated a some new WordPress Markup which I am trying to select to add my custom style.
After researching on the web I have found no alternative option other than to go inspect element and find the WordPress html markup selector/ids and write my css for them. (Is there a better way).
Here is my Html for widget:
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<?php
// If the sidebar widget is active i.e. in the admin a widget is been created then show the dynamic sidebar in the markup otherwise waste of markup.
if(is_active_sidebar('recentpost')) {
dynamic_sidebar('recentpost');
}
?>
</ul>
</div>
Note: there is another wordpress generated headline 'Recent Post' that is in color white - is there a title filter?
Here is the wordpress inspect element html markup
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>
Here is me trying to select the Recent Post List id/selector to remove bullets and add style
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}
try this
.recent-posts ul {list-style: none;}
or to remove all bullet from ul
ul {list-style: none;}
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
/*li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}*/
.recent-posts ul {
list-style: none;
}
.recent-posts ul li a {
color: red;
background-color: yellow;
}
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>
I dont know what but my posts are colliding with the navigation bar like this:
http://i.imgur.com/y2qhEzH.png
Thanks if you can help:)
The navigation bar HTML/php
<div>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
)
?>
<?php wp_nav_menu( $args); ?>
</nav> </div>
Post HTML/php
<div>
<?php
if(have_posts()):
while (have_posts()) : the_post(); ?>
<h2><a a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
?> </div>
Css
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul li {
list-style: none;
float: left;
}
.site-nav ul li a:link,
.site-nav ul li a:visited {
display: block;
padding: 10px 18px;
border-top: white 3px solid;
text-decoration: none;
}
Im just starting to learn wordpress, and I litterally cant get past this. HELP:)
Try adding this to your CSS:
.site-nav {
float: left;
}
Here's a Fiddle of what your setup might look like minus the PHP, and here's one with the fix.
Full Code
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul li {
list-style: none;
float: left;
}
.site-nav ul li a:link,
.site-nav ul li a:visited {
display: block;
padding: 10px 18px;
border-top: white 3px solid;
text-decoration: none;
}
/* Added this to simulate your window size */
.container {
width: 360px;
}
/* Fix */
.site-nav {
float: left
}
<div class="container">
<div>
<nav class="site-nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About us</li>
<li>Contact us</li>
<li>Logos</li>
<li>Websites</li>
</ul>
</nav>
</div>
<div>
<h2>Welcome</h2>
<p>Hey!</p>
<p>Welcome to our site.</p>
</div>
</div>
Just adding
float: left
to the parent element did not help.
But adding Clearfix hack helped:)
I'm creating my first WordPress theme. It's a very simple one for a friend's website, who is a music producer. I'm creating the navigation menu. One of the items on the menu is listen. It's not an actual link. You hover over it and a submenu should appear. So I made Listen a custom link.
The problem is that the submenu doesn't appear. The Submenu has its own class. But I don't think WordPress is reading the CSS
Here is the CSS:
ul.sub-menu {
display: none;
position: absolute;
padding: 0px;
margin-left: -20px;
}
ul.sub-menu li {
display: block;
text-align: left;
background-color: grey;
}
ul.sub-menu li:hover {
background-color: #dae0e6;
}
ul.main_nav li:hover ul.sub-menu {
display: block;
}
Here is the HTML and php code in the header.php:
<nav>
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'main_nav'
);
wp_nav_menu( $defaults );
?>
<!--
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
-->
</nav>
Here is my approach:
I changed css so its shows menu sub menu with CSS.
JsFiddle Demo
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
<nav>
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
</nav>
In example above your menu is commented out. Also parent of ul.sub-menu should be positioned relative.
since you are new ... I think you should start by get general idea about the sub menu and style them in WordPress .
this Tut will help you
http://wproots.com/how-to-style-wordpress-menus-dropdowns/
also I will suggest other option for you .
start form other theme like wordpress deafult theme and edit it
start form starter theme like http://bootstrapwp.rachelbaker.me/
start from template
its hard to build theme from scratch if you are new ... step by step
please assign width to ul like
ul.sub-menu {
display: none;
}
and plaece
ul.main_nav li:hover ul.sub-menu {
display: block;
position: absolute;
padding: 0px;
margin-left: -20px;
top:0;
left:0;
width:800px;
}
just after it
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm just branching my way out into php as I want to have a central menu file that I can edit instead of having to change the code on 20+ pages each time I update it! However my php include does not seem to be working. I'm wondering if maybe my php file I'm trying to include is too complex or doesn't work how I'm thinking (my understanding is that the php include basically takes all the text within it (in this case the html) and replaces the php include line with it)? There is also some css that would format the html when it was actually in the webpage, and I'm wondering if that is what is breaking it? Code is below.
html:
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
php:
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
CSS
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #ffffff; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
/* border-top: 1px solid #6b727c; */
/* border-bottom: 1px solid #575f6a; */
position: relative;
}
nav ul ul li a {
padding: 0px 30px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #CCCCCC;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Apologies if this is a completely novice question.
My guess: Your "html" file is actually named something.html, which causes the webserver to not recognize it as PHP. Rename it into something.php.
To verify that this was the problem, check the source of your HTML page, you should see the literal PHP code displayed there.
Might be you misnamed any file. just follow the instruction and keep all files in the same folder
File-index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My index page</title>
</head>
<body>
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
</body>
</html>
Menu file-menu.php
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
Menu css->menu.css
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
}
<div id="buttonstrip">
<?php include ('menubar.php');?>
</div>
This appears correct. Only thing to check is the path of your include file.
Make sure your menubar.php is indeed located on the same folder as your script that includes it.
Make sure there are no spelling errors also on file name.
Create a menu.php file and include this file in php page where you want to show menu.
To include menu file in php file use <?php include "menu.php"; ?>
Below code is for menu.php
<div class="menu">
<ul>
<li>Insert</li>
<li>Update</li>
<li>Delete</li>
<li>Display</li>
<li>GUI</li>
</ul>
</div>
Basically I want the hover-look of a link stay active when you're on that site. I hope I'm explaining this right. There's supposed to be a background behind the link when you're visiting that specific page.
Here's the code for the html:
<div class="menudiv">
<div id="menu">
<ul id="menu">
<li><span>Hem</span></li>
<li><span>Om oss</span></li>
<li><span>Tjänster</span></li>
<li><span>Referenser</span></li>
<li><span> Kontakt</span></li>
</ul>
<div class="clr"></div>
</div>
</div>
And here's the css:
#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;}
#menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
#menu ul li a:active { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:active span{ background:url(images/l_menu.gif) left no-repeat;}
Add a CSS class for the that link (eg, <a class="CurrentPage">), then apply the selector to that class (eg, #menu ul li a:active, a.CurrentPage)
As much I know the hover property should put last in CSS (below the active and others) in order to work properly.
you are giving same id :
<div id="menu">
<ul id="menu">
which is wrong
you should make ids different.
What you basically need is to add a css class to the a tag in your menu.
example:
<li><span>Hem</span></li>
add styling to your currenPage class as per the designs you want for that menu item
now, your page should be dynamic for you to be able to set the currenPage css class to the current menu item where the user is currently viewing
example:
<li><a href="?p=start" class="<?php if(/**check if the user is in this link/menu item**/) echo "currentPage"; ?>" ><span>Hem</span></a></li>