So my plan was to add custom banner to all pages simply using code in functions.php, it works, but not how I would like to
Code:
add_action( 'woocommerce_after_main_content', 'after_main_content', 1 );
function after_main_content() {
echo ' <style>
.img-container {
text-align: center;
}
</style>
<div class="img-container">
<img src="https://www.prospecs.lt/wp-content/uploads/2020/12/dpdtt-1.png" >
</div>
';
}
Problem:
Only in pages with sidebars my banner get's allocated to another section.
Any ideas how to place it in the right place on pages with sidebar?
my site: www.prospecs.lt
I suggest, you should use a theme footer action. Which is: ocean_after_main So the code would be:
add_action( 'ocean_after_main', 'after_main_content', 1 );
function after_main_content() {
if( is_shop() ){
echo ' <style>
.img-container {
text-align: center;
}
</style>
<div class="img-container">
<img src="https://www.prospecs.lt/wp-content/uploads/2020/12/dpdtt-1.png" >
</div>
';
}
}
Related
Tried to add default-image tag in functions.php but it's not working. It's only work when i upload img from wp dashboard but default img is not working
functions.php
<?php
add_theme_support('title-tag');
add_theme_support('custom-header', array(
'default-image' => get_stylesheet_directory_uri() . '/images/logo.jpg',
));
?>
CSS
#logo{
width: 890px;
position: relative;
height: 200px;
}
HTML
<div id="logo" style="background: url(<?php header_image(); ?>) no-repeat;">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
After some digging I found that adding default image path in child theme is quite different.
Keep path like this and it will work.
add_theme_support('custom-header', array(
'default-image' => '%2$s/images/logo.jpg',
));
In parent theme %s should be used while in child theme %2$s should be used.
See examples in this page. https://codex.wordpress.org/Function_Reference/register_default_headers
Did you add the background-image in css file?
Remove the code from functions.php
Make the html code as
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
Add the style
#logo {
width: 890px;
position: relative;
height: 200px;
background-image:url('../images/logo.jpg');
}
I have the following commands from a wordpress theme.
</head>
<body <?php body_class(); ?>>
<header id="masthead" class="site-header <?php echo ( get_theme_mod( 'panoramic-header-layout', 'panoramic-header-layout-standard' ) == 'panoramic-header-layout-centered' ) ? sanitize_html_class( 'panoramic-header-layout-centered' ) : sanitize_html_class( 'panoramic-header-layout-standard' ); ?>" role="banner">
<?php if ( get_theme_mod( 'panoramic-header-layout', 'panoramic-header-layout-standard' ) == 'panoramic-header-layout-centered' ) : ?>
<?php get_template_part( 'library/template-parts/header', 'centered' ); ?>
<?php else : ?>
<?php get_template_part( 'library/template-parts/header', 'centered' ); ?>
<?php endif; ?>
Now I need to add two logos one is on the left and the other one is on the right.
How to do that?
As mentioned in the comments section, simply add the icons to the HTML section and remove the theme-specific images. Here's a sample showing how this could be done:
HTML part:
<header>
<img class="logo left" src="PATH_TO_LEFT_LOGO.png">
<div class="header-text left">
This may be a title.
</div>
<img class="logo right" src="PATH_TO_RIGHT_LOGO.png">
<br class="header-clear" />
</header>
CSS to align the logo files:
.header-text {
color: white;
margin: 5px;
font-size: 20px;
}
.header-text.left,
.logo.left{
float: left;
}
.logo.right {
float: right;
}
.header-clear {
clear: both;
}
If you don't need the header text, remove the DIV layer and the appropriate rules from the CSS section. It should also be obvious that you will have to replace the paths to the logo images matching your configuration :-)
Here's a fiddle showing the above code.
I've got this code that allow me to display the logged-in customer in main header menu.
what I want is to change the location (or place) in the header (not in the menu), to change the color and the link url of this displayed username in the menu.
That was the code I was using to display it in the menu:
add_filter( 'wp_nav_menu_items', 'my_custom_menu_item');
function my_custom_menu_item($items)
{
if(is_user_logged_in())
{
$user=wp_get_current_user();
$name=$user->display_name; // or user_login , user_firstname, user_lastname
$items .= '<li>'.$name.'</li>';
}
return $items;
}
Here is the generated header top bar HTML code where I would like to have this, in the right after the mini-cart:
<div id="top-header">
<div class="container clearfix">
<div class="et-info"></div>
<div class="et-secondary-menu">
<div class="et-duplicate-social-icons"></div>
<a class="et-cart-info" href="#"></a>
</div>
</div>
</div>
How can I achieve this?
Thanks
Yes it's possible making a function that you will use in your header.php theme file:
function topbar_logged_user( $link = '#' ) {
// get the currect user
$cur_user = wp_get_current_user(); // $cur_user->display_name (or user_login , user_firstname, user_lastname)
// loggin users only
if ( $cur_user->exists() )
echo '<a class="user-topbar" href="' . $link . '">' . $cur_user->display_name . '</a>';
}
This code goes on function.php file of your active child theme (or theme) OR in plugin files too.
USAGE in your header.php active child theme file (or active theme)
<div id="top-header">
<div class="container clearfix">
<div class="et-info"></div>
<div class="et-secondary-menu">
<div class="et-duplicate-social-icons"></div>
<a class="et-cart-info" href="#"></a>
<?php function topbar_logged_user( 'your_link_in_here' ); ?>
</div>
</div>
</div>
And in style.css CSS file of your active child theme (or theme), you could add something like this for example:
a.user-topbar {
color: #999;
margin-left: 10px;
display: inline-block;
}
You can add/change custom css rules to fit your needs.
This should work
I have the following code :
<div class="wrap">
<div class="next">
<?php next_post('%', 'Next post', 'no'); ?>
</div>
<div class="prev">
<?php previous_post('%', 'Previous post', 'no'); ?>
</div>
</div>
and after hours of trying i am not able to add an image (small arrow image in png format) instead of "next post" and "previous post"
I tried (in the CSS) background-image: url(../img/arrow-left.png); amongst other things.
It does seem to work however when i create href tags
but the problem is that I cannot embed <?php next_post(); ?> in the href can I ?
like so : " class="next">
which did not work for me..
If you need any more information, please let me know and I will provide it.
Wordpress function next_post has been deprecated. Better to use the next_post_link function.
http://codex.wordpress.org/Function_Reference/next_post_link
You can change the output format including the images like this :
<div class="wrap">
<div class="next">
<?php $next_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-right.png'/>"?>
<?php next_post_link('%link', $next_dir . '<span>Next Post</span>', TRUE); ?>
</div>
<div class="prev">
<?php $prev_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-left.png'/>"?>
<?php previous_post_link('%link', '<span>Previous Post</span>' . $prev_dir, TRUE); ?>
</div>
</div>
UPDATE 1
With the provided solution you have also to modify your css file to your needs. Another way to do this (which is better imo) is without changing any php code is to do something like this :
.next a{
width: 25px;
height: 25px;
background: url(/img/arrow-right.png) no-repeat 0 0;
text-indent: -9999px;
}
.prev a{
width: 25px;
height: 25px;
background: url(/img/arrow-left.png) no-repeat 0 0;
text-indent: -9999px;
}
The html code rendered by wordpress is a links like .
You should also change the width and height to the dimensions of your images.
I am new to css and coding, but I am wondering in the below code where it is pulling the imiage from the post. I dont want this page pulling images...it is pulling imiage from blog post and pages...is there a code I can place to make sure it does not pull the image?
thanks
<style>
#para1{ text-align:center;}
.bdr_blb{
border:#000000 solid 4px;
height:70px;
background:#cccccc;
text-align:center;
font-size:14px; font-weight:700;}
.light32{ font-size:32px;}
.bggrey{ background:#cccccc;}
.light18{ font-size:18px;}
#bedroom4{
background:#cccccc;
}
.heading_div{float:left;}
.entry-content{float:left;}
.thumnail_col ul li {
float: left;
list-style: none outside none;
margin-right: 15px;
}
.thumnail_col ul li img{background:none; border:none;}
</style>
?>
<div id="container">
<div id="" role="main">
<?php $args = array( 'category_name' => 'lease', 'orderby' => 'title' ,'order' => 'ASC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
if ($count==1)
{
echo "<tr>";
}
?>
<td><div class="lease">
<div class="heading_div"><h2 class="entry-title"><strong><u>
<?php
echo ''.$loop->post->post_title.'';
?>
</u></strong></div></h2>
<div class="entry-content">
<div class="desc">
<?php
the_content();
?>
</div>
</div></div></td>
<?php
if($count==$number_of_columns)
{
echo "</tr>";
$count=0;
}
$count++;
endwhile;
?>
</div><!-- #content -->
</div><!-- #container -->
You need to find where the function the_content(); is defined. Somewhere, look for:
function the_content()
Inside of that function definition is possibly code that echo's out an <img> tag. Delete or comment out that portion of the code. Until we see the definition of that function though, we cannot be sure of other consequences of modifying it.
UPDATE
This won't prevent the image from being loaded by the browser, but will prevent it from being actually displayed by the browser. It's easier than tracking down the function definition to modify PHP.
Inside the <style> tag at the top of your posted code above, add this (it can go anywhere in there):
.entry-content img {display: none;}
This simply tells the CSS no to show the image even though the browser has downloaded it.