I have this code in my header.php :
<div id="logo">
<?php if( get_option('of_logo') != '') { ?>
<a class="image" href="<?php echo get_option('home'); ?>/" title="Home">
<img src="<?php echo get_option('of_logo'); ?>" />
</a>
<?php } else { ?>
<h1 class="front-page-logo"><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
<?php } ?>
</div>
All works great! basically it says if the user uploads a logo image in the theme options panel, then show that image, else, show some text.
Now I need to replace this:
<?php } else { ?>
<h1 class="front-page-logo"><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
<?php } ?>
with display a image based on the style.css the user choose. And my problem here is if I go to each css file and declare a diferent image, then if the user uploads a image also, both images show on page.
So how can I do that?
thanks
Use a an id or class on your default logo and declare the image urls in the various css files using background-image:
<?php } else { ?>
<div id="default-logo"></div>
<?php } ?>
In the css files:
#default-logo {
background-image: url(".../1.jpg");
width: 80px;
height: 80px; /* the dimensions of your logo */
}
Related
I am using the genesis sample child theme and I getting the following error message: Fatal error: Cannot redeclare landing_do_content() (previously declared in XXX. I have reviewed all files and the function is not declared anywhere else.
`// Display content of flexible content layouts
add_action( 'genesis_entry_content', 'landing_acf_content' );
function landing_acf_content() {
if( have_rows('landing_page_content') ) { ?>
// Hero with text and button layout
if( get_row_layout() == 'hero_with_text_and_button' ) { ?>
<div class="landing-hero" style="background: url(<?php echo get_sub_field('hero_image'); ?>); background-size: cover;">
<div class="hero-content light dark">
<div class="wrap">
<h1 class="hero-title"><?php echo get_sub_field('headline'); ?></h1>
<p><?php echo get_sub_field('text'); ?></p>
<a class="button" href="<?php echo get_sub_field('url'); ?>"><?php echo get_sub_field('button'); ?></a>
</div>
</div>
</div>
<?php }
// Headline with WYSIWYG
else if( get_row_layout() == 'headline_with_wysiwyg' ) { ?>
<div class="heading-text" style="background-color: <?php echo get_sub_field('background_color'); ?>">
<div class="wrap">
<h2 class="plain-title"><?php echo get_sub_field('headline'); ?></h2>
<?php echo get_sub_field('content'); ?>
</div>
</div>
<?php }
<?php }
}`
If you are declaring a global function and not one inside a class, make sure to only call the file with this function only once, if you require or include the php file more than once, it will result in redeclaration error.
I've seen this article but it's not exactly relevant to what I'm trying to do. I have a simple blog loop in which each blog has an <div class="exerpt">for the preview of the blog text. All of my posts have a border-bottom and I'm simply trying to get rid of the border-bottom, as well as make other adjustments for the last-child. However every element is being styled, not just the last one. Please note I'm using the mighty html5blank
index.php
<div class="page-section" style="padding-top:150px;">
<div class="wrapper">
<?php get_template_part('loop'); ?>
<?php get_template_part('pagination'); ?>
</div>
</div>
loop.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="journal-title">
<?php the_title(); ?>
</h2>
<span class="date"><?php the_time('F j, Y'); ?> </span>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<!-- /post title -->
<div class="exerpt">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
</article>
.exerpt {
margin-bottom:80px;
border-bottom:1px solid #999;
padding:40px 0px 80px 0px;
}
.exerpt:last-child {
border:none;
margin-bottom: 60px;
}
Thanks!
You can add a separate class for the last item in the loop by doing something like this:
First add this before the loop starts:
<?php $post_counter = 0; ?>
Add this within the loop:
<?php $post_counter++; ?>
Then modify your excerpt code:
<div class="exerpt <?php if( $post_counter == count( $posts ) ) echo 'last-post'?>">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
CSS:
.last-post {
border:none;
margin-bottom: 60px;
}
I'm rebuilding my wordpress portfolio site. I have featured images that start as grayscale with a transparent PNG on top, and roll over into full colour with no PNG.
So after figuring out how to get the transparent PNG to sit on top of my featured image, I gave myself a pat on the back before realizing that the PNG makes the entire box unclickable.
It's cancelling out the links underneath (featured images to post)
"pointer-events:none" doesn't help either, it actually glitches the rollover effect a bit.
This is the CSS related to the image...
#png1 {width: 305px;
height: 175px;
float: left;
position: absolute;
z-index: 1;
}
#png1:hover {opacity: 0;
}
And this is the php I've got going on...
<?php if ( have_posts() ) : ?>
<?php $i = 0; ?>
<?php while ( have_posts() ) : the_post(); $i++; ?>
<div class="post_home">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(array(305,175)); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
<?php endif; ?>
</a>
<h2><?php the_title(); ?></h2>
</div>
<?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
<?php endwhile; ?>
Any suggestions?
EDIT:
I am by no means a web designer at all. I'm a print designer. I work in WP because I'm comfortable with CSS. I have a feeling the answer is right there in the code, staring at me, and I just have no idea what to do with it.
Any help at all would be super awesome :)
As I explained in my comment, you can just change the structure of the html slightly and put the img tag inside the anchor, this can be achieved by simply swapping the two lines:
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
becomes
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
I have the following css the margins are no working at all. Here is a link to the live site, keep in mind it is in mobile development so thats why it looks all funny. The element thats not moving is the austin kitson one right beside the tweet
css
i{
font-size:0.6em;
margin-top:-5px;
margin-left: -25px;
position:relative;
padding-bottom:10px;
}
html
<section class="blogPostsSection">
<header class="blogPostsHeader">
<?php edit_post_link('edit', '<p>', '</p>'); ?>
<h2><?php the_date(); ?></h2>
<h3><?php the_title(); ?></h3>
</header>
<?php $image = wp_get_attachment_image_src(get_field('add_images_here'), 'large');?>
<?php if( $image !=false ) {?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('add_images_here')) ?>" />
<?php } ?>
<p>
<?php the_content(); ?>
</p>
<a href="https://twitter.com/share" class="twitter-share-button"
data-text="<?php the_title(); ?>" data-via="twitterapi" data-lang="en">Tweet</a>
<script>
!function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>
<i>Austin Kitson</i>
</section>
You're not including your CSS: All your CSS and JS reference localhost. e.g., http://localhost/~anderskitson/techbasics/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.3.3
Wordpress corrects the html markup in posts and also in template specific files.
I'm working on a template and what I'm trying to achieve is wrap a div in <a href"#"></a> tag.
Before the foreach loop there is placed, then some more php and html markup and right before the foreach loop ends I paste in the ending tag .
What wordpress doeas it automatically adds the ending tag right after a href string tag, removes the correctly placed ending tag making the link empty.
He're is what I type:
<li <?php if (get_option('square_portfolio_filter') != "true") { ?> data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>" <?php ; } ?>>
<a href="#">
<div class="thumbs-animate">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(array(255,191), array('title' => ''.get_the_title().''));
}
?>
<div class="details">
<h5><?php the_title(); ?></h5>
<p><?php content('15'); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if(get_option('square_view_project_link')!="") {
echo get_option('square_view_project_link');
}else {
_e( 'View Project', 'square_lang' );
}
?>
</div>
</div>
</a>
</li>
And here is what Wordpress ends up saving:
<li <?php if (get_option('square_portfolio_filter') != "true") { ?> data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>" <?php ; } ?>>
<div class="thumbs-animate">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(array(255,191), array('title' => ''.get_the_title().''));
}
?>
<div class="details">
<h5><?php the_title(); ?></h5>
<p><?php content('15'); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if(get_option('square_view_project_link')!="") {
echo get_option('square_view_project_link');
}else {
_e( 'View Project', 'square_lang' );
}
?>
</div>
</div>
</li>
I temporarily fixed the issue using some javascript code but its neither good practice nor what I want to have:
onclick="location.href='<?php the_permalink();?>';" style="cursor:pointer;"
Just wanted to comment that wrapping a block-level element is inside an inline element is perfectly fine in HTML 5.
<div>...</div> is valid html 5.
<div>...</div> is invalid HTML. You're not supposed to have a block-level element (div) inside of an inline element (a). WordPress is likely trying to protect you from that.
I can't tell if using # as your href is part of the actual code or just something you did for simplification, but if that is the actual code and you're attaching an onclick or something to the a, you could instead attach that to the div and it would work just as well.