I want to put a logo in the header of a website. I use the theme "Snowbird". In the header.php I want to specify to Wordpress to place the logo a different place on the header, according to each page of the website.
This is the code I add to my header.php
<!DOCTYPE html>
<!--[if IE 9]>
<html class="ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 9]><!-->
<html <?php language_attributes(); ?>><!--<![endif]-->
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> itemtype="http://schema.org/WebPage" itemscope="itemscope">
<div class="xf__site hfeed">
<div class="content-area">
<div class="logo">
<img src="https://website/wp-content/uploads/2017/09/logo-website.png" alt="Logo" />
</div>
How can I do that ?
Best regard,
Lordaker
Use the body_class filter to add classes to the body element of specific pages and then use CSS to do the positioning.
PHP - functions.php
function wp_body_classes( $classes ) {
if ( is_page( 'Demo Page' ) ) {
$classes[] = 'demo-page';
}
return $classes;
}
add_filter( 'body_class', 'wp_body_classes' );
CSS
.demo-page .logo {
// position
}
Related
The problem is that on my one pager website the title tag doesn't get populated.
page.php looks like this:
<?php
locate_template( 'page-home.php', true );
exit();
page-home.php looks like this:
<?php get_header(); ?>
<?php get_template_part('template-sections/slider'); ?>
<?php get_template_part('template-sections/services'); ?>
<?php //etc. ?>
<?php get_footer();
header.php looks like this:
<!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"/>
<base href="<?php echo get_site_url(); ?>/">
<?php wp_head(); ?>
</head>
<body itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage" <?php body_class(); ?>>
<!-- etc -->
And footer.php looks like this:
<?php wp_footer(); ?>
</main>
<aside class="aside">
<div class="aside__content">
</div>
</aside>
</div>
</body>
</html>
Yes. There is a page present called home in the backend. And I would like Wordpress to pick that title up and use it as a title tag in header.php.
Now as far as I know, Wordpress normally automatically populates the title tag. So what's the problem here? Thanks!
PS: I am not using the wp_title filter anywhere in my custom Wordpress theme.
Ok, the solution I found might help others. So I felt free to post it here.
Part 1. Comparing with the standard twentyseventeen theme. I found that Wordpress needs add_theme_support( 'title-tag' ); to be able to manage the title. (Otherwise you should just add a <title> tag yourself in header.php, I guess.
Part 2. I needed to add a custom filter to functions.php to display the title in a format that is desired. For example (using a SEO plugin):
function custom_title( $title_parts ) {
$page_id = site_get_page_id(); // custom function, you might want to use global $post here
$seo_title = #get_post_meta( $page_id, '_aioseop_title' );
if ( isset( $seo_title[0] ) ) {
$title = $seo_title[0];
} elseif ( isset( $page_id ) ) {
$title = get_the_title( $page_id );
}
$page_title = isset( $title ) ? $title : 'Page not found in backend';
$title_parts['title'] = $page_title;
return $title_parts;
}
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');
I am looking to translate my wordpress page based on adding a parameter ?lang=de_DE.
Below is my index.php file :
<!DOCTYPE HTML>
<html<?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body>
<h1> <?php echo __('This is our website','basictheme');?> </h1>
<?php wp_footer(); ?>
</body>
</html>
functions.php file
<?php
function basictheme_functions() {
load_theme_textdomain('basictheme',get_template_directory_uri().'/lang');
add_theme_support('title-tag');
register_nav_menus(array(
'main-menu' => __('Main Menu','basictheme'),
'footer-menu' => __('Footer Menu','basictheme'),
));
}
add_action('after_setup_theme','basictheme_functions');
?>
How can I translate the page when I add the parameter to the URL.
(e.g http://localhost/about/?lang=de_DE)
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.
I am trying to add a CSS style to a WordPress theme that I am developing as is shown in this tutorial: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/ but seems don't work and I cant' understand why.
So this is the head.php file of my personal theme:
<!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" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<!--
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- <?php bloginfo('stylesheet_directory'); ?>/ -->
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">
if(f)
{
write_css('<?php bloginfo('stylesheet_directory'); ?>');
}
</script>
-->
<?php wp_head(); ?>
</head>
<body>
<center>
<div id="page">
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<hr />
And in my functions.php file I have put the following code:
<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('style.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');
?>
But the file style.css is not loaded. Why? What am I missing?
In particular the thing that I can't understand in the previous tutorial is how and hwere the wpb_adding_styles() is called because in the header.php file it is never called.
Someone can help me?
Tnx
Andrea
Simply paste this code:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', get_stylesheet_uri());
wp_enqueue_style('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');
?>
Problem with your code:
plugins_url it actually prints http://example.com/wp-content/pluginsinstead of http://example.com/wp-content/themes/your-theme
Use get_stylesheet_uri as it retrieves
http://example.com/wp-content/themes/your-theme/style.css
Don't know why the tutorial used wp_register_script and wp_enqueue_script for stylesheet as both used for Javascript files. Use wp_register_style and wp_enqueue_style for css files.
Your reference for your stylesheet (style.css) was not correct. The plugins_url function is for WP plugins, but you are trying to develop a WP theme.
Put this code into your theme's functions.php file:
function wpb_adding_styles() {
wp_register_script('my_stylesheet', get_stylesheet_uri() );
wp_enqueue_script('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');
Use of this in your functions.php
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
And add this into your header.php
<?php wp_enqueue_scripts(); ?>
Just replace names and address. If you need to add more than 1 .css or .js just copy and make new line.