How to make WordPress menu items? - php

I am learning WordPress and basically I have this very simple site, I have the following header file:
<!doctype html>
<html <?php language_attributes(); ?> >
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<h1><?php bloginfo('name'); ?></h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
</header>
Now I believe, the menu is actually created by the below line of code:
<?php wp_nav_menu($args); ?>
Now when I check in the Front End, i.e. I load my site, I see that the only item in my menu is "sample-page", I was following from 1:38 onwards HERE and you'll see how this guy get a menu with "about us", "home", "contact" etc…
Now why am I not getting the same and how can I create those menus?

To create your own menu, you need to first go to your wp-admin dashboard. Then go to Appearance/menus.
Here you can create your own menus, or modify existing menus. After you do this, choose the role of the menu from the near footer of the page, just before the "Save menu" option.
And I hope you're all done!

Your code is attaching the 'primary' theme location to wp_nav_menu. Go to your dashboard Appearance>Menu page and see if you have a Primary menu in
the dropdown next to 'Select a menu to edit'. If so, select it. The pages in that menu should show. You can add to them as needed.

Related

Wordpress White Screen of Death after activate own theme

I'm trying to create my new own theme for wordpress (and the first one) and I encounter that my site isn't loading the header nor the content of index.php. It's pretty strange, I've read the WP WSoD documentation but I couldn't find anything helpful since my theme only have a couple of lines, I don't see the problem.
This is my theme structure:
And I've only edited index.php, header.php and footer.php. My functions.php seems to have something but I just added some lines to test, it's now blank again.
And this is what's inside my header.php:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> <?php bloginfo( 'name' ); ?> </title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/assets/css/bootstrap.min.css">
<!-- Natural Stylesheet -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="<?= get_template_directory_uri(); ?>/assets/img/favicon.png"/>
</head>
<body>
This is what's inside my footer.php:
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/popper.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/bootstrap.min.js"></script>
</body>
</html>
And this is what I've inside my index.php:
<?php get_header(); ?>
<?php while( have_posts() ) the_post(); ?>
<?php get_footer(); ?>
I edited index.php and WordPress was loading front-page.php

Adding wp_head() in wordpress header makes everything in body disappear

I am starting with wordpress and after adding dynamic heading <?php wp_head(); ?> everything in the body disappears.
this is my header.php file
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset');?>">
<title><?php bloginfo('name');?> | <?php wp_title();?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.css" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
<?php wp_head(); ?>
</head>
When I remove the <?php wp_head(); ?> line, everything in the body shows. I am told that including the line is a must in wordpress.
On your header.php you have to call:
<?php wp_head(); ?>
On your internal pages, like index.php you have to call:
<?php get_header(); ?>
See:https://codex.wordpress.org/Theme_Development
Also you can turn your debug mode on in order to identify the errors.
https://codex.wordpress.org/Debugging_in_WordPress

How do I change – (endash) to | (vertical bar) in my browser?

In the browser tab info of my site I want to replace the dash with a vertical line.
So instead of Site Name - Site Tagline it would be Site Name | Site Tagline. It would also be like that on category pages, for example right now it is Site Name - Site Category but I would like Site Name | Site Category. I am using the Goodlife theme but I have added the header.php below. Does anyone know how I could change this?
header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_site_icon(); ?>
<?php
$header_style = ot_get_option('header_style', 'style1');
$general_boxed = (ot_get_option('general_boxed') == 'on' ? 'boxed' : '');
?>
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="open">
<!-- Start Mobile Menu -->
<?php do_action( 'thb_mobile_menu' ); ?>
<!-- End Mobile Menu -->
<!-- Start Content Container -->
<section id="content-container">
<!-- Start Content Click Capture -->
<div class="click-capture"></div>
<!-- End Content Click Capture -->
<?php
get_template_part( 'inc/header/fixed' );
get_template_part( 'inc/header/subheader' );
get_template_part( 'inc/header/'.$header_style );
get_template_part( 'inc/header/pageskin' );
?>
<div role="main" class="<?php echo esc_attr($general_boxed); ?>">
According to this article, you need to add the following code inside functions.php:
function wploop_change_separator()
{
return '|';
}
add_filter('document_title_separator', 'wploop_change_separator');

Remove unnecessary header in wordpress

I was just working with wordpress and managed to get my site up. Now i am getting this unnecessary header in my site (the black header ... right at the top), see below:
.
My header code looks like below:
<!doctype html>
<html <?php language_attributes(); ?> >
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<h1><?php bloginfo('name'); ?></h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
</header>
I am new to workpress and just beginning to learn stuff.
How can i remove this header?
Thank you.
Wordpress shows this admin bar by default when you are logged in in the backend. Non-admin users will not see it, but you can disable this in your profile if you want.
Go to Users -> Your profile
Disable the option Show toolbar when viewing site
remove this line, the header will goes hide
<?php wp_head(); ?>

wordpress custom text in header.php as page of edit field

I been creating a template from scratch in wordpress and now I have a template header with a image in it a text/ subheader text. And below that all some info text. What I want is that I can change that info text like a page or custom field in the backhand of wordpress.
This text as example I want to edit in the backhand : CUSTOM HEADER TEXT
see the code below:
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="nl" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="nl" > <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php echo wp_title(' | ', false, 'right') . get_bloginfo(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns">
<h1><?php bloginfo('name'); ?> <span class="description">| <?php bloginfo('description'); ?></span></h1>
</div>
<p>CUSTOM HEADER TEXT</p>
</div>
</div>
</div>
</header>
Just go to admin => Appearance => Widgets, Drag a text widget in any of your sidebar and put the text "CUSTOM HEADER TEXT" in the text widget and save it.
After that just go to your header file where you want to show this text and put this code snippet : <?php dynamic_sidebar( 'sidebar-1' ); ?> //here 1 is the id of your sidebar
Just check in front end, you will find the text but layout is a little different. To do this pixel perfect, go to your function.php file and search for your sidebar like "sidebar-1" and remove the extra divs from there.
Follow the above steps, you'll get what you want.

Categories