How can I move the logo before the Site Title in WordPress?
I have this code so far:
function smartline_display_site_title() { ?>
<div class='my-logo'>
<img src="<?php bloginfo('template_directory');?>/images/AA.gif">
</div>
<a href="<?php echo esc_url(home_url('/')); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home">
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
</a>
<?php
}
Set or Add display: inline-block to .my-logo and .site-title
.my-logo{
display: inline-block;
}
.site-title{
display: inline-block;
}
Based on your website you can move your image to the left
<img src="http://abraham-accountants.co.uk/wp-content/themes/smartline-lite/images/AA.gif" style="float: left;">
DEMO HERE
Navigate to Smartline Lite: header.php file and change the below given code.
Let me know if it works ....
<div id="logo" class="clearfix">
<?php do_action('smartline_site_title'); ?>
<img src="image location" alt="alt title" height="auto" width="auto">
<?php // Display Tagline on header if activated
if ( isset($theme_options['header_tagline']) and $theme_options['header_tagline'] == true ) : ?>
<h2 class="site-description"><?php echo bloginfo('description'); ?></h2>
<?php endif; ?>
</div>
<div id="header-content" class="clearfix">
<?php get_template_part('inc/header-content'); ?>
</div>
</header>
Related
I have the following code:
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>"><?php the_title(); ?></p>
<p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
</div>
</div>
This ( with some more PHP lines ) turns out into this :
What I need is to have that white box clickable and it should send to the post link/article.
I tried adding
<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>
but it didn't work, or I did something wrong.
Any suggestions?
You can wrap the inner div in an anchor element to turn it into a link, and remove the anchor that's currently wrapping the title.
This is valid in HTML5.
<div class="carousel-caption">
<a href="<?php the_permalink(); ?>">
<div class="carousel-caption-inner">
<p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>">
<?php the_title(); ?>
</p>
<p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
</div>
</a>
</div>
I was able to fix it myself.
This is how I solved it. ( i found this method somewhere, I did not invent it :D )
<div class="carousel-caption container1">
<span class="link-spanner"></span>
<div class="carousel-caption-inner">
<p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>"><?php the_title(); ?></p>
<p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
</div>
</div>
As you can see, I added this code below the div I wanted to make it clickable
<span class="link-spanner"></span>
Then using this CSS:
.container1{
position:absolute;
}
.link-spanner {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
It made my white area become clickable and it takes me to the post link.
Thanks!
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'); ?>
I created the design that will be used to show first post differently from the others. It's not that easy because the first post needs to be in his own div id, which is completely different from the other posts.
Here is the code I currently use in wordpress php:
<?php get_header(); ?>
<!-- Begin Content -->
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image() ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading">
<h1>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="p-content">
Excerpt text of the first post goes here but php the_excerpt doesnt work for this wide paragraph
</div>
</div>
</div>
</div>
</div>
<div id="content-a">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="imgdiv"><img src="<?php echo catch_that_image() ?>" width="250"></div>
<div class="p-heading">
<h1>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
</div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info">
<?php the_time('j.m.Y') ?> |
<?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
<?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
</div>
</div>
<?php endwhile; ?>
and here is my site url http://www.virmodrosti.com/zdravje/
All I want is that first post isn't displayed twice, but is only moved to the wide post design. The big post is in content-wide. Let me know how to do that. Thank you.
try to add a counter that starts in zero and increment it inside your while loop, then use if else statement to check the value of counter if zero display the first post else the other posts.
EDITED
<?php $counter = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php if($counter == 0) { ?>
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image(); ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading">
<h1><?php the_title(); ?></h1>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<?php if($counter > 0) { ?>
<div class="post">
<div class="imgdiv"><img src="<?php echo catch_that_image() ?>" width="250"></div>
<div class="p-heading">
<h1><?php the_title(); ?></h1></div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info">
<?php the_time('j.m.Y') ?> |
<?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
<?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
</div>
</div>
<?php } ?>
<?php $counter ++; ?>
<?php endwhile; ?>
I'm having a very strange issue that I can't figure out. I'm working on a custom theme in wordpress and I've got a div with an image and another icon image inside.
I'm trying to make both the whole image and the icon image within it a link.
The issue is that when I try to put a link around the whole div, Wordpress closed the link prematurely and then adds a second link - neither of which are actually enclosing my div.
If I change the div to a span, it will let me wrap it in a link. Why?! What is going on and how and I turn off this 'feature'?
Here is the selected code in my template file:
<a href="<?php the_permalink(); ?>">
<div class="img">
<?php if (has_post_thumbnail()): ?>
<img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>">
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
<?php endif; ?>
<?php if ($categories): ?>
<?php echo $categories[0]->cat_name?>
<?php endif; ?>
<div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
</div>
</a>
However, this is the code that is being outputted to the browser:
<a href="http:somelink">
</a>
<div class="img">
<a href="http:somelink">
<img style="display: none;" src="imagelink.jpg" alt="This isn’t our beautiful contest – how did we get here?">
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
</a>
Agency Mojo
<div class="background" style="background-image: url('http://imagelink.jpg');"></div>
</div>
So as you can see, it's closing the link immediately, and then adding another link inside of the `
Any help would be amazing as I've seen this question asked but not answered in a few other places including here on this site
I generally try to avoid nesting anchor tags. Perhaps something like this would work better.
<div class="img">
<?php if ( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>">
<img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>" />
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
</a>
<?php endif; ?>
<?php if ($categories): ?>
<a href="<?php echo get_category_link($categories[0]-> term_id ); ?>" class="category-link">
<?php echo $categories[0]->cat_name; ?>
</a>
<?php endif; ?>
<a href="<?php the_permalink(); ?>">
<div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
</a>
</div>
I want to show only the articles from current category, where I am at the moment. I wrote code for a look of every post. I use plugin Advanced Custom Fields, which can create more fields for new post in administration.
Now I have this code:
<?php $the_query = new WP_Query( 'cat=' ); ?>
<div id="category-window">
<div id="others" style="width:<?php echo $wp_query->post_count*400?>px">
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="other-box">
<div id="other-name"><?php the_title(); ?></div>
<div id="other-left"><?php the_field(misto); ?><br><?php the_field(rok); ?></div>
<div id="other-right"><?php foreach((get_the_category()) as $category) {echo $category->cat_name . '<br>';} ?></div>
<div id="other-line"></div>
<div id="other-about"><?php the_field(dej); ?></div>
<div id="other-gallery">
<a class="other-photo fancybox" rel="<?php the_title(); ?>" href="<?php the_field(obrazek1); ?>">
<img src="<?php the_field(obrazek1); ?>" style="width: 85px; height: 50px;">
</a>
<a class="other-photo fancybox" rel="<?php the_title(); ?>" href="<?php the_field(obrazek2); ?>">
<img src="<?php the_field(obrazek2); ?>" style="width: 85px; height: 50px;">
</a>
<a class="other-photo fancybox" rel="<?php the_title(); ?>" href="<?php the_field(obrazek3); ?>">
<img src="<?php the_field(obrazek3); ?>" style="width: 85px; height: 50px;">
</a>
</div>
</div><?php endwhile; ?>
</div>
</div>
And the problem is just in the first line, I have no idea, what to write behind "cat=", when I want to do it automatically. For example when I am in category "cars", it automatically show only the articles from this category.
Thank you for every help :)
Something like this should work :
<?php
$postid = get_the_ID();
$catid = get_the_category( $postid );
?>
That should get you the cat id.