I'm trying to make WordPress theme with the materialize framework but I'm really confused by the navbar part. I've searched on the internet but found nothing, it seems nobody works with materialize.
The only thing that I have found is to make it with nav_walker, like it is done in bootstrap but I don't know how to do it with materialize.
I have created a snippet that will allow you to create a navbar for wordpress with materializecss. However, it will not allow you to create children in the menu (dropdown bar). For this, you will need to create a customized nav walker.
The snippet and instructions can be found here:
https://github.com/kristofferandreasen/wp_materialize_navigation
It is based off the site vel linked to in the comments.
This should do the job:
<div class="m-container nav">
<div class="container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<i class="mdi-navigation-menu"></i>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu side-nav', 'menu_id' => 'mobile-nav','items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>', ) ); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'hide-on-med-and-down' ) ); ?>
</nav><!-- #site-navigation -->
<div class="clear"></div>
</div>
(Source: see the navigation part of this here: https://www.34sp.com/hosting-news/blog/wordpress-materialized-creating-material-design-theme-pt-1-theme-setup/)
I made this gist, a page index.php where I use the wordpress menu.
I don't believe this is the best solution but is a good start and works fine. Feel free to improve and use it as you wish.
https://gist.github.com/knoonrx/a27381877cfc9e4826fae28ec2544490
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name') ?></title>
<link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/materialize.min.css" media="screen,projection">
<link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/style.css">
<style>
nav .sub-menu {
position: absolute;
min-width: 115px;
display: none;
transition: all .3s;
background-color: #ee6e73;
z-index: 1;
}
nav .sub-menu li {
white-space: nowrap;
float: none;
}
li.menu-item-has-children:hover > .sub-menu {
display: block;
}
</style>
</head>
<header>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="nav-wrapper">
<div class="container">
Logo
<i class="mdi-navigation-menu"></i>
<?php
$menu = [ // mobile side menu array
'menu_class' => 'menu side-nav',
'menu_id' => 'mobile-nav',
'items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',
];
wp_nav_menu( $menu ); // mobile side menu
$menu = [ // desktop menu array
'menu_class' => 'right hide-on-med-and-down'
];
wp_nav_menu( $menu ); // desktop menu
?>
</div>
</div>
</nav><!-- #site-navigation -->
<div class="clear"></div>
</header>
<br>
<br>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$(".button-collapse").sideNav();
});
</script>
</body>
</html>
Materialize CSS Wordpress Sub Menu
Related
I'm trying to change the header logo on my site, depending on the page the person is on. I don't know PHP, but I've found where the Logo is defined in header.php, and am trying to rewrite it to be dynamic. When I use my code, the site breaks, so obviously I'm doing something wrong.
Here is the code of my header.php file.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head><meta charset="<?php bloginfo( 'charset' ); ?>">
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" integrity="sha256-0LjJurLJoa1jcHaRwMDnX2EQ8VpgpUMFT/4i+TEtLyc=" crossorigin="anonymous" />
<?php
wp_head();
?>
<style>
.chosen-container .chosen-results {
height: 100%;
overflow-y: hidden;
max-height: inherit;
}
.chosen-container-active .chosen-single, .chosen-container-single .chosen-single {
display: none;
}
.chosen-container-single .chosen-drop {
display: contents;
}
</style>
</head>
<body <?php body_class(); ?>>
<div class="<?php $themnific_redux = get_option( 'themnific_redux' );
if (empty($themnific_redux['tmnf-uppercase'])) {} else {if($themnific_redux['tmnf-uppercase'] == '1') echo 'upper '; }
if (empty($themnific_redux['tmnf-bottombar-dis'])) {} else {if($themnific_redux['tmnf-bottombar-dis'] == '1') echo 'bottombar_dis '; }
if ( is_active_sidebar( 'tmnf-sidebar' ) ) {echo 'tmnf-sidebar-active ';} else { echo 'postbarNone ';};
if (empty($themnific_redux['tmnf-header-layout'])) {} else {echo esc_attr($themnific_redux['tmnf-header-layout']);}
?>">
<div id="header" class="tranz" itemscope itemtype="http://schema.org/WPHeader">
<div class="container_head">
<a class="screen-reader-text ribbon skip-link" href="#content_start"><?php esc_html_e('Skip to content','citygov');?></a>
<div class="clearfix"></div>
<div id="titles" class="tranz2">
<?php if(empty($themnific_redux['tmnf-main-logo']['url'])) { ?>
<h1 class="logo"><?php bloginfo('name');?></h1>
<?php }
else { ?>
<a class="logo" href="<?php echo esc_url(home_url('/')); ?>">
<img class="tranz" src="<?php echo esc_url($themnific_redux['tmnf-main-logo']['url']);?>" alt="<?php bloginfo('name'); ?>"/>
</a>
<?php } ?>
</div><!-- end #titles -->
<div class="header-right for-menu">
<input type="checkbox" id="showmenu" aria-label="<?php esc_html_e('Open Menu','citygov');?>">
<label for="showmenu" class="show-menu ribbon" tabindex="0"><i class="fas fa-bars"></i> <span><?php esc_html_e('Menu','citygov');?></span></label>
<nav id="navigation" class="rad tranz" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation" aria-label="<?php esc_html_e( 'Main Menu', 'citygov' ); ?>">
<?php get_template_part('/includes/navigation'); ?>
</nav>
</div><!-- end .header-right -->
<div class="clearfix"></div>
<div id="bottombar" class="bottomnav tranz" role="navigation" aria-label="<?php esc_html_e( 'Quick Links', 'citygov' ); ?>">
<?php if(empty($themnific_redux['tmnf-menu-label'])) {} else { ?>
<p class="menu_label"><?php echo esc_attr($themnific_redux['tmnf-menu-label']); ?></p>
<?php }?>
<div class="header-right">
<?php get_template_part('/includes/add-navigation'); ?>
<?php get_template_part('/includes/uni-social' );?>
</div>
</div><!-- end #bottombar -->
<div class="clearfix"></div>
</div><!-- end .container -->
</div><!-- end #header -->
<?php ?>
<div class="wrapper p-border">
You can do this by simply put below code in your theme's functions.php file.
after putting this code, you can now see the new settings added into back-end admin area.
Go to the wordpress admin area then go to Appearance > Customize > Site Identity.
You can now see there are two new settings.
1)Upload Logo (replaces text) => You can add second logo for other pages
2) Page IDs. => You can add comma separated page ids in this text box for displaying second logo in that pages.
function jay_customize_register( $wp_customize ) {
$wp_customize->add_setting( 'jay_logo' );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'jay_logo', array(
'label' => __( 'Upload Logo (replaces text)', 'jay' ),
'section' => 'title_tagline',
'settings' => 'jay_logo',
) ) );
$wp_customize->add_setting('page_ids');
$wp_customize->add_control('text_setting', array(
'label' => 'Page IDs',
'section' => 'title_tagline',
'type' => 'text',
'settings' => 'page_ids',
));
}
add_action( 'customize_register', 'jay_customize_register' );
function change_logo_on_single($html) {
$pageIDs = (get_theme_mod('page_ids'))? explode(',',get_theme_mod('page_ids')) : array();
if(in_array(get_the_ID(),$pageIDs)){
$html = preg_replace('/<img(.*?)\/>/', '<img src="'.get_theme_mod('jay_logo').'" class="custom-logo" alt="" itemprop="logo" />', $html);
}
return $html;
}
add_filter('get_custom_logo','change_logo_on_single');
I am creating a wordpress site using custom theme. I want to set the home link for my theme's index.php file. when i am using permalink it changes link for all the other links and not working. i am using wp_nav_menu to get the menus in header.php. How can i assign the href to index.php for home menu. can any one help? thank you in advance.
Header.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo("charset"); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title><?php bloginfo('name'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container h-sectionHeader">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="<?php echo esc_attr( get_option('logo-setting') ); ?>" class="logo" alt="logo systenics"></a>
</div>
<!-- <?php bloginfo('template_directory'); ?>/images/logo-systenics.png
--> <div class="navbar-collapse collapse">
<?php
$defaults = array(
'theme_location' => 'primary',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'nav navbar-nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults ); ?>
</div><!--/.nav-collapse -->
</div>
</div>
In word press admin panel go to appearance >> menu
There is default home page in page section while you click on view all you can see home link. Which is redirection to index.php.you can drag it to your home menu.!
I'm developing a WordPress theme powered by Foundation 5. Everything seems work well, but something is wrong when I switch to smartphone.
As you can see in the image below, when resizing the browser window on desktop, foundation topbar collapses to small screen mode.
Unfortunately, if I access the page from my mobile browser, the the text in the topbar becomes smaller and the menu does not collapse.
here is header.php code:
<body <?php body_class(); ?>>
<header class="site-header" role="banner">
<div class="row">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</header>
<div class="contain-to-grid">
<nav id="nav" role="navigation" class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><?php bloginfo( 'name' ); ?></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'right', 'walker' => new Foundation_Walker()) ); ?>
</section>
</nav>
</div>
<div id="container" class="row">
The image below shows what appears in my desktop browser:
As you can see, the menu collapse regularly.
The second image shows what happens in google chrome on android:
Same problem on iPad: the text is small and the menu does not collapse.
Hope somebody could help me.
Here is a live example: http://htmlintro.altervista.org/wordpress/
Solved!
I did not include the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Now it works fine.
Okay, so will confess to being completely new at this. I am a designer, first and foremost and trying to learn how to code by dismantling pre-built templates and studying them.
What I want to do is - have a short line of text (left float), a centered logo (whose width / height may vary upon finalization), and a text nav (right float). I am modifying a theme.
Here is what I have:
<header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">
<div class="header_top clearfix">
<div id="logo" class="left_float">
<a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>
</div>
<?php if(function_exists('wp_nav_menu')) : ?>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary-menu',
'container' => 'nav',
'container_id' => 'nav',
'container_class' => 'right_float',
'menu_class' => '',
'menu_id' => '' ,
'walker' => new custom_menu_output()
));
?>
<?php else: ?>
<nav id="nav" class="right_float">
<ul>
<?php wp_list_pages('title_li=&depth=0'); ?>
</ul>
</nav>
<?php endif; ?>
</div>
Below is the CSS. I've tried to interchange the .left_float with the .center class as a test, but it ends up pushing the nav downwards.
.left_float {
float: left;
}
.center {
display: block;
margin-left: auto;
margin-right: auto }
.right_float {
float: right;
}
Long post - sorry! Any help would be appreciated - even some links where I can read and learn and get started on my own.
Thanks a bunch!
Part 1: First of all, there is no <div> with class center in your code. Start off by putting all of your code that's between the left_float and right_float <div> tags into its own <div class="center">...</div> tag. I'm assuming you want something like:
<header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">
<div class="header_top clearfix">
<div id="logo" class="left_float">
<a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>
</div>
<div class="center">
<?php if(function_exists('wp_nav_menu')) : ?>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary-menu',
'container' => 'nav',
'container_id' => 'nav',
'container_class' => 'right_float',
'menu_class' => '',
'menu_id' => '' ,
'walker' => new custom_menu_output()
));
?>
<?php else: ?>
</div>
<nav id="nav" class="right_float">
<ul>
<?php wp_list_pages('title_li=&depth=0'); ?>
</ul>
</nav>
<?php endif; ?>
</div>
<br clear="all" />
You'll notice I added <div class="center">...</div> and added <br clear="all" /> (which is important for the next part...)
Part 2: Change your CSS to:
.left_float, .center, .right_float {
float: left;
}
But make sure you keep the new <br clear="all" /> in your code! With that at the end, you can float all divs to the left, and they will all be beside each other. From there, you can modify the width of each of the divs to whatever you'd like!
Well, I hope that helps,
Hope4You
Your wp_nav_menu is without any div. Enclose is withing a div and add just a single class class=lfloat to all the three divs.
`.lfloat{
float: left;
}`
Im trying to make a custom wordpresss theme. I want to install a Jquery plugin (slideshow). I so far have a theme installed that I created but don't know how to make the plugin interface with my theme. Do I need to declare a space in a div or place some php code in the theme so that the plugin knows where to go?
You can directly write the jquery code for the sliders. For example, applying accordion slider in my template page:
header.php file, save it in your custom theme folder
<!DOCTYPE html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-
1.7.1.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style/main.css"
type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"
type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.kwicks-
1.5.1.pack.js"></script>
<!--Accordion -->
<script type="text/javascript">
$(document).ready(function() {
$('.kwicks').kwicks({
max : 800,
spacing : 5
});
});
</script>
<!--end Accordion-->
</head>
<body>
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<div class="line"></div>
<!-- logo -->
<h1 class="logo"><a href="#">xcvdfgdf - Career Development
Centre</a></h1>
<!-- main nav -->
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</header>
<?php wp_head(); ?>
Then, create slider.php, where you want your slider to appear
<?php
/**
* Template Name: accordion
*
* Selectable from a dropdown menu on the edit page screen.
*/
?>
<?php get_header(); ?>
<body>
<!-- main -->
<div id="main">
<!-- gallery -->
<section class="intro gallery">
<div class="gallery-holder">
<div class="slider_list_accordion">
<ul class="kwicks horizontal" >
<li id="kwick_1"><img src="<?php
bloginfo('template_url'); ?>/images/slider-1.png" alt=""
/></li>
<li id="kwick_2"><img src="<?php
bloginfo('template_url'); ?>/images/slider-2.png" alt=""
/></li>
<li id="kwick_3"><img src="<?php
bloginfo('template_url'); ?>/images/slider-3.png" alt=""
/></li>
</ul>
</div>
</div>
</section>
<?php get_footer(); ?>
Then, footer.php
<footer id="footer">
<div class="footer-holder">
<div class="container">
<div class="case">
<!-- contact -->
<div class="contact">
<section class="contact-holder">
<h4>Get in Touch</h4>
<dl>
<dt>Telephone:</dt>
<dd>+1 800 603 6035</dd>
<dt>Fax:</dt>
<dd>+1 800 889 9898</dd>
<dt>E-mail:</dt>
<dd>contact#vycdc.com</dd>
</dl>
<address>9870St Vincent Place, <br >Glasgow, DC 45 Fr
45.</address>
</section>
<div class="add">
<div class="case">
<strong class="copyright">©
Copyright 2012 sdfr Development Centre. All rights reserved.</strong>
<nav class="add-nav">
<ul>
<li>Sitemap</li>
<li>Terms of use</li>
<li>Privacy policy</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
Then, in Wordpress, go to Pages->Add new. In title enter Home and in the right side you will see Templates. Click the dropdown and select accordion and click the publish button.
Now, click on the top left corner on the website or blog name to check for the slides.