So I just added a Logo to the WordPress Theme I am working with, and I added the Logo with the following CSS:
#header {
background-image: url(img/logo.gif);
background-repeat: no-repeat;
height: 140px;
float: left;
width: 100%;
}
My Question is, how can I turn that Image into a Link linking to the Index of my WordPress Theme? I know the solution for simple HTML and CSS but I've never done something like that with WordPress...
You may want take a look at how the default Wordpress themes (twentyeleven, twentytwelve...) accomplish this. These themes are split up into several files that each cover certain parts of the website. The header image, links, navigation usually go into the header.php file somewhere.
This is how the Twenty Twelve theme links back to home in its header.php:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img ... />
</a>
From the looks of your code you have an element with class="header" somewhere, you can link it like this:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<div id="header">Header text?</div>
</a>
I suggest you read the official Wordpress documentation on developing themes, it covers the basics. And you should read up on some basic HTML and CSS tutorials maybe, or learn from the existing themes.
Related
First of all: I've already looked on How to change the logo of my wordpress site and I didn't found any useful information for my problem.
In the picture you see the costume logo picture...
...and I change it, if the screen size gets smaller, with this new image:
To replace the image I must write
#media screen and (max-width: 800px){
.logo-wrapper > .logo > img {
background-image: url('wp-content/uploads/2017/06/new_logo.png')!important;
}
}
But the old logo is still seen in the homepage and covered with a part of the new logo:
The old logo is probably still seen because it comes from the IMG-tag. Which will have a 'src="path-to-image"'
In your CSS, you're setting the background of the IMG-tag to 'new_logo.png' but the IMG might still hold an image as well.
Honestly, I'm not familiar with WP code structure, but you should look at the code where the IMG-tag resides or is generated. That's where you'll have to make some modifications to change the way the default logo is displayed to also be a CSS background so that your media-query would work/override default upon resolution change.
It could be something like this:
<div class="logo-wrapper">
<a class="logo" href="<?php someCodeToGetUrl()">
<img src="<?php getLogoUrl(); ?>" />
</a>
</div>
A potential change could be:
<div class="logo-wrapper">
<a class="logo" href="<?php someCodeToGetUrl()">
<span style="background-image: url('<?php getLogoUrl(); ?>')"></span>
</a>
</div>
At which point your media query should work. It may require some additional CSS for sizing/positioning etc.
Hope this helps. I'm sorry that I couldn't be of more help. I don't have enough time to install WP and check out the code for a more accurate example.
Try checking for logo option in "Customize" section on top of admin bar.
Check header.php file for logo tag and change URL of that.
I've a WP site with the Enfold-child theme. For the header, I choose to place the company logo upper left and main menu under the company logo. I would like to add an image on the right of the company logo but I don't try to do this.
Last part of header.php is the following
<?php
if(!$blank) //blank templates dont display header nor footer
{
//fetch the template file that holds the main menu, located in includes/helper-menu-main.php
get_template_part( 'includes/helper', 'main-menu' );
} ?>
<div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>
<?php
if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
do_action('ava_after_main_container');
?>
Have I to modify this file to add the image? Can you help me, please?
Thanks!
try this. It's a Knowledgebase article from Enfold detailing how to add a Widget area to the header for adding custom code, ie an image.
It's what we use to do exactly that.
: http://www.kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
if you do not want to touch the header.php you may consider using a css ::after selector
I've run into a small problem coding my own WP theme from scratch (with a static Home page and a separate Blog page). I can't change the font-color of my blog posts (that display after I click them). So I have a two-part question:
Why can't I get the_content to change color on my single.php page? Here's my code:
<?php
get_header();
the_post();
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
}
?>
<div class="white">
<div class="container">
<h2 class="black-text light" style="margin:0;">
<?php the_title();?>
</h2>
<h5 class="black-text" style="margin:0 0 7% 0;">
<?php the_author();?>
</h5>
<p class="black-text">
<?php the_content();?>
</p>
</div>
</div>
<?php
get_footer();
?>
What's happening is on my single.php page (which I'm using to design my individual blog posts), I've put 'the_title();' in an <h2>, 'the_author();' in an <h5>, and 'the_content();' in a <p>. I've also told each of those elements to show as black text. However, only the <h2> and <h5> change to black text. When I inspect it with Dev Tools, what's happening is WP is ignoring my hard-coded <p>, and creating new <p> of its own WITHOUT the black-font formatting.
My second question:
Am I even doing this right?? It displays fine on my local development, but am I doing this all in the correct way? Basically, I have a front-page.php that displays my Home Page. Then I have an index.php that shows the main blog page with small excerpts. Then, when a user clicks on a single blog post to open it, the individual post is shown with the single.php template. Is this right?
If a reference would help, you can see it here: www.uptowndownentertainment.com/blog
The code is missing from your post, you need to indent it with four spaces to make it show up. Looking at this page you seem to have added this before the content:
<p class="black-text" style="color:black !important;">
But the actual text is inside another paragraph element so it's not affected by that code. Wordpress automatically does this when writing posts. The easiest solution might be to add this to your style.css:
.container p {
color: black;
}
And then remove the style markup from the headers and paragraphs. It's always better to keep styles in the CSS instead of right in the code.
I have a wordpress theme I'm adapting to a clients needs, but I can't make the sidebar ads, which are 125x125px, show a same sized swf instead of a image. If I insert a swf link, it show a broken image thumbnail.
Please help me achieve this.
If it helps you, the url of the website is http://infodrum.ro/inde2.php/
PHP code
<?php if(get_theme_option('ads_125') != '') {
?>
<div class="sidebaradbox">
<?php sidebar_ads_125(); ?>
</div>
<?php } ?>
CSS
.ad125 {
margin: 10px;
height: 125px;
width: 125px;
}
You're usually inserting a path to an image in The backend, right? Like "http://somedomain.com/image.jpg"
Most likely, The Code Inside The Plugin then Produces something like
<img src="WHATEVER YOU ENTERED" />
Since an SWF is Not a valid image, everything ends up being terrible.
I suggest you try The normal WP Text Widget instead!
i am making a wordpress news site. I use the new wp menu 3.0 where every menu item links to a template page. On those pages i display posts from custom loops. for instance lets say i have the page breaking news that displays the posts from the breaking news category. When i click on that link it takes me to the breaking news page and from there when i view single post from that category i want the page breaking news to be highlighted.
I have searched and found that wordpress assings ancestor classes to the links but thats not the case for me since i think that only works with categories as the navigation and im using pages.
Can anyone help me?
Thanks :)
are you using firebug or the inspectors built into chrome and safari. with those you can directly see what classes are available for you to style. maybe you already know that. If there are no classes to style there are hooks you can use to add a class. can you provide a url to your site?
Try the following in header.php...
<?php
/**
* Do this to #access in header.php
*/
?>
<nav id="access" role="navigation" class="<?php
if(in_category('cat-1')) echo 'post-in-cat-1 ';
if(in_category('cat-2')) echo 'post-in-cat-2 ';
if(in_category('cat-3')) echo 'post-in-cat-3 ';
?>">
Then in your stylesheet add this:
/**
* look for the menu-item-# generated by the menu in your theme and use that.
*/
.post-in-cat-1 .menu-item-1234,
.post-in-cat-2 .menu-item-1235,
.post-in-cat-3 .menu-item-1236
{
color:#FFF; // or whatever color you want :)
}
That's just my first thought, totally untested, so let me know if it works at all. I'm guessing that it will work based on this.
It's not as dynamic as real category pages since you have to set up the categories yourself and add the menu-item numbers to your CSS as needed. So there might be a more clever solution. But, without testing it myself, this is what I would try.
1. In css file of ur website,include this line where
- nav is the id of <nav> tag,where i have mentioned my menus in header.php
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
#nav li.current_page_item a {
-moz-border-radius: 3px 3px 3px 3px;
background-color: #82BD42;
color: #FFFFFF !important;
padding: 10px;
text-decoration: none;
}
2. We can change background-color,color and padding to our choose.