I am trying to change my site header logo from an img to my site name (it would just take my site name from Wordpress settings). I can't figure out how to change this, and I feel like it is just a simple fix. Does anyone have any solutions?
inc/header/style5.php
<?php
$header_color = ot_get_option('header_color', 'light');
?>
<!-- Start Header -->
<header class="header style5 <?php echo esc_attr($header_color); ?>" role="banner">
<div class="row">
<div class="small-2 columns text-left mobile-icon-holder">
<i class="fa fa-bars"></i>
</div>
<div class="small-8 large-12 columns logo">
<div id="menu_width">
<?php if (ot_get_option('thb_logo')) { $logo = ot_get_option('thb_logo'); } else { $logo = THB_THEME_ROOT. '/assets/img/logo.png'; } ?>
<a href="<?php echo esc_url(home_url('/')); ?>" class="logolink">
<img src="<?php echo esc_url($logo); ?>" class="logoimg" alt="<?php bloginfo('name'); ?>"/>
</a>
<nav class="menu-holder">
<?php if (has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 3, 'container' => false, 'menu_class' => 'sf-menu style3', 'walker' => new thb_MegaMenu_tagandcat_Walker ) ); ?>
<?php } else if ( current_user_can( 'edit_theme_options' ) ) { ?>
<ul class="sf-menu style3">
<li><?php esc_html_e( 'Please assign a menu', 'goodlife' ); ?></li>
</ul>
<?php } ?>
</nav>
<?php do_action( 'thb_secondary'); ?>
</div>
</div>
<div class="small-2 columns text-right mobile-share-holder">
<div>
<?php do_action( 'thb_quick_search' ); ?>
</div>
</div>
</div>
</header>
<!-- End Header -->
And I think the only part of this code I have to edit is this little section? I just can't figure out how to edit it correctly.
<?php if (ot_get_option('thb_logo')) { $logo = ot_get_option('thb_logo'); } else { $logo = THB_THEME_ROOT. '/assets/img/logo.png'; } ?>
<a href="<?php echo esc_url(home_url('/')); ?>" class="logolink">
<img src="<?php echo esc_url($logo); ?>" class="logoimg" alt="<?php bloginfo('name'); ?>"/>
</a>
It looks like you just need to change:
<img src="<?php echo esc_url($logo); ?>" class="logoimg" alt="<?php bloginfo('name'); ?>"/>
to simply:
<?php bloginfo('name'); ?>
Related
I am creating a custom template for WordPress. I can add multiple featured images in a single post and can show them as a gallery or slider.
Everything works fine on the first post.
When I add my second post with 2 or more featured images it does not display any image at all if I have only 1 featured image it shows.
Can anyone review my code and tell me what am I missing:
EDIT
<?php /* Template Name: Home v4 */ get_template_part('/template-parts/home4_header'); ?>
<section class="background-color">
<?php query_posts('showposts=0'); ?>
<?php $i = 1; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if(($i % 4) !== 0) { ?>
<!-- Fixed width banner -->
<div class="container">
<div class="containerBox">
<!-- Multiple Featured Images Slider -->
<?php
if (class_exists('MultiPostThumbnails')) {
// Loops through each feature image and grabs thumbnail URL
$x=1; $image1_id; $image2_id; $image3_id; $image4_id; $image5_id;
while ($x<=5) {
$image_name = 'feature-image-'.$x; // sets image name as feature-image-1, feature-image-2 etc.
if (MultiPostThumbnails::has_post_thumbnail('post', $image_name)) {
$image_id = MultiPostThumbnails::get_post_thumbnail_id( 'post', $image_name, $post->ID ); // use the MultiPostThumbnails to get the image ID
$image_thumb_url = wp_get_attachment_image_src( $image_id,'small-thumb'); // define thumb src based on image ID
$image_feature_url = wp_get_attachment_image_src( $image_id,'feature-image' ); // define full size src based on image ID
$attr = array(
'rel' => $image_thumb_url[0], // sets the url for the image thumbnails size
'src' => $image_feature_url[0], // sets the url for the full image size
);
// Use wp_get_attachment_image instead of standard MultiPostThumbnails to be able to tweak attributes
$image = wp_get_attachment_image( $image_id, 'feature-image', false, $attr );
//echo $image;
if ($x == 1) {$image1_id = $image_id;}
if ($x == 2) {$image2_id = $image_id;}
if ($x == 3) {$image3_id = $image_id;}
if ($x == 4) {$image4_id = $image_id;}
if ($x == 5) {$image5_id = $image_id;}
}
$x++;
}
}; // end if MultiPostThumbnails
if (!empty($image2_id)) { ?>
<div class="multi-thumb">
<div id="ninja-slider">
<div class="slider-inner">
<ul>
<li>
<div class="slider">
<?php the_post_thumbnail('full'); ?>
</div>
</li>
<li>
<div class="slider">
<img src="<?php echo wp_get_attachment_image( $image2_id, 'feature-image', false, $attr );?>">
</div>
</li>
<?php if (!empty($image3_id)) { ?>
<li>
<div class="slider">
<img src="<?php echo wp_get_attachment_image( $image3_id, 'feature-image', false, $attr );?>">
</div>
</li>
<?php } ?>
<?php if (!empty($image4_id)) { ?>
<li>
<div class="slider">
<img src="<?php echo wp_get_attachment_image( $image4_id, 'feature-image', false, $attr );?>">
</div>
</li>
<?php } ?>
<?php if (!empty($image5_id)) { ?>
<li>
<div class="slider">
<img src="<?php echo wp_get_attachment_image( $image5_id, 'feature-image', false, $attr );?>">
</div>
</li>
<?php } ?>
</ul>
<div class="fs-icon" title="Expand/Close"></div>
</div>
</div>
</div>
<?php
unset($image1_id, $image2_id, $image3_id, $image4_id, $image5_id, $image_name, $image, $image_thumb_url, $image_feature_url);
} else { the_post_thumbnail('full'); } ?>
<!-- End Multiple Featured Images Slider -->
</div>
<div class="post-area-category container-post-color bottom-padding">
<div class="content-block w-clearfix">
<div class="category">
<h5><?php echo the_category();?></h5>
</div>
<h1 class="black mastheading-post-v3"><?php the_title(); ?></h1>
<div class="date-block-v3 w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">
<?php
$comments_count = wp_count_comments();
echo $comments_count->approved;
?>
</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta-home-category w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
<div class="space-4 background-color"></div>
</div>
<!-- Fixed width banner -->
<?php } elseif (($i % 4) == 0) { ?>
<!-- Full width banner -->
<div class="container-fluid">
<div class="containerBox">
<div class="home-v3-full-banner">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
</div>
<div class="container post-area-category container-post-color bottom-padding">
<div class="content-block w-clearfix">
<div class="category">
<h5><?php echo the_category();?></h5>
</div>
<h1 class="black mastheading-post-v3"><?php the_title(); ?></h1>
<div class="date-block-v3 w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">
<?php
$comments_count = wp_count_comments();
echo $comments_count->approved;
?>
</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta-home-category w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
</div>
<!-- End Full width banner -->
<?php } ?>
<?php $i++; ?>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
<?php wp_reset_query(); ?>
</section>
<?php get_footer(); ?>
Try this code. Not tested
<?php query_posts('showposts=0'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $i = 1; ?>
I am currently creating a child theme and the logo is not clickable back to the home page where the code is there.
When I click view source it looks as though as it should be
<div class="tb-logo"> <a href="http://localhost:8080/wordpress-child" class="logo">
<img src="http://localhost:8080/wordpress-child/wp-content/uploads/2015/12/trim-logo.png" alt="name of image"></a></div>. This is the header.php page
<header class="top-bar">
<div class="tb-logo">
<?php
/**
* Check if there is a uploaded logo
*/
$kouki_logo = of_get_option( 'kouki_logo' );
if( $kouki_logo ) : ?>
<a href="<?php echo esc_url(home_url()); ?>" class="logo">
<img src="<?php echo esc_url( $kouki_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>">
</a>
<?php else : ?>
<h1><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
</div>
<nav id="menu-child" class="t-lightweight" role="navigation">
<span class="menu-detail"></span>
<ul>
<?php wp_nav_menu( array( 'container' => '', 'items_wrap' => '%3$s' ) ); ?>
</ul>
</nav>
</header>
So I'm not quite sure why it's not making the link clickable. I even tried hard coding it as <img src="image"> but with no luck.
It only works when I don't load the child theme. The original looks like this
<header class="top-bar">
<div class="tb-logo">
<?php
/**
* Check if there is a uploaded logo
*/
$kouki_logo = of_get_option( 'kouki_logo' );
if( $kouki_logo ) : ?>
<a href="<?php echo esc_url(home_url()); ?>" class="logo">
<img src="<?php echo esc_url( $kouki_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>">
</a>
<?php else : ?>
<h1><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
</div>
<div class="navigation-toggle-wrapper">
<a class="primary-nav-trigger" href="javascript:void(0)">
<span class="menu-icon"></span>
</a>
<nav id="menu" class="t-lightweight" role="navigation">
<span class="menu-detail"></span>
<ul>
<?php wp_nav_menu( array( 'container' => '', 'items_wrap' => '%3$s' ) ); ?>
</ul>
</nav>
</div>
</header>
So it's something to do with the menu classes but I don't know why?
You didn't pass a parameter in the path to home url. Try this:
<a href="<?php echo esc_url(home_url('/')); ?>" class="logo">
<img src="<?php echo esc_url( $kouki_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>">
</a>
Also, since the home page will forever be the (/) path, unless you wanted the logo to lead to a different page that will be dynamic, you can simple hard code it this way:
<a href="/" class="logo">
<img src="<?php echo esc_url( $kouki_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>">
</a>
I am using Advanced Custom Fields in order to show different banner image for each language with qTranslate plugin.
<?php get_header(); ?>
<section id="linea">
<?php if(qtrans_getLanguage()=='en') {
?>
<img src="<?php the_field('banner')?>">
<?php }
else if(qtrans_getLanguage()=='es') {?>
<img src="<?php the_field('banner_image_es')?>">
<?php }?>
</section>
<section id="categoria1">
<div class="pagewidth clearfix">
<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
<h1 class="categoria-title"><span class="left"></span><b><?php single_term_title(); ?></b><span class="right"></span></h1>
</div>
</section>
<section id="categoria2">
<div class="pagewidth clearfix">
<ul class="product-list">
<?php $my_query = new WP_Query(array('post_type' => 'productos','taxonomy'=>'categoria','term'=>'conformink-cunero-luxy','paged' => get_query_var('paged'))); ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post();?>
<li>
<h5><a style="color: #f79646;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<a class="verdetalle" href="<?php the_permalink(); ?>"><?php if( qtranxf_getLanguage() == 'es' ){ ?>Ver detalle<?php }else { ?>See More<?php } ?></a>
<!-- <p><?php echo substr(get_the_excerpt(), 0,120); ?></p> -->
<?php the_post_thumbnail('thumbnail'); ?>
</li>
<?php
endwhile;
wp_pagenavi( array( 'query' => $my_query ) );?>
<?php wp_reset_query(); ?>
</ul>
</div>
</section>
<?php get_footer(); ?>
The problem is that it keep showing the image of only one post on all templates, although I have already assigned the different images to different categories.
Can anyone help?
If you want the banner to show up on every post you'll have to move the section inside the loop:
<section id="categoria2">
<div class="pagewidth clearfix">
<ul class="product-list">
<?php
$my_query = new WP_Query(array('post_type' => 'productos','taxonomy'=>'categoria','term'=>'conformink-cunero-luxy','paged' => get_query_var('paged')));
if ( $my_query->have_posts() ) : while ( $my_query->have_posts() ) : $my_query->the_post();?>
<li>
<section id="linea">
<?php if ( qtrans_getLanguage() == 'en' ) : ?>
<img src="<?php the_field('banner'); ?>">
<?php elseif ( qtrans_getLanguage() == 'es' ) : ?>
<img src="<?php the_field('banner_image_es'); ?>">
<?php endif; ?>
</section>
<h5><a style="color: #f79646;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<a class="verdetalle" href="<?php the_permalink(); ?>"><?php if( qtranxf_getLanguage() == 'es' ){ ?>Ver detalle<?php }else { ?>See More<?php } ?></a>
<!-- <p><?php echo substr(get_the_excerpt(), 0,120); ?></p> -->
<?php the_post_thumbnail('thumbnail'); ?>
</li>
<?php
endwhile; endif;
wp_pagenavi( array( 'query' => $my_query ) );
wp_reset_query(); ?>
</ul>
</div>
</section>
I want to put .masthead-fixed .the main remaining pages ... just not on HOME PAGE
<div id="page" class="hfeed site">
<?php if (!is_home() || !is_front_page()) { ?>
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<?php } ?>
This is the site:
http://avocat.dac-proiect.ro/wp/
This is code CSS:
.masthead-fixed .site-main {
margin-top: 48px;
display:none;
How do you solve this?
I build a Wordpress theme and I want to have content only and not on other pages ... HOME PAGE
.masthead-fixed, .site-main {
You need to put a coma to affect a css rule to many html elements.
I have the ad code.
<div id='div-gpt-ad-1373299297661-0-oop'>
<script type='text/javascript'>
googletag.display('div-gpt-ad-1373299297661-0-oop');
</script>
</div>
where should I add this to pop up on page load.
I added this code on the header.php file, under the <body> tag.
but it shows on the top of header.it should be pop up in the middle of the page.
header.php
<body <?php body_class();?> itemscope="itemscope" itemtype="http://schema.org/WebPage">
<!-- 450x450 -->
<!-- Overylay Banner -->
<div id='div-gpt-ad-1373299297661-0-oop'>
<script type='text/javascript'>
googletag.display('div-gpt-ad-1373299297661-0-oop');
</script>
</div>
<?php
if(of_get_option('full_or_boxed_layout')!= 'full_image_option'){
if(of_get_option('background_body_option')== 'big_image'){?>
<img alt="full screen background image" src="<?php echo of_get_option('background_large_image');?>" id="full-screen-background-image" />
<?php }}?>
<div id="content_nav">
<div id="nav">
<?php $top_menu = array('theme_location' => 'Top_Menu', 'container' => '', 'menu_class' => 'menu-top-menu-sf', 'menu_id' => '', 'fallback_cb' => false); wp_nav_menu($top_menu);?>
<?php $main_menu = array('theme_location' => 'Main_Menu', 'container' => '', 'menu_class' => '', 'menu_id' => '', 'fallback_cb' => false, 'link_after'=>'<span class="border-menu"></span>'); wp_nav_menu($main_menu);?>
</div>
</div>
<?php if(of_get_option('full_or_boxed_layout') == 'box_image_option'){ if(of_get_option('background_option') == 'background_image'){?>
<div class="full-background"><img src="<?php echo of_get_option('background_large_image');?>" alt="" /></div>
<?php }}?>
<div id="sb-site" class="<?php if(of_get_option('full_or_boxed_layout') == 'full_image_option'){echo "body_wraper_full";}else{echo "body_wraper_box";}?>">
<div>
</div>
<!-- Start header -->
<header class="header-wraper">
<div class="header_top_wrapper">
<?php $main_top = array('theme_location' => 'Top_Menu', 'container' => '', 'menu_class' => 'sf-top-menu', 'menu_id' => 'menu-top', 'fallback_cb' => false);?>
<div class="row <?php if($main_top == "" || !of_get_option('disable_top_menu')==0){echo "no-top";}?>">
<div class="six columns header-top-left-bar">
<a class="open toggle-lef sb-toggle-left navbar-left" href="#nav">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</a>
<?php if(!of_get_option('disable_top_menu')==1){?>
<div class="mainmenu">
<?php wp_nav_menu($main_top);?>
<div class="clearfix"></div>
</div>
<?php }?>
</div>
<div class="six columns header-top-right-bar">
<?php if(!of_get_option('disable_top_search')==1){?>
<div id="search_block_top">
<form id="searchbox" action="<?php echo home_url(); ?>" method="GET" role="search">
<p>
<input type="text" id="search_query_top" name="s" class="search_query ac_input" value="" placeholder="<?php _e('Search here', 'jelly_text_main'); ?>">
<a class="button_search" href="javascript:document.getElementById('searchbox').submit();"></a>
</p>
</form>
<span>Search</span>
<div class="clearfix"></div>
</div>
<?php }?>
<?php if(!of_get_option('disable_top_header_date')==1){?>
<div class="clock">
<i class="fa fa-clock-o"></i>
<div id="Date">
<?php
/*setlocale(LC_TIME, "pt_BR");
$currDate = strftime("%e %B, %Y, %H:%M");
echo $currDate;*/
?>
<?php echo date('l j F Y'); //setlocale(LC_TIME, "de_DE"); echo strftime('%A %d %B %Y');?></div>
<ul>
<li id="hours"></li>
<li class="point">:</li>
<li id="min"></li>
<li class="point">:</li>
<li id="sec"></li>
</ul>
</div>
<?php }?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="header_main_wrapper">
<div class="row">
<div class="<?php if (is_active_sidebar('banner-sidebar')) { echo'four columns header-top-left'; } else { echo'twelve columns logo-position';}?>">
<!-- begin logo -->
<a href="<?php echo home_url(); ?>">
<?php $logo = of_get_option('logo_uploader'); ?>
<?php if (!empty($logo)): ?>
<img src="<?php echo $logo; ?>" alt="<?php bloginfo('description'); ?>"/>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo('description'); ?>"/>
<?php endif; ?>
</a>
<!-- end logo -->
</div>
<?php if (is_active_sidebar('banner-sidebar')){ ?>
<div class="eight columns header-top-right">
<?php dynamic_sidebar('banner-sidebar');?>
</div>
<?php }?>
</div>
</div>
<!-- end header, logo, top ads -->
<!-- Start Main menu -->
so where is should I place the ad code?
is it possible to add the overlay banner via text widget? without editing the header.php??
to load something on page load, you need to add it to the <body> tag itself like this:
<body onLoad="callJSFunction()">
.
.
.
</body>
take a look at this tutorial :D