I created an options field on my WordPress options page. My field contains 36 images for patterns of my body theme. All things work perfectly.
How can I add a scroll bar to my options field until it only shows some images, then by scrolling shows other images?
How can I hide radio buttons and select images instead on radio buttons?
This is my code
function YPE_body_pattern_callback() {
?>
<div>
<h3>Choose Pattern</h3>
<?php
$checked = 'checked="checked"';
$YPE_options = get_option( 'YPE_post_option_name' );
?>
<ul class="list-inline">
<?php for($i=1 ; $i<=36 ; $i++ ){
$pattern = 'body-bg'.$i; ?>
<li>
<input name="YPE_post_option_name[YPE_body_pattern]" type="radio" value="<?php echo $pattern ?>" <?php if($YPE_options['YPE_body_pattern'] == $pattern ) echo $checked; ?> />
<a href="#">
<img src="<?php echo get_template_directory_uri(); ?>/panel/images/patterns/<?php echo $pattern ?>.png" />
</a>
</li>
<?php } ?>
</ul>
</div>
<?php
}
I solved my problem by using the overflow:scroll;width:300px; CSS property for adding scroll bar by 300px height.
Related
I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
my problem is that i am using my own custom single-product.php page and its working as i am wanting because i have used loop to show single product contents according to mine needs ...
but no the only issue i an facing is that i could not get "add to cart" button code any where there ? and now my add to cart button is missing that made me totally unable to add product to cart ...
here is mine complete code <div class="shop-info">
<?php query_posts( array( 'post_type' => product, 'posts_per_page' => 1) ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2>
<?php the_title(); ?>
</h2>
<span class="check"></span>
<span class="stock">IN STOCK</span>
<span class="right-code">
<span class="code">CODE: </span>
<span class="number"><?php echo $product->get_sku(); ?></span>
</span>
<img src="<?php bloginfo('template_url'); ?>/images/shop-line.png" alt=""/>
<span class="price">$<?php $product = new WC_Product( get_the_ID() );
echo $price = $product->price; ?></span>
<span class="total">QUANTITY: </span>
<span class="select">
00
<span class="arrow"></span>
</span>
<img src="<?php bloginfo('template_url'); ?>/images/shop-line.png" alt=""/>
<div class="product-single-content">
<p class="product-detail">
<?php the_content(); ?>
</p>
</div>
<div class="add-buttons">
<a class="add-to-cart" href="<?php echo $product->single_add_to_cart_text(); ?>">ADD TO BASKET/ BORROW</a>
<a class="add-to-cart pink" href="">ADD TO WISH LIST</a>
</div>
<div class="social-links">
<ul class="social-networks">
<li>facebook</li>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="play" href="#">play</a></li>
</ul>
</div>
<?php endwhile; endif; ?>
</div>
in code above and in div class button's section my own buttons as anchors named as "ADD TO BASKET/BORROW" placed and i want once that anchor is clicked this item should be added to cart ... any one there to help me out of this please ... ??? :(
Replace
<a class="add-to-cart" href="<?php echo $product->single_add_to_cart_text(); ?>">ADD TO BASKET/ BORROW</a>
with
<?php do_action('woocommerce_simple_add_to_cart'); ?>
And if you want to change add to cart text then add below code to your theme's functions.php :
add_filter( 'woocommerce_product_single_add_to_cart_text', 'your_custom_cart_button_text' );
function your_custom_cart_button_text(){
return __( 'ADD TO BASKET/ BORROW', 'woocommerce' );
}
NOTE: It won't add for the variable products.
I'm having trouble switching an ACF Image field from the default fullsize to the thumbnail image in the HTML output.
I have an Image type sub-field ID 'homepage_custom_navigation_image' within a Repeater field ID 'homepage_custom_navigation'. Any advice will be greatly appreciated.
Here's the code I have so far, which is displaying the fullsize image OK but making the download time of my page pretty long:
<div id="homepage-navigation-container">
<?php
$rows = get_field('homepage_custom_navigation');
if($rows)
{
foreach($rows as $row)
{
echo '<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<a href=' . $row['homepage_custom_navigation_link'] . '><img src=' . $row['homepage_custom_navigation_image'] . ' alt=' . $row['homepage_custom_navigation_title'] . '></a>
</div>
<div class="homepage-navigation-item-title">
<a href=' . $row['homepage_custom_navigation_link'] . '><h2>' . $row['homepage_custom_navigation_title'] . '</h2></a>
</div>
</div>';
}
}
?>
</div>
If you'd like to control the size of an image, I can show you how I normally output them using ACF.
<div id="homepage-navigation-container">
<?php
if(get_field('homepage_custom_navigation'))
{
while(has_sub_field){
}
foreach($rows as $row)
{
echo '<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<a href=' . get_sub_field('homepage_custom_navigation_link'). '>'. wp_get_attachment_image(get_sub_field('homepage_custom_navigation_image'), 'thumbnail'). '</a></div>
<div class="homepage-navigation-item-title">
<a href=' . get_sub_field('homepage_custom_navigation_link') . '><h2>' . get_sub_field('homepage_custom_navigation_title') . '</h2></a>
</div>
</div>';
}
}
?>
This is assuming that 'homepage_custom_navigation_title', 'homepage_custom_navigation_link', and 'homepage_custom_navigation_image' are all subfields within your repeater. The key is to using wp_get_attachment_image. This will use the WordPress function, that creates an image based on the ID and size value input in the parameters. 'Thumbnail' is one of the WordPress default sizes though they can be tweaked and customized in your functions.php file.
Thanks everyone for your help a guidance. I took a bit of info from each of your suggestions and came up with this as an answer:
<!-- Homepage custom navigation here -->
<div id="homepage-navigation-container">
<?php if( have_rows('homepage_custom_navigation') ): ?>
<?php while( have_rows('homepage_custom_navigation') ): the_row();
// vars
$thumb = wp_get_attachment_image_src(get_sub_field('homepage_custom_navigation_image'), 'thumbnail');
$desc = get_sub_field('homepage_custom_navigation_title');
$link = get_sub_field('homepage_custom_navigation_link');
?>
<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image" style="background-image: url(<?php echo $thumb[0]; ?>); background-size: 120px auto; background-repeat: no-repeat; ">
</div>
<div class="homepage-navigation-item-title">
<h2><?php echo $desc;?></h2>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Try this:
<div id="homepage-navigation-container">
<?php if( have_rows('homepage_custom_navigation') ): ?>
<?php while( have_rows('homepage_custom_navigation') ): the_row();
// vars
$gal = get_sub_field('homepage_custom_navigation_image');
$desc = get_sub_field('homepage_custom_navigation_title');
$url = $gal['url'];
$title = $gal['title'];
$alt = $gal['alt'];
$size = 'thumbnail';
$thumb = $gal['sizes'][ $size ];
?>
<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" /></div>
<div class="homepage-navigation-item-title">
<?php echo $desc;?></h2>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
Just make sure that in "Return Value" you have selected "Image Object" and it should work (I have added alt for proper HTML5 and you can even add the image size if you want)
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.
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>