I'm trying to modify the twentyfifteen theme to have the basic lay-out like in the picture here:
With the top bar with the logo and image at the top and the menu on the side below the top bar. My attempt was to add a div straight at the opening of the body tag in the header to see if the placement would work. It is visible but it doesn't "push down" the side menu like I want it to be (like in the picture.
This is my header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div style="background-color: black; width: 100%; height: 100px;"></div>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
<div id="sidebar" class="sidebar">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
twentyfifteen_the_custom_logo();
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; ?></p>
<?php endif;
?>
<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
</div><!-- .site-branding -->
</header><!-- .site-header -->
<?php get_sidebar(); ?>
</div><!-- .sidebar -->
<div id="content" class="site-content">
In case it is relevant I also attached the theme's stylesheet here.
With my modifications this is how the div shows up:
The black bar should be above the menu on the left and push it down.
It is because you insert it into the sidebar div and not outside of it, create another div before "sidebar"
Related
I am currently working on a website I didn't code in the first place. It was created by someone else on Wordpress using the Sidney Theme and there is no child-theme.
Here is my problem : when I update the header.php file by going to Appearance -> Editor, the website crashes and all the CSS disappears.
Fortunalely, I made a backup of the website so I recovered it.
I never had any problem like this one. It is the first time I post on Stack Overflow so if you need any info just tell me.
The website is under version 5.1.1 of Wordpress.
Here is header.php file if it can help :
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div
id="content">
*
* #package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon()
) : ?>
<?php if ( get_theme_mod('site_favicon') ) : ?>
<link rel="shortcut icon" href="<?php echo
esc_url(get_theme_mod('site_favicon')); ?>" />
<?php endif; ?>
<?php endif; ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" />
<?php else : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
<?php do_action('sydney_after_hero'); ?>
<div id="content" class="page-wrap">
<div class="container content-wrapper">
<div class="row">
don't use theme Editor. open your cpanel. go to your theme folder. edit your header file. then paste your code.
thankyou.
i wanna change a link in logo header in wordpress, but i don't know how to change that, i've try to change header.php , unfortunately, that's not working
header.php
<?php
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="body-content-wrapper">
<header id="header-main-fixed">
<div id="header-content-wrapper">
<div id="header-top">
<div id="weglot_here"></div>
<? //php fart_display_social_sites(); ?>
</div>
<div class="clear"></div>
<div id="header-logo">
<?php fart_show_website_logo_image_and_title(); ?>
</div><!-- #header-logo -->
<nav id="navmain">
<?php wp_nav_menu( array( 'theme_location' => 'primary',
'fallback_cb' => 'wp_page_menu',
) ); ?>
</nav><!-- #navmain -->
<div class="clear">
</div><!-- .clear -->
</div><!-- #header-content-wrapper -->
</header><!-- #header-main-fixed -->
<div id="header-spacer">
</div><!-- #header-spacer -->
anyone can help me?
Locate the fart_show_website_logo_image_and_title() function inside functions.php and change the href attribute in the line below to the one you want:
echo '<a href="' . esc_url( home_url('/') ) . '" title="' . esc_attr( get_bloginfo('name') ) . '">';
Here is my website:
drawyourpets.com
I followed the tutorial here: http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/, but unfortunately my hamburger menu is always visible (it's only supposed to be visisble from 0-780px) and it doesn't work.
I copied and pasted the code from the HTML section into header.php. The code from the tutorial starts with div class="mobile nav" and ends with it's respective div. I also added
<script src="javascript.js"></script>
to link header.php to the javascript code from the tutorial. Javascript.js was uploaded to the child theme.
<?php
/** * Header template * * #package Portfolio Press */?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script src="javascript.js"></script>
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() .
'/js/html5.js' ); ?>">
</script><![endif]-->
<?php wp_head(); ?></head><body <?php body_class(); ?>><div id="page">
<header id="branding">
<div class="col-width">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?
>
<div class="logo">
<a href="<?php echo esc_url( home_url( '/' ) );
?>
"rel="home">
<img src="<?php echo esc_url( portfoliopress_get_option( 'logo' ) ); ?
>" alt="<?php echo bloginfo( 'name' ) ?>">
</a>
</div>
<div class="site-description">
<h1 id="pets">DRAW YOUR PETS</h1>
<h3 id="italic">-The Creative Side-
</h2>
</div>
<div class="clear clearfix">
</div>
<div class="site-navigation primary-navigation" role="navigation">
<div class="mobile-nav">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="responsive-menu">
<ul>
<li><a href="http://drawyourpets.com/">
HOME</a>
</li>
<li>
<a href="http://drawyourpets.
com/index.php/audio/">
AUDIO
</a>
</li>
<li><a href="http://drawyourpets.com/index.php/video-3/">
VIDEO
</a>
</li>
<li>
<a href="http://
drawyourpets.com/index.php/other/">
OTHER</a>
</li>
</ul>
</div>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class'|
=> 'nav-menu' ) ); ?>
</div>
<div id="main">
<div class="site-wrapper">
Besides that, I just added the CSS from the tutorial into my child theme stylesheet with this media query above it:
#media screen and (min-width: 780px) .menu-btn div {
So I'm not sure what I've done wrong or what I need to do to fix it. Let me know if you have any ideas. Thanks!
<script src="javascript.js"></script>
Firstly, the path is wrong; 404;
<script src="<?php bloginfo('template_url'); ?>/js/javascript.js"></script>
bloginfo('template_url'); This is your path of theme, you can upload the javascript.js to the corresponding path
Secondly, the "javascript.js" need "jquery.js"; So you must add this behind "jquery.js"
No, you just include a jQuery files. Add this :
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
above your javascript.js
I am new in WordPress and I have problem with creating WordPress theme.
I've created a simple template (my first template), in the tutorial I read that I should cut all the header content and paste it in the header.php file.
I did this, and pasted all the header from <!Doctype html> to </head> in header.php and when I include header using get_header() WordPress add a link inside a <div id="header" role="banner"> in body and show that to me.
I don't need that link and div, How to get the rid of that?
This is my code:
index.php:
<?php
get_header();
?>
<div id="extra-content">
<div id="extra-left-div">
<h3>Posts</h3>
<?php if(have_posts()): ?>
<?php while ( have_posts() ):the_post(); ?>
<?php the_title(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div id="extra-tag-div">
<h3>Tags</h3>
<?php the_tags('',''); ?>
</div>
<div id="extra-category-div">
<h3>Categories</h3>
<?php wp_list_categories('title_li=&hierarchical=0&depth=1&title_li=');?>
</div>
</div>
<div id="full-div">
<div id="logo">
<h1><?php bloginfo('name'); ?></h1>
</div>
<?php if ( have_posts() ) : ?>
<ul id="main-content">
<?php while ( have_posts() ) : the_post(); ?>
<li class="post" id="post-<?php the_ID(); ?>">
<h2 class="post-title"><?php the_title(); ?></h2>
<div class="summery-d"><?php the_excerpt(); ?></div>
<div class="post-meta">
<time> <?php the_date(); ?></time>
</div>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php
get_footer();
?>
header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/first.js"></script>
<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'mytheme' ), max( $paged, $page ) );
?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<link rel="stylesheet" media="screen" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="alternate" type="appliction/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf(__( 'آخرین مطالب %s', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="appliction/rss+xml" href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php printf(__( 'آخرین نظرات %s', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body <?php body_class(); ?>>
<div class="behind" id="b-1">
</div>
<div class="behind" id="b-2">
</div>
<div class="behind" id="b-3">
</div>
<div class="behind" id="b-4">
</div>
<div class="behind" id="b-5">
</div>
<div class="behind" id="b-6">
</div>
<div class="behind" id="b-7">
</div>
<a id="menu-a" href="javascript:void(0);">
</a>
divs with .behind class and #menu-a and some other elements are not in the source (just press ctrl+u), and a link added that I don't need it
<div id="header" role="banner">
<div id="headerimg">
<h1>Mohammad Kermani</h1>
<div class="description"></div>
</div>
</div>
<hr />
I am working on this website
I found the answer
There is not problem, I was named the header.php as headr.php
I just post this answer because maybe one other person has same problem...
I am trying to make my own website based on WordPress and i found really nice theme (FANWOOD LIGHT BY DEVPRESS) but i need to move "Navigation" or Menu below the header. When i did it my body just moved to right and i dont know what happned.
There is the webpage on free webhosting: http://stbrezenecka.wz.cz/ (It's in Czech language)
There is my header.php:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package Fanwood Light
* #since Fanwood Light 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'before' ); ?>
<header id="masthead" class="site-header" role="banner">
<hgroup>
<?php
$header_image = get_header_image();
if ( ! empty( $header_image ) ) { ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
</a>
<?php } ?>
<div class="header">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</hgroup>
</header><!-- #masthead .site-header -->
<div id="main-navigation">
<nav id="site-navigation" class="navigation-main" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Menu', 'fanwood_light' ); ?></h1>
<div class="assistive-text skip-link"><?php _e( 'Skip to content', 'fanwood_light' ); ?></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- .site-navigation .main-navigation -->
</div>
<div id="page" class="hfeed site">
<div id="main" class="site-main">
Threre is screenshot:
http://i.stack.imgur.com/CtAT8.png
You have <?php do_action( 'before' ); ?> which creates a <div>, so after </header> add </div>
Yeah I did it! Only thing what I did I just removed navigation from header.php and moved in to index.php and it worked.