This is my file:
<?php
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => true,
'container_id' => 'btn',
'menu_class' => true,
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '<li class="btn_bar"><img src="img/pic-btn_bar.jpg"/></li>',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>
Here, I insert class="btn_bar">
<ul>
<li class="menu-item-xxx">ABC</li>
<li class="btn_bar"><img width="18" height="38" src="img/pic-btn_bar.jpg"></li>
<li class="menu-item-xxx">DEF</li>
<li class="btn_bar"><img width="18" height="38" src="img/pic-btn_bar.jpg"></li>
</ul>
I want to put the code in the menu first or last menu. Please help me
It sounds like you could just do this with CSS instead of PHP/HTML. With CSS you could target a specific menu item and use pseudo after to insert an image.
.menu-item-82:after {
content: " ";
position: relative;
background: url(images/nav-image.png) -1px -32px #ddd;
display: block;
height: 25px;
width: 25px;
}
Another simple css hack, aslong as you have determined your menu item id
#menu-item-1244 .delimiter {display:none;}
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#doctype li:first").after("<li class='btn_bar'><img src='http://i.stack.imgur.com/VNk7r.jpg?s=24&g=1'/></li>");
jQuery("#doctype li:last").after("<li class='btn_bar'><img src='http://i.stack.imgur.com/VNk7r.jpg?s=24&g=1'/></li>");
});
</script>
<?php
$defaults = array(
'theme_location' => 'primary',
'menu' => 'Menu 1',
'container' => 'div',
'container_class' => '',
'container_id' => 'doctype',
'menu_class' => '',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="filter">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>
Related
header.php
/*Render menu*/
<div class="main-nav">
<?php wp_nav_menu(
array(
'theme_location' => 'header-menu',
'container' => 'ul',
'menu_class' => 'nav'
)
);
?>
</div>
functions.php
/*Register menu*/
function register_main_menu(){
register_nav_menus(array(
'Primary' => __('Header Menu'),
'Footer' => __('Footer Menu')
));
}
add_action('after_setup_theme', 'register_main_menu');
/*Custom menu class*/
function add_class_to_li($classes, $item){
$classes[] = "nav-item";
return $classes;
}
add_filter('nav_menu_css_class','add_class_to_li', 10, 4);
This does not add 'nav-item' class to 'li'. Is there anything that I need to update.
Your theme_location should be exactly like the one you have in your functions.php file. So your reader menu will be:
/*Render menu*/
<div class="main-nav">
<?php wp_nav_menu(
array(
'theme_location' => 'Primary', //this will be Primary, not header-menu
'container' => 'ul',
'menu_class' => 'nav'
)
);
?>
</div>
I want to display all the categories existing in my Wordpress in the bottom of the content, with the selected for the current post in bold, as follows.
For example, for an existing post I selected category2 of 3 existing.
category1 category2 category3
How can I do this?
My code (now only display the selected category):
<div class="entry-meta">
<span class="term-links">
<?php foreach ( get_the_terms( $post->ID, 'category') as $term ) :
?>
<a href="<?php echo esc_url( get_term_link( $term->term_id ) )
?>"><span class="<?php echo $term->slug ?>"><?php echo $term->name ?>
</span></a>
<?php endforeach; ?>
</span>
<style>
.term-links .category2 {
display: inline-block;
font-weight:bold;
</style>
list of all category
add below code in your template
<style type="text/css">
.single-product div.product .product_meta .product_cat ul li{ list-style-type:circle;}
.single-product div.product .product_meta .product_cat ul li.current-cat{list-style-type:circle;}
.single-product div.product .product_meta .product_cat ul li.current-cat a{display: inline-block;font-weight:bold;}
</style>
<?php
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
$product_cat_id_array = array();
foreach ($terms as $term ) {
$product_cat_id_array[] = $term->term_id;
}
$product_cat_id_string = implode(",",$product_cat_id_array);
$args = array(
'child_of' => 0,
'current_category' => $product_cat_id_string,
'depth' => 0,
'echo' => 1,
'exclude' => '',
'exclude_tree' => '',
'feed' => '',
'feed_image' => '',
'feed_type' => '',
'hide_empty' => 0,
'hide_title_if_empty' => false,
'hierarchical' => true,
'order' => 'ASC',
'orderby' => 'name',
'separator' => '',
'show_count' => 0,
'show_option_all' => '',
'show_option_none' => __( 'No categories' ),
'style' => 'list',
'taxonomy' => 'product_cat',
'title_li' => __( 'Categories' ),
'use_desc_for_title' => 0,
);
wp_list_categories($args);
?>
The color picker is still into the theme Customizing options but when i change color of links and buttons, the color is not change of buttons and links. Please help Thanks for your valuable answers.
//Customize Appearance Options
function myTheme_customize_register( $wp_customize ) {
//setting for link color
$wp_customize->add_setting('mtm_link_color', array(
'default' => '#006ec3',
'transport' => 'refresh',
));
//setting for Button color
$wp_customize->add_setting('mtm_btn_color', array(
'default' => '#006ec3',
'transport' => 'refresh',
));
//Section for standard colors
$wp_customize->add_section('mtm_standard_colors', array(
'title' => __('Standard Colors', 'MyTheme'),
'priority' => 30,
));
//Adding control for links color picker
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'mtm_link_color_control', array(
'label' => __('Link Color', 'MyTheme'),
'section' => 'mtm_standard_colors',
'settings' => 'mtm_link_color',
) ) );
//Adding control for buttons color picker
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'mtm_btn_color_control', array(
'label' => __('Button Color', 'MyTheme'),
'section' => 'mtm_standard_colors',
'settings' => 'mtm_btn_color',
) ) );
}
add_action('customize_register', 'myTheme_customize_register');
//Output Customize CSS
function myTheme_customize_css() { ?>
<style type="text/css">
a:link,
a:visited
{
color:<?php echo get_theme_mod('mtm_link_color'); ?> ;
}
.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited{
background-color: <?php echo get_theme_mod('mtm_link_color'); ?> ;
}
div.search #searchsubmit{
background-color: <?php echo get_theme_mod('mtm_btn_color'); ?> ;
}
</style>
<?php }
add_action('wp_haed', 'myTheme_customize_css');
i have a walker class applied for my submenu but how do i get the sub-submenu item into this code?
below is my code
functions.php
<?php
class wp_submenu_class extends Walker_nav_menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"submenu\">\n";
}
}
?>
header.php
<div class="navi">
<?php wp_nav_menu( array(
'menuitems' => 'mymenu',
'container' => '',
'container_id' => '',
'menu_class' => 'topmenu',
'menu_id' => '',
'items_wrap' => '<ul id="" class="%2$s">%3$s</ul>',
'walker' => new wp_submenu_class() ));
?>
</div>
you haven't specified an end_lvl for your class.
<?php wp_nav_menu( array(
'menu' => 'Menu 1', // REPLACE NAME WITH YOUR MENU
'container_class' => 'menu-header',
'menu_class' => 'nav-menu',
'depth'=> 3, // CHANGE THE VALUE WHICH LAVEL YOU CAN DISPLAY.
'menuitems' => 'mymenu',
'container' => '',
'container_id' => '',
'menu_class' => 'menu-header', // MENU CLASS
'menu_id' => '',
'items_wrap' => '<ul id="" class="%2$s">%3$s</ul>',
'walker' => new wp_submenu_class() //function
));
?>
class wp_submenu_class extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"submenu\">\n";
}
function end_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
}
I am trying to display form elements inline built using the cakePHP Form helper. It appears it has to do with the classes it creates around the elements. I am sure this can be fixed with CSS but if there is another way i would rather do it right:
<?php
echo $this->Form->create("users");
echo $this->Form->input("username",array("label" => false, "class" => false, "value" => "Username", "class" => "loginCredentials"));
echo $this->Form->input("password",array("label" => false, "class" => false, "value" => "Password", "class" => "loginCredentials"));
echo $this->Form->input("loginBtn",array("label" => false, "class" => false, "value" => "LOGIN", "class" => "loginCredentials", "type" => "submit"));
echo $this->Form->end();
?>
By default, CakePHP puts <div>s around inputs. You can either add the 'div'=>false option to each input:
echo $this->Form->input("username",array("label" => false, "div"=>false, "class" => false, "value" => "Username", "class" => "loginCredentials"));
Or, you can set the inputDefaults for the form itself:
echo $this->Form->create('whatever', array(
'inputDefaults'=>array('div'=>'false', 'label'=>false)));
My form has only 4 required fields and is generated by the following view:
<div class="users form">
<?php echo $form->create('User', array('class'=>'form'));?>
<p class="formtitle">Sign Up</p>
<fieldset>
<legend class="formtitle">Please complete the form below.</legend>
<?php
echo $form->input('username', array(
'label' => 'Login',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
echo $form->input('password', array(
'label' => 'Password',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
echo $form->input('password_confirm', array(
'label' => 'Confirm password',
'type'=>'password',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
echo $form->input('name', array(
'label' => 'Name',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
echo $form->input('surname', array(
'label' => 'Surname',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
echo $form->input('email', array(
'label' => 'E-mail',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
echo $form->input('city_id', array(
'label' => 'City',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror')));
?>
</fieldset>
<?php echo $form->end('Submit');?>
</div>
Some explanations:
To add a class to a form tag:
$form->create('User', array('class'=>'form'))
generates:
<form class="form" id="UserAddForm" method="post" action="/kultura/users/add">
To add a class to an input:
echo $form->input('username', array(
'label' => 'Login',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
generates this:
<div class="formfield required">
<label for="UserUsername">Login</label>
<input name="data[User][username]" type="text" maxlength="20" value="" id="UserUsername" />
</div>
An error in this case will appear in:
<div class=”formerror”></div>
A sample css style may look like this:
.form{
font-family: Verdana;
font-size:1em;
margin:1em;
padding:1em;
}
.form p.formtitle{
color: #026475;
font-size:1.3em;
font-weight: bold;
}
.form fieldset{
width:40em;
border:1px solid #FFE545;
background-image: url(../img/Contact.png);
background-position: bottom right;
background-repeat: no-repeat;
}
.form fieldset legend{
color: #026475;
}
.formfield{
width:30em;
padding:5px;
}
.formfield label{
display:block;
float:left;
width:12em;
padding:1px;
color:#C2A34F;
text-align:right;
}
.formfield input, .formfield select{
padding:0.15em;
width:14em;
border:1px solid #ddd;
background:#FEFBAF;
font-family: Verdana;
font-size:1em;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
}
.formfield input:hover, input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
}
.required input {
border:1px solid #FBB829;
}
.form .submit input{
font-family: Verdana;
font-size:1em;
margin-top: 0.3em;
}
.formerror{
position:relative;
left:12.1em;
color:#FBB829;
}
The result:
dont get me wrong i think you could try this, which should help aswell
echo $form->create('Job',
array( 'type'=>'file',
'class' => 'form-horizontal',
'inputDefaults' => array(
'div' => array('class' => 'form-group'),
//needs to be redefined due to restrictions of the text element we need to define for each input..
'label' => array('class' => 'col-sm-4 col-md-3 control-label'),
'class' => 'form-control',
'between' => '<div class="col-sm-8 col-md-9">',
'after' => '</div>'
)
)
);
then you can simply do :
echo $form->input('taskfield_id',
array( 'label'=> array('text' => 'Aufgabenbereich *','class' => 'col-sm-4 col-md-3 control-label'),
'empty'=>'Bitte wählen'
)
);
this will output something like this
<div class="form-group required">
<label for="JobTaskfieldId" class="col-sm-4 col-md-3 control-label">Aufgabenbereich *</label>
<div class="col-sm-8 col-md-9">
<select name="data[Job][taskfield_id]" class="form-control" id="JobTaskfieldId">
<option value="">Bitte wählen</option>
</select>
</div>
</div>
now you have a form that will give you always this form of input
<div> <label> </label> <div> <input /> </div> </div>
since i needed to translate some of the labels i need an extea label array for each input which shouldn't be needed if you keep the field names true to your database.
edit:
this is made with bootstrap and cake,
you can also style it yourself since you have full controll of the classes and labels
or without classes
label{float:left;width:25%}
label+div input{float:left;width:75%}
In CakePHP4 I simply added a new CSS file, loaded it after the others, and put the following in it. This overrides the existing display:block in original CSS
label,
legend {
display: inline; //change
font-size: 2.0rem;
/* font-weight: 700; */
/* margin-bottom: 2.0rem */
}