Customiser - BGColor and BGImage Display - css

Had this working in the past but suddenly its not. Below is the structure:
Thre is a setting and control for it as well, and the background color and image settings both work individually however when I have both settings it wont work, Originally I had it working that the color always worked unless a background image was selected and that would override it but now the color works and background-image doesn't. is there a way to get this working again?
<footer class="footer" role="contentinfo">
<div id="inner-footer" class="row">
<div class="large-12">
<div class="medium-6 large-6 columns">
<div id="dragoncove-footer-textleft" class="float-left">
<?php { echo get_theme_mod( 'dragoncove_footer_textleft', 'No Copyright Information Added Yet' ); } ?>
</div>
</div>
<div class="medium-6 large-6 columns">
<div id="dragoncove-footer-textright" class="float-right">
<?php { echo get_theme_mod( 'dragoncove_footer_textright', 'No Information Added Yet' ); } ?>
</div>
</div>
</div>
</footer>
Here is the Functions:
function dragoncove_footer_customize_css() {
?>
<style>
<?php echo get_theme_mod( 'dragoncove_footer_textleft', 'Content Left Not Added Yet.' ); ?>
<?php echo get_theme_mod( 'dragoncove_footer_textright', 'Content Right Not Added Yet.' ); ?>
footer.footer {background-color: <?php echo get_theme_mod('dragoncove_footer_bgcolor', ''); ?>; }
footer.footer {background-image: url(<?php echo get_theme_mod('dragoncove_footer_bgimage', '') ?>); }
footer.footer {padding: <?php echo get_theme_mod('dragoncove_footer_padding', ''); ?>; }
footer.footer {color: <?php echo get_theme_mod('dragoncove_footer_navfontcolor', ''); ?>; }
</style>
<?php
}
add_action( 'wp_head', 'dragoncove_footer_customize_css');

found the fix. adding the ()
footer.footer {background-image: url(<?php echo get_theme_mod('dragoncove_footer_bgimage', '()') ?>); }

Related

Wy am I getting fatal error message with this code

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.

Why is my post being created inside another post? [ Wordpress ]

I know there is probably a solved question like this already, but I can't seem to find it.
I am just starting out so this may be a noob question, please bear with me ><
I am trying to display the top 3 recent posts on front-page.php of my site, the problem is that the post keeps being created within itself.
Here is the CSS involved.
.news-container{ background-color: #fff;
padding: 2em;
max-width: 600px;
heigth:300px;
text-align: left;
}
.has-thumbnail {
position: relative;
padding-left: 200px;
}
.post-thumbnail {
position:absolute;
top:0;
left:0;
}
article.post { border-bottom: 1px solid #bbbbbb;
margin-bottom: 3em;
}
article.post:last-of-type { border-bottom: none;
}
Here is the front-page.php code involved.
<div class="news-container">
<?php
$recentposts=get_posts('showposts=5');
if ($recentposts) {
foreach($recentposts as $post) {
setup_postdata($post);
?>
<article class="post <?php if ( has_post_thumbnail() ) { ?> has-thumbnail <?php } ?> ">
<div class="post-thumbnail">
<?php the_post_thumbnail('small-thumbnail'); ?>
</div>
<p><?php the_time('F j, Y'); ?>
<h3><?php the_title()?> </h3>
<p>
<?php echo get_the_excerpt(); ?>
Read more »
<br><br> <br><br> <br><br>
</p>
<?php
}
}
?>
</article>
</div>
Why is this happening? Thanks for reading this!
Try this updated code i think you not close all tags properly. This will solve your problem.
<div class="news-container">
<?php
$args = array('posts_per_page' => 5, 'post_type'=>'post' );
query_posts($args); $post_query = new WP_Query( $args );
while($post_query->have_posts()){ $post_query->the_post();
?>
<article class="post <?php if ( has_post_thumbnail() ) { ?> has-thumbnail <?php } ?> ">
<div class="post-thumbnail">
<?php the_post_thumbnail('small-thumbnail'); ?>
</div>
<p><?php the_time('F j, Y'); ?> </p>
<h3><?php the_title()?> </h3>
<p><?php echo get_the_excerpt(); ?>
Read more »
<br><br> <br><br> <br><br>
</p>
</article>
<?php } ?>
</div>
You can accomplish this with the WP Latest Posts Plugin: https://wordpress.org/plugins/wp-latest-posts/screenshots/

IE 8 Background Color is Wonky

My website, HeelsFirstTravel.com has an issue when someone views an individual post in IE 8 only.
The hot pink box in the upper right hand of the posts ( http://www.heelsfirsttravel.com/2013/07/09/another-reason-to-go-to-vegas-bacon-edition/ ) bleeds into the entire background in IE 8 only.
I've tried actively setting the background to white, but this makes no difference.
Any idea how I can fix in this one browser while preserving the box?
Edit: A user insists this only started a few days ago, which has me scratching my head even more. Nothing really changed!
Thanks!
-Jeanne
<?php get_header(); ?>
<?php $template = get_post_meta($post->ID, 'wpzoom_post_template', true);?>
<div id="main"<?php
if ($template == 'side-left') {echo' class="sidebar-reversed"';}
if ($template == 'full') {echo' class="full-width full-width-post"';}
?>>
<?php while (have_posts()) : the_post(); ?>
<div id="content">
<div class="single-content">
<h1 class="title"><?php the_title(); ?></h1>
<p class="postmeta"><?php if (option::get('post_category') == 'on') { ?><span class="category"><?php _e('In ', 'wpzoom'); the_category(', '); $prev = TRUE; ?></span><?php } ?>
<?php if (option::get('post_author') == 'on') { if ($prev) {echo ' / '; } ?><span class="author"><?php _e('By', 'wpzoom'); ?> <?php the_author_posts_link(); $prev = TRUE; ?></span><?php } ?>
<?php if (option::get('post_date') == 'on') { if ($prev) {echo ' / '; } ?><time datetime="<?php the_time("Y-m-d"); ?>" pubdate><?php the_time("j F Y"); ?></time><?php $prev = TRUE; } ?>
<?php if (option::get('post_comments') == 'on') { if ($prev) {echo ' / '; } ?><?php comments_popup_link( __('0 comments', 'wpzoom'), __('1 comment', 'wpzoom'), __('% comments', 'wpzoom'), '', __('Comments are Disabled', 'wpzoom')); }
edit_post_link( __('Edit post', 'wpzoom'), ' / ', ''); ?></p>
<?php if (option::get('post_share') == 'on') { ?>
<div class="divider social">
<span class="share_btn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe></span>
<span class="share_btn">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
<div class="cleaner"> </div>
</div><!-- end .divider .social -->
<?php } ?>
<?php
$videoEmbedCode = get_post_meta($post->ID, 'wpzoom_post_embed_code', true); // get video embed code
if ($videoEmbedCode)
{
$videowidth = 630;
$videoheight = 360;
if (strlen($videoEmbedCode) > 10){
$videoEmbedCode = preg_replace("/(width\s*=\s*[\"\'])[0-9]+([\"\'])/i", "$1 $videowidth $2", $videoEmbedCode);
$videoEmbedCode = preg_replace("/(height\s*=\s*[\"\'])[0-9]+([\"\'])/i", "$1 $videoheight $2", $videoEmbedCode);
$videoEmbedCode = str_replace("<embed","<param name='wmode' value='transparent'></param><embed",$videoEmbedCode);
$videoEmbedCode = str_replace("<embed","<embed wmode='transparent' ",$videoEmbedCode);
echo "<div class=\"video\">$videoEmbedCode</div>"; ?>
<?php
} // if strlen of video > 10
} // if video ?>
<?php the_content(); ?>
<div class="cleaner"> </div>
<?php wp_link_pages(array('before' => '<p class="pages"><strong>'.__('Pages', 'wpzoom').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php if (option::get('post_tags') == 'on') { ?><?php the_tags( '<p class="tags"><strong>'.__('Tags', 'wpzoom').':</strong> ', ', ', '</p>'); } ?>
<div class="cleaner"> </div>
<?php if (option::get('post_share') == 'on') { ?>
<div class="divider social">
<span class="share_btn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe></span>
<span class="share_btn">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
<div class="cleaner"> </div>
</div><!-- end .divider .social -->
<?php } ?>
</div><!-- end .single-content -->
<div class="cleaner"> </div>
<?php if (option::get('post_related') == 'on') {
if ($template == 'full') {
get_template_part('related-posts', 'full');
}
else {
get_template_part('related-posts');
}
} ?>
<?php if (option::get('post_comments') == 'on') { ?>
<div class="widget">
<p class="title title-medium border-dotted"><span><?php _e('discuss','wpzoom');?></span> <?php _e('this post','wpzoom');?></span></p>
<div id="comments">
<?php comments_template(); ?>
</div>
</div><!-- end .widget -->
<?php } ?>
<div class="cleaner"> </div>
</div><!-- end #content -->
<?php if ($template != 'full') { ?>
<aside>
<?php get_sidebar(); ?>
</aside>
<?php } ?>
<?php endwhile; ?>
<div class="cleaner"> </div>
</div><!-- end #main -->
<?php get_footer(); ?>
It looks like the issue is IE8 is getting confused by your markup. If you fire up Developer Tools, you will see that your aside element is being registered as a self-closing, empty element ( <aside /> ). That means the stuff you want inside your aside is now outside your aside and bleeding into the page.
Somewhere in your aside, there is likely some markup that is borking IE8's markup parser. I can't stress how important it is to ensure your markup and CSS validate. Check out the following sites, they are your friends:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Your problem is that you're using modern HTML5 elements that IE8 doesn't understand.
Elements like <header> and <aside> weren't invented when IE8 was released, and the browser doesn't work properly with them by default. The effects you're seeing are typical of the sort of things that happen in IE8 when you use HTML5 elements.
Fortunately, there is a solution, in the form of html5shiv. This is a small Javascript hack that fixes IE8 so that it accepts modern HTML5 tags as valid HTML. (it doesn't add any extra functionality to the browser; it just makes tags like <aside> work in old IE versions).
Add this script to the top of your page (preferably in an IE8-specific block so that it doesn't get loaded by other browsers), and the page should magically start working.
An alternative to html5shiv is the well-known Modernizr library. This includes the html5shiv functionality, but also provides additional features for helping you get your site working in old browsers without compromising on new features.
One final thing: I notice that although your page's DOCTYPE is set to the HTML5 doctype, your page also includes a reference to xhtml namespaces in the <html> element. I'm not quite sure why your page does this; I don't think it should cause a problem, but equally, it isn't really properly valid code.
Hope that helps.

First post in Wordpress blog displays incorrectly

I am styling a wordpress theme and the top blog post always displays incorrectly. The code is here:
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left"><?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<div class="entry-right">
<table>
<tr>
<td><p class="header">Details</p><br />
<?php $my_meta = get_post_meta( $post->ID, 'link', false ); ?>
<?php if ($my_meta): var_dump($my_meta) ?>
<?php foreach ($my_meta as $currMeta): ?>
<?php if( $currMeta && '' != $currMeta ): $currMeta=explode($currMeta,";",2);?>
<?php $my_meta[0];?>
<?php endif; endforeach; endif; ?>
</td>
<td>
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td>
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td>
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
<td>
</tr>
</table>
</div>
with the relevant CSS here:
.alignleft {
float:left;
}
.alignright {
float:right;
}
.bordered {
border:2px solid black;
}
.negative-margin {
margin-top:-25px;
margin-left:5px;
background:white;
}
.header {
font-size:200%;
}
.date {
font-size:150%;
}
.centered {
width:640px;
margin-left:auto;
margin-right:auto;
}
#entry-left {
float:left;
width:200px;
}
.entry-right {
float:right;
width:430px;
}
All the other posts have the border, with the title and date on the border, but the top post has a border that goes over the header, like so: http://imgur.com/6pE79ro
I'm relatively new to Wordpress and can't seem to figure out what's going on here.
Also, I'm trying to use Custom Fields to display links under "details." The idea is to have the key for the links always be "link", and the value to be in the format "description;url" so that I can break the value into two values to have a link description and URL display. I'm unable to get that to actually display any links. Any help would be greatly appreciated.
Perhaps irrelevant, but where do you close the following divs? <div class="bordered centered"> and <div id="entry-left">?
This is not exactly answering your second questions, but as for custom fields: I would suggest using a great WP module - ACF. It allows you to create and read values of custom-created fields easily, coming with many more useful features. The plugin can be found here: http://wordpress.org/extend/plugins/advanced-custom-fields/

PHP array displays values within HTML tags but not in CSS selectors (Wordpress)?

I'm following this tutorial to create custom Wordpress options
the function within theme/functions/admin-menu.php which changes the background color:
// Color Scheme
function color_scheme_setting() {
$options = get_option('plugin_options');
$items = array("Red", "Green", "Blue");
echo "<select name='plugin_options[color_scheme]'>";
foreach ($items as $item) {
$selected = ( $options['color_scheme'] === $item ) ? 'selected = "selected"' : '';
echo "<option value='$item' $selected>$item</option>";
}
echo "</select>";
}
header.php:
<style>
body {
background: <?php echo $options['color_scheme']; ?>
}
</style>
</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<div id="header">
<h1>
<?php bloginfo( 'name' ); ?>
</h1>
<?php $options = get_option('plugin_options'); ?>
<h2> <?php echo $options['banner_heading']; ?> </h2>
<img src="<?php echo $options['logo']; ?>" alt='' />
<p><?php echo $options['color_scheme']; ?></p>
<div id="lang">
<?php do_action('icl_language_selector'); ?>
<?php _e( 'english', 'starkers' ); ?>
</div>
<ul id="nav">
<?php wp_list_pages('title_li='); ?>
</ul>
When I select "green" in the dashboard, $options['color_scheme'] in the background selector doesn't appear.
(but it does appear in $options['color_scheme'] inside the <p> tags
Any suggestions to make this array work in the background selector?
(I'm using Wordpress 3.03)
EDIT:
I just tried this:
<p style="color: <?php echo $options['color_scheme']; ?>"><?php echo $options['color_scheme']; ?></p>
and the <p> tag changed its color
Why it doesn't work between the <style> tags?
The $options variable is only initialized after your <h1> element is rendered. Its value is not available yet when you want to use it in the <style> block.
You might want to initialize that variable earlier:
<?php $options = get_option('plugin_options'); ?>
<style>
body {
background: <?php echo $options['color_scheme']; ?>
}
</style>

Resources