I have two pictures in my wordpress header, but these pictures are broken. How or where I need to put these pictures..
I created folder C:\wamp\www\wordpress\wordpress\wp-content\images and there is 2 images, but how I get these in to my header.
I already tried:
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='english.gif' /></a>
</div>
and
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='C:\wamp\www\wordpress\wordpress\wp-content\images\estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='C:\wamp\www\wordpress\wordpress\wp-content\images\english.gif' /></a>
</div>
and
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='images\estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='images\english.gif' /></a>
</div>
But its not working, what im doing wrong ??
Can somebody help me ? Thanks !
Images should generally go in a your-theme-name/images folder. What you're doing isn't necessarily wrong but it can lead to confusion down the line.
You can use <?php get_template_directory_uri(); ?> to get the current's template directory path. This is used for when your current theme is a child theme.
You can also use <?php bloginfo('template_directory');?> which will return the current template directory. If you're using a child theme, it will return the uri to the parent theme, not the child.
Long story short, you can use it like this for no child:
<a href = 'http://localhost/wordpress/wordpress/en/'><img src="<?php bloginfo('template_directory');?>/images/image-name" /></a>
And like this for a child theme:
<a href = 'http://localhost/wordpress/wordpress/en/'><img src="<?php get_template_directory_uri(); ?>/images/image-name" /></a>
Are you trying to add these pictures to a header theme? When editing a Wordpress theme I think you have to find the original theme header file in the theme folder in the wp-content folder.
C:\wamp\www\wordpress\wordpress\wp-content\themes\ (the name of your theme folder)
Related
So I attempted to look for a solution:
custom wordpress theme: layout images not displaying
It did not work for me.
My directory for my theme is
wp-content/themes/fearnothing/
and consist of these files
/css(folder)
/js (folder)
/images (folder)
header.php
index.php
function.php
footer.php
style.css
hrtbrk.gif
hrtbrk.png
css folder contains
fearnothing.css
js folder is empty
fearnothing.js
My header.php has the following code:
<!DOCTYPE html>
<html>
<head>
<title>example title</title>
<?php wp_head(); ?>
</head>
<body>
<img class ="nightsky" src="wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
functions.php
<?php
function fearnothing_script_enqueue(){
wp_enqueue_style('customstyle', get_template_directory_uri().'/css/fearnothing.css',array(), '1.1.2', 'all');
}
add_action('wp_enqueue_scripts', 'fearnothing_script_enqueue');
fearnothing.css
html,body{
background: black;
color: #8c0707;
font-family: Courier,Courier New,Lucida Sans Typewriter,Lucida Typewriter,monospace;
font-size: 10px;
cursor: pointer;
}
.nightsky{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
}
I'm trying to add the gif but it did not work. so I tried an image instead. I tested my code offline with html and it works fine?
EDIT
I added a images folder to my theme where the theme would be located.
add Home URL above wp-content
<img class ="nightsky" src="<?php echo home_url(); ?>/wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
Try this below options.
<img class ="nightsky" src="<?php echo site_url(); ?>/wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
OR
<img class ="nightsky" src="<?php echo home_url(); ?>/wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
Try using get_stylesheet_directory_uri() function
<img class="nightsky" src="<?php echo get_stylesheet_directory_uri()?>/hrtbrk.png" alt="">
Reference link
Try using get_template_directory() function
<img class="nightsky" src="<?php echo get_stylesheet_directory_uri()?>/hrtbrk.png" alt="">
So I figured out a method that works which is not really how I wanted it to work.
I needed to upload the image directly through wordpress media.
Which is stored in /wp-content/uploads
I wanted the images to be inside the themes folder wp-content/themes/fearnothing/images
but for some odd reason the files are being corrupted. (hence the broken image file)
After uploading directly to the uploads folder I was able to use the tag I had originally.
<img class ="nightsky" src="https://mywesbiteurl.com/wp-content/uploads/2018/12/hrtbrk.png" alt="" >
I'm new in php and css.
My goal is to put two icons into main menù of a wordpress site. these icons should point to dynamic external links to my domain.
My header.php code of my theme is:
<div id="flags" style="position:absolute;left:97%;top:10px; width:300px; height:30px; background-color:transparent">
<img src="wp-content/themes/minimable-premium/templates/it-icon-24.png" />
<img src="wp-content/themes/minimable-premium/templates/uk-icon-24.png" />
</div>
I need to take the current URL, replace only a part of that with a string of my choice. For example, into the first url, the string "aaa" with "ccc".
Thus, the icon link to the new address.
I tried to follow this way:
<div id="flags" style="position:absolute;left:97%;top:10px; width:300px; height:30px; background-color:transparent">
<?php
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$strEng = "eng";
$strIta = "ita";
$new_link = str_replace($strEng,$strIta, $actual_link);
?>
<div id="banner" onclick="window.location.href='$new_link'" style="cursor: pointer">
<img src="wp-content/themes/minimable-premium/templates/it-icon-24.png" />
</div>
<img src="wp-content/themes/minimable-premium/templates/uk-icon-24.png" />
</div>
Can you give me advice on how to write the correct code and in which files?
You can't reference array elements directly inside a string the same way you can with normal variables. You'll have to combine the multiple strings with the . operator. See my changes on line 3:
<div id="flags" style="position:absolute;left:97%;top:10px; width:300px; height:30px; background-color:transparent">
<?php
$actual_link = "http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$strEng = "eng";
$strIta = "ita";
$new_link = str_replace($strEng,$strIta, $actual_link);
?>
<div id="banner" onclick="window.location.href='$new_link'" style="cursor: pointer">
<img src="wp-content/themes/minimable-premium/templates/it-icon-24.png" />
</div>
<img src="wp-content/themes/minimable-premium/templates/uk-icon-24.png" />
</div>
It looks like you are trying to make a translatable site.
What I think you should do is use the large plugin community from WordPress to make your site translatable. (WPML, WordPress MultiLingual is a great one)
If you do want to do it this way, or want to change the uri of the website try it like this:
<style>
#flags {
position:absolute;
left:97%;
top:10px;
width:300px;
height:30px;
background-color:transparent;
}
#flags a {
display: block; /* if you want the link to be a block */
}
</style>
<div id="flags">
<?php
$actual_link = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
$strEng = "eng";
$strIta = "ita";
$new_link = str_replace($strEng,$strIta, $actual_link);
?>
<a id="banner" href="<?php echo $new_link; ?>">
<img src="wp-content/themes/minimable-premium/templates/it-icon-24.png" />
</a>
<a href="mydomain.com/bbb/">
<img src="wp-content/themes/minimable-premium/templates/uk-icon-24.png" />
</a>
</div>
Also with the above example, you both forget
Try avoiding inline styles. It works, but if you wanna make a job out of this clients and employers won't like it ;)
I have two flags in header ( im using customizr theme ), but in Chrome I see only 1 flag and in firefox 2 flags.
In Google Chrome:
and in Mozille Firefox:
My Question is, why I see only 1 flag in chrome ?
My code for this :
<header class="<?php echo implode( " ", apply_filters('tc_header_classes', array('tc-header' ,'clearfix', 'row-fluid') ) ) ?>" role="banner">
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
<div style = 'position: absolute; right: 100px; top: 10px; z-index: 201'>
<?php wp_loginout(); ?>
</div>
<div style = 'position: relative; right: 80px;'>
<?php
// The '__header' hook is used with the following callback functions (ordered by priorities) :
//TC_header_main::$instance->tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display()
do_action( '__header' );
?>
</div>
</header>
I already tried to move flags right position to 40,100, ... But nothing.
Can somebody help me or give some clue :) Thanks !
Try to remove the position styles from flags div because of this one flags not appear properly. Just empty for now and than check where flags displayed.
<div style = ''>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
The links on the images are being hidden or covered and I cannot figure out why. The first <a href.. below is an example of this.. Live version can be found here.. Basically any of the product images should be clickable..
<div class="image-wrap">
<a href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">
<img width="150" height="150" src="http://fundraisingfountain.pixelworklab.com/wp-content/uploads/2013/06/Pillow-Pets-Bulldog-2-150x150.png" class="attachment-shop_catalog wp-post-image" alt="Pillow Pets - Bulldog (2)">
</a>
<ul class="product-details">
<li class="details">
<a class="button details" href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">View Details</a>
</li>
<li class="price-wrap">
<span class="price"><strong><span class="amount">$25</span></strong></span>
</li>
<li class="cart">
Add to cart
</li>
</ul>
</div>
It works fine on my machine.
You'll have to check your CSS and make sure that there are no div tags that are layered on top of it (or have a higher z-index than it).
That is because you have set ul height:100% that is why it overlaps the image.
Change the height for the ul to something smaller and it will work fine
woocommerce.css Line # 634
ul.products li.product .product-details{
height:25px;
}
btw if you give a
border="0"
to your image links there wil be no grey (or any other color) border around it
Here's what you need to fix
ul.products li.product .product-details {
height: auto;
top: 108%;
}
ul.products li.product .product-details li {
vertical-align: middle;
}