I have an error with the menus on WordPress site fabzar.com it show correct on front page but when you click one of the products the menu changes and picks up the page name
Do you know what causes this and how to fix it
Thanks in advance
Heres the header Code.
>
<title>
<?php
wp_title( ' ', true );
?>
</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_enqueue_script("jquery"); ?>
<?php
wp_head();
?>
<?php do_action('PricerrTheme_before_head_tag_open'); ?>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/my-script.js"></script>
<!-- ########################################### -->
<script type="text/javascript">
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#big-search').addClass('load');
$.post("<?php bloginfo('siteurl'); ?>/wp-admin/admin-ajax.php?action=autosuggest_it", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
var stringa = data.charAt(data.length-1);
if(stringa == '0') data = data.slice(0, -1);
else data = data.slice(0, -2);
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#big-search').removeClass('load');
}
});
}
}
function fill(thisValue) {
$('#big-search').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 600);
}
$(document).ready(function(){
$(".expnd_col").click(function() {
var rels = $(this).attr('rel');
$("#term_submenu" + rels).toggle();
return false;
});
</script>
<?php
$PricerrTheme_color_for_footer = get_option('PricerrTheme_color_for_footer');
if(!empty($PricerrTheme_color_for_footer))
{
echo '<style> #footer { background:#'.$PricerrTheme_color_for_footer.' }</style>';
}
$PricerrTheme_color_for_bk = get_option('PricerrTheme_color_for_bk');
if(!empty($PricerrTheme_color_for_bk))
{
echo '<style> body { background:#'.$PricerrTheme_color_for_bk.' }</style>';
}
$PricerrTheme_color_for_top_links = get_option('PricerrTheme_color_for_top_links');
if(!empty($PricerrTheme_color_for_top_links))
{
echo '<style> .top-links { background:#'.$PricerrTheme_color_for_top_links.' }</style>';
}
//----------------------
$PricerrTheme_home_page_layout = get_option('PricerrTheme_home_page_layout');
if(PricerrTheme_is_home()):
if($PricerrTheme_home_page_layout == "4"):
echo '<style>#content { float:right } #right-sidebar { float:left; }</style>';
endif;
if($PricerrTheme_home_page_layout == "5"):
echo '<style>#content { width:100%; } .main-how-it-works{ width:100% }</style>';
endif;
if($PricerrTheme_home_page_layout == "3"):
echo '<style>#content { width:520px } .title_holder { width:385px; } #left-sidebar{ margin-right:15px;}
.main-how-it-works { width:520px; } .i_will_mainbox{ width:240px } .how-does-it-work-btn { top:30% }</style>';
endif;
if($PricerrTheme_home_page_layout == "2"):
echo '<style>#content { width:520px } #left-sidebar{ float:right } #left-sidebar{ margin-right:15px; } .title_holder { width:385px; }
.main-how-it-works { width:520px; } .i_will_mainbox{ width:240px } .how-does-it-work-btn { top:30% }</style>';
endif;
endif;
?>
<!-- ########################################## -->
</head>
<body <?php body_class(); ?> >
<div id="my_container">
<div class="main_links">
<div class="top-links">
<?php
if(is_user_logged_in())
{
global $current_user;
get_currentuserinfo();
echo '<a href="'.PricerrTheme_my_account_link().'">';
echo sprintf(__('Welcome, %s', 'PricerrTheme'), $current_user->user_login );
echo '</a>';
}
if(current_user_can('manage_options')) {?> <?php echo __("Wp-Admin"); ?> <?php }
?>
<?php echo __("Home","PricerrTheme"); ?>
<?php echo __("Post New","PricerrTheme"); ?>
<?php if(get_option('PricerrTheme_enable_blog') != "no") { ?>
<?php echo __("Blog","PricerrTheme"); ?>
<?php } ?>
<?php
$menu_name = 'Pricerr_top_menu_header';
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menu_items = wp_get_nav_menu_items($menu->term_id);
foreach ( (array) $menu_items as $key => $menu_item ) {
$title = $menu_item->title;
$url = $menu_item->url;
if(!empty($title))
echo '' . $title . ' ';
}
}
?>
<?php
if(is_user_logged_in())
{
$uid = $current_user->ID;
$pricerrTheme_get_unread_number_messages = pricerrTheme_get_unread_number_messages($uid);
if($pricerrTheme_get_unread_number_messages > 0) $sk = ' <span class="the_one_mess">'.$pricerrTheme_get_unread_number_messages.'</span>';
else $sk = '';
?>
<?php echo sprintf(__("MyAccount %s","PricerrTheme"), $sk); ?>
<?php echo __("Log Out","PricerrTheme"); ?>
<?php
}
else
{
?>
<?php echo __("Register","PricerrTheme"); ?>
<?php echo __("Log In","PricerrTheme"); ?>
<?php } ?>
<a href="<?php bloginfo('siteurl'); ?>/?feed=rss2&post_type=job"><img src="<?php bloginfo('template_url'); ?>/images/rss_icon.png"
border="0" width="19" height="19" alt="rss icon" /></a>
</div>
</div>
<div id="header">
<div class="middle-header-bg">
<div class="middle-header" id="middle-header-id">
<?php
$logo = get_option('PricerrTheme_logo_url');
if(empty($logo)) $logo = get_bloginfo('template_url').'/images/logo.png';
?>
<img id="logo" src="<?php echo $logo; ?>" />
<!-- ######### -->
<div class="search_box_main">
<?php
global $wp_query;
$query_vars = $wp_query->query_vars;
$job_category = $query_vars['job_category'];
if(empty($job_category)) $job_category = "all";
$job_sort = $query_vars['job_sort'];
$job_tax = $query_vars['job_tax'];
//----------
if(empty($job_category)) $job_category = "all";
if(empty($page)) $page = "1";
if(empty($job_sort)) $job_sort = "auto";
if(empty($job_tax)) $job_tax = "category";
$term_search = $query_vars['term_search'];
global $default_search;
?>
<div id="suggest" >
<form method="get" action="<?php bloginfo('siteurl'); ?>"> <input type="hidden" value="1" name="search_me_now" />
<div class="search_left">
<input type="text" onfocus="this.value=''" id="big-search" name="term" autocomplete="off" onkeyup="suggest(this.value);" value="<?php if(!empty($term_search)) echo htmlspecialchars($term_search);
else echo $default_search; ?>" /></div>
<div class="search_left">
<input type="image" width="29" id="big-search-submit" name="search_me" src="<?php bloginfo('template_url') ?>/images/search_icon.png" /></div>
</form>
<div class="suggestionsBox" id="suggestions" style="z-index:999;display: none;"> <img src="<?php echo get_bloginfo('template_url');?>/images/arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="suggestionsList"> </div>
</div></div>
<!-- #############################-->
</div>
<?php uberMenu_easyIntegrate(); ?>
</div> <!-- middle-header-bg -->
</div> </div>
<div id="main">
Heres the page code were it happens to
Related
I have one issue with showing a logo in a small fixed menu, when the user scrolls down.
The logo that is shown in the main menu is OK, but the logo that is shown in the small fixed menu, when the user scrolls down, is shown in white on a white background, so it is not visible at all.
How can I show a black logo on a white background? Image of the issue below:
My site is deil.cz
classic-menu.php code:
<?php
$post_id = get_the_ID();
if(is_home() && get_option('page_for_posts') != '') {
$post_id = get_option('page_for_posts');
}else if(is_front_page() && get_option('page_on_front') != '') {
$post_id = get_option('page_on_front');
}else if(function_exists('is_shop') && is_shop() && get_option('woocommerce_shop_page_id') != '') {
$post_id = get_option('woocommerce_shop_page_id');
}elseif($wp_query && !empty($wp_query->queried_object) && !empty($wp_query->queried_object->ID)) {
$post_id = $wp_query->queried_object->ID;
}
$menu_width = get_iron_option('classic_menu_width');
$menu_align = get_iron_option('classic_menu_align');
$menu_position = get_iron_option('classic_menu_position');
$menu_effect = get_iron_option('classic_menu_effect');
$menu_logo_align = get_iron_option('classic_menu_logo_align');
$menu_is_over = get_field('classic_menu_over_content', $post_id);
if(!empty($menu_is_over)) {
if($menu_position == 'absolute absolute_before') {
$menu_position = 'absolute';
}else{
$menu_position = 'fixed';
}
}
$container_classes = array();
$container_classes[] = 'classic-menu';
$container_classes[] = $menu_effect;
$container_classes[] = $menu_position;
$menu_classes = array();
$menu_classes[] = 'menu-level-0';
$menu_classes[] = $menu_align;
$menu_classes[] = $menu_width;
if($menu_logo_align == 'pull-top')
$menu_classes[] = 'logo-pull-top';
$hotlinks_align = 'pull-right';
?>
<div class="<?php echo implode(" ", $container_classes); ?>"
data-site_url="<?php echo esc_url( home_url('/') ); ?>"
data-site_name="<?php echo esc_attr( get_bloginfo('name') ); ?>"
data-logo="<?php echo esc_url( get_iron_option('header_logo') ); ?>"
data-logo_page="<?php echo esc_url( get_field('classic_menu_logo', $post_id) ); ?>"
data-retina_logo="<?php echo esc_url( get_iron_option('retina_header_logo') ); ?>"
data-logo_mini="<?php echo esc_url( get_iron_option('classic_menu_header_logo_mini') ); ?>"
data-logo_align="<?php echo esc_attr($menu_logo_align); ?>">
<?php
echo wp_nav_menu( array(
'container' => false,
'theme_location' => 'main-menu',
'menu_class' => implode(" ", $menu_classes),
'echo' => false,
'fallback_cb' => '__return_false'
));
?>
<?php
$top_menu_enabled = (bool)get_iron_option('header_top_menu_enabled');
$menu_items = get_iron_option('header_top_menu');
$menu_icon_toggle = (int)get_iron_option('header_menu_toggle_enabled');
?>
<?php if($top_menu_enabled && !empty($menu_items)): ?>
<!-- social-networks -->
<ul class="classic-menu-hot-links <?php echo (!empty($_GET["mpos"]) ? esc_attr($_GET["mpos"]) : get_iron_option('menu_position')); ?>">
<?php foreach($menu_items as $item): ?>
<?php
if(!empty($item["menu_page_external_url"])) {
$url = $item["menu_page_external_url"];
}else{
$url = get_permalink($item["menu_page_url"]);
}
$target = $item["menu_page_url_target"];
$hide_page_name = !empty($item["menu_hide_page_title"]) ? (bool)$item["menu_hide_page_title"] : false;
?>
<li class="hotlink <?php echo $hotlinks_align;?>">
<a target="<?php echo esc_attr($target);?>" href="<?php echo esc_url($url); ?>">
<?php if(!empty($item["menu_page_icon"])): ?>
<i class="fa fa-<?php echo esc_attr($item["menu_page_icon"]); ?>" title="<?php echo esc_attr($item["menu_page_name"]); ?>"></i>
<?php endif;?>
<?php if(!$hide_page_name): ?>
<?php echo esc_html($item["menu_page_name"]); ?>
<?php endif; ?>
<?php if(function_exists('is_shop')): ?>
<?php global $woocommerce; ?>
<?php if (!empty($item["menu_page_url"]) && (get_option('woocommerce_cart_page_id') == $item["menu_page_url"]) && $woocommerce->cart->cart_contents_count > 0): ?>
<span>( <?php echo esc_html($woocommerce->cart->cart_contents_count);?> )</span>
<?php endif; ?>
<?php endif; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="clear"></div>
<?php endif; ?>
header.php code:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php echo (is_admin_bar_showing())? 'wp-admin-bar':''?> ">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
<?php
if ( ! function_exists( '_wp_render_title_tag' ) ) :
function theme_slug_render_title() {
?>
<title><?php wp_title('-', true, 'right'); ?></title>
<?php
}
add_action( 'wp_head', 'theme_slug_render_title' );
endif;?>
<?php wp_head(); ?>
</head>
<body <?php body_class("layout-wide"); ?> onload="jQuery('header').animate({'opacity': 1})">
<?php
$facebook_appid = get_iron_option('facebook_appid');
if(!empty($facebook_appid)) { ?>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo esc_html($facebook_appid);?>',
xfbml : true,
version : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<?php } ?>
<div id="overlay"></div>
<?php
$fixed_header = get_iron_option('enable_fixed_header');
$menu_type = get_iron_option('menu_type');
$menu_position = get_iron_option('classic_menu_position');
$menu_is_over = get_field('classic_menu_over_content', get_the_ID());
if(!empty($menu_is_over)) {
if($menu_position == 'absolute absolute_before') {
$menu_position = 'absolute';
}else{
$menu_position = 'fixed';
}
}
?>
<?php if($menu_type == 'push-menu'): ?>
<?php get_template_part('parts/push', 'menu'); ?>
<?php endif; ?>
<?php if($menu_type == 'classic-menu' && $menu_position != 'absolute' && $menu_position != 'absolute absolute_before'): ?>
<?php get_template_part('parts/classic', 'menu'); ?>
<?php endif; ?>
<?php if(($menu_type == 'push-menu' && empty($fixed_header)) || ($menu_type == 'classic-menu' && ($menu_position == 'fixed' || $menu_position == 'fixed_before'))) : ?>
<div id="pusher" class="menu-type-<?php echo esc_attr($menu_type);?>">
<?php endif; ?>
<?php if($menu_type == 'push-menu'): ?>
<header class="opacityzero">
<div class="menu-toggle">
<?php echo wp_remote_retrieve_body(wp_remote_request(get_template_directory_uri().'/images/ svg/menu_icon.svg')); ?>
</div>
<?php get_template_part('parts/top-menu'); ?>
<?php if( get_iron_option('header_logo') !== ''): ?>
<a href="<?php echo esc_url( home_url('/'));?>" class="site-logo">
<img id="menu-trigger" class="logo-desktop regular" src="<?php echo esc_url( get_iron_option('header_logo') ); ?>" <?php echo (get_iron_option('retina_header_logo'))? 'data-at2x="' . esc_url( get_iron_option('retina_header_logo')) .'"':''?> alt="<?php echo esc_attr( get_bloginfo('name') ); ?>">
</a>
<?php endif; ?>
</header>
<?php endif; ?>
<?php if(($menu_type == 'push-menu' && !empty($fixed_header)) || ($menu_type == 'classic-menu' && ($menu_position != 'fixed' || $menu_position == 'fixed_before'))) : ?>
<div id="pusher" class="menu-type-<?php echo esc_attr($menu_type);?>">
<?php endif; ?>
<?php if($menu_type == 'classic-menu' && ($menu_position == 'absolute' || $menu_position == 'absolute absolute_before') ): ?>
<?php get_template_part('parts/classic', 'menu'); ?>
<?php endif; ?>
<div id="wrapper">
Try filter:
When you trigger your menu's background from black to white, apply a filter to the logo:
.classic-menu-logo {filter: invert(.8) }
https://css-tricks.com/almanac/properties/f/filter/
Note: according to http://caniuse.com/#search=filter, this is not supported by IE.
1) Make a second black logo and upload it somewhere to your server
2) Remove the logo image from the navigation
3) Add this code to your style.css:
.classic-menu > ul > li.logo a {
width: 120px;
height: 30px;
background: url(/wp-content/uploads/2016/12/White2.png);
background-size: contain;
}
.classic-menu.mini > ul > li.logo a {
background-image: url(/path/to/your/black.png);
}
/path/to/your/ is of course only an example, you must adjust it to where you have uploaded the dark logo.
I need help moving the box with the size selection and add to cart etc.. from the bottom to the top right, under the product title and short description.
The product page is at http://184.178.186.166/scarlet/trunk-lynyrd-skynyrd-tee-1571.html
I can't seem to find what css to edit.
This is the template file:
<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license#magento.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magento.com for more information.
*
* #category design
* #package rwd_default
* #copyright Copyright (c) 2006-2014 X.commerce, Inc. (http://www.magento.com)
* #license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
*/
/**
* Product view template
*
* #see Mage_Catalog_Block_Product_View
* #see Mage_Review_Block_Product_View
*/
?>
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div>
<div class="product-view">
<div class="product-essential">
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="product-img-box">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<?php echo $this->getChildHtml('media') ?>
</div>
<div class="product-shop">
<div class="product-name">
<span class="h1"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span>
</div>
<div class="price-info">
<?php echo $this->getPriceHtml($_product); ?>
<?php echo $this->getChildHtml('bundle_prices') ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
<div class="extra-info">
<?php echo $this->getReviewsSummaryHtml($_product, 'default', false)?>
<?php echo $this->getChildHtml('product_type_availability'); ?>
</div>
<?php echo $this->getChildHtml('alert_urls') ?>
<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
</div>
<?php endif;?>
<?php echo $this->getChildHtml('other');?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
</div>
<div class="add-to-cart-wrapper">
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
<span class="or"><?php echo $this->__('OR') ?></span>
<?php endif; ?>
<?php endif; ?>
<?php echo $this->getChildHtml('addto') ?>
<?php echo $this->getChildHtml('sharing') ?>
</div>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
<?php echo $this->getChildHtml('sharing') ?>
</div>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('related_products') ?>
<div class="clearer"></div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
</form>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
</div>
<div class="product-collateral toggle-content tabs">
<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
<dl id="collateral-tabs" class="collateral-tabs">
<?php foreach ($detailedInfoGroup as $alias => $html):?>
<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
<dd class="tab-container">
<div class="tab-content"><?php echo $html ?></div>
</dd>
<?php endforeach;?>
</dl>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('upsell_products') ?>
<?php echo $this->getChildHtml('product_additional_data') ?>
</div>
Looks like you need both CSS and template changes. "Description" and "Additional info" are outside the div that contains the image and short description.
A quick fix might be these changes:
.product-options {
width: 49%;
margin: 0px 10px 0;
padding: 10px 15px 15px;
border: 1px solid #cccccc;
/* clear: both; REMOVED */
position: relative;
float: right; /*edited : new */
}
.product-view .add-to-cart:after {
clear: none !important;
}
.product-view .add-to-cart {
border-bottom: 0px solid #cccccc;
}
.product-view .add-to-links {
clear: none;
margin-top: 10px;
float: right;
margin-right: 0px;
}
.product-view .sharing-links {
float: right;
margin-top: 10px;
margin-right: 10px;
}
.product-shop {
margin-top: 10px;
margin-right: 10px;
}
then you can get it to look like this:
I write the second piece of code
<?php
$subcategories = get_categories('&child_of=1&hide_empty=0'); // List subcategories of category '4' (even the ones with no posts in them)
foreach ($subcategories as $subcategory) {
$counter = 0;
$counter++;
?>
<?php if ($subcategory->parent == 1) {
if ($counter%2) {
echo '<div class="rowcat">';
}
?>
<!-- begin catblock -->
<div class="catblock">
<?php echo '<img src="'. z_taxonomy_image_url($subcategory->term_id) .'" />'; ?>
<?php echo sprintf('%s', get_category_link($subcategory->term_id), apply_filters('get_term', $subcategory->name));?>
</div>
<!-- end catblock -->
<?php
if ($counter%2) {
echo '</div>';
}
?>
<?php } ?>
<?php } ?>
For now each <div class="catblock"></div> wraps by <div class="rowcat"> but I want to make that each two blocks <div class="rowcat"> wrapped by <div class="rowcat">
So something I do wrong, what's this?
Move your $counter++ to the end of the loop:
<?php
$subcategories = get_categories('&child_of=1&hide_empty=0'); // List subcategories of category '4' (even the ones with no posts in them)
foreach ($subcategories as $subcategory) {
$counter = 0;
?>
<?php if ($subcategory->parent == 1) {
if ($counter%2) {
echo '<div class="rowcat">';
}
?>
<!-- begin catblock -->
<div class="catblock">
<?php echo '<img src="'. z_taxonomy_image_url($subcategory->term_id) .'" />'; ?>
<?php echo sprintf('%s', get_category_link($subcategory->term_id), apply_filters('get_term', $subcategory->name));?>
</div>
<!-- end catblock -->
<?php
if ($counter%2) {
echo '</div>';
}
}
$counter++;
} ?>
I found the right solution
<?php
$subcategories = get_categories('&child_of=1&hide_empty=0'); // List subcategories of category '4' (even the ones with no posts in them)
$counter = 0;
foreach ($subcategories as $subcategory) { ?>
<?php if ($subcategory->parent == 1) {
if ($counter%2 == 0) {
echo $counter > 0 ? "</div>" : "";
echo '<div class="rowcat">';
}
?>
<!-- begin catblock -->
<div class="catblock">
<?php echo '<img src="'. z_taxonomy_image_url($subcategory->term_id) .'" />'; ?>
<?php echo sprintf('%s', get_category_link($subcategory->term_id), apply_filters('get_term', $subcategory->name));?>
</div>
<!-- end catblock -->
<?php
}
$counter++;
} ?>
I have a lot of small sections generate via php. They are different sizes. I want though that there is a text button on the bottom that will take up the full width.
I first had
display: block;
float: left;
But it was to much to the left, I then tried:
display: inline-block
But it was too small and there was extra space on either side. Here is a screenshot of it with the extra space. Any suggestions? I am working on the buy now button.
PHP Generate code
global $wpdb;
$cat= $_POST['cat'];
if($cat=='All')
{
$items = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_items ORDER BY item_id ASC');
}else
{
$items = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_items WHERE item_category="'.$cat.'" ORDER BY item_id ASC');
}
$output='';
$k = 1;
foreach ($items as $item ){
$output.='<div class="afp-single-item">
<img alt="" class="img-link-initial" src="' . $item->item_thumbnail . '">
<div class="item-overlay" style="display: none;">
<img src="' . $item->item_thumbnail . '" width="101%">
<div class="wishlist-details">';
if($item->item_title != null) { $output.='<h2>' . $item->item_title . '</h2>'; }
$output.='
<span>Share This</span>
</div>
';
if($item->item_link != null) { $output.='<a target="_blank" class="buynow" href="' . $item->item_link . '">Buy Now</a>
'; }
$output.='
</div>
</div>';
$k++;
}
$output.='</div><div class="afp-clear"></div>';
echo $output;
Template code:
<?php
/**
* Template Name: Shop Page Template
*
*/
get_header(); ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=54330784694";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<link rel='stylesheet' type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/isotop.css" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.isotope.js" type="text/javascript"></script>
<div id="show_wrap">
<div class="section-header" >
<h2>SHOP</h2>
</div>
<?php
global $wpdb;
//Get The Plugin Options
$afpOptions = get_option('afpOptions');
//SQL Queries
switch( $afpOptions['sort_items'] ){
case 'title':
$orderby = 'item_title ASC';
break;
case 'date':
$orderby = 'item_date DESC';
break;
case 'client':
$orderby = 'item_title ASC';
break;
case 'id':
$orderby = 'item_id ASC';
break;
}
$items = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_items ORDER BY ' . $orderby);
if( $afpOptions['sort_cat'] == 'on' ){
$orderby = ' ORDER BY cat_name';
} else {
$orderby = '';
}
$cats = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_categories' . $orderby);
?>
<div class="clear"></div>
<div class="portfolioFilter">
<?php
//AFP Main Container
echo 'All';
foreach ( $cats as $cat ){
echo '' . $cat->cat_name . '';
}
?>
</div>
<div class="portfolioContainer" style="padding-bottom:250px;">
<?php foreach ($items as $item ){ ?>
<div class="<?php echo ereg_replace("[^A-Za-z0-9]", "", $item->item_category); ?>">
<img alt="" class="img-link-initial" src="<?php echo $item->item_thumbnail; ?>">
<div class="item-overlay" style="display: none;">
<img src="<?php echo $item->item_thumbnail; ?>" width="101%">
<div class="wishlist-details">
<?php if($item->item_title != null) {?>
<h2><?php echo $item->item_title; ?></h2>
<?php } ?>
<p class="share_this">Share This</p>
<div class="shop_bottom_border_0ld"> </div>
<p class="social_share_box">
<div class="share_icon_only fleft"><div class="fb-share-button" data-href="<?php echo $item->item_link; ?>" data-type="button"></div></div>
<div class="share_icon_only fleft"><a target="_blank" href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $item->item_link; ?>" data-count="none">Tweet</a></div>
<div class="share_icon_only fleft" style="width:40px;">
<a target="_blank" href="http://www.pinterest.com/pin/create/button/?url='<?php echo $item->item_link;?>&media=<?php echo $item->item_thumbnail; ?>&description=<?php echo $item->item_title; ?>"
data-pin-do="buttonPin"
data-pin-config="above">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
</div>
<div class="clear"></div>
</p><br />
<?php if($item->item_link != null) { ?>
<p><a target="_blank" class="buynow" href="<?php echo $item->item_link; ?>">Buy Now</a></p>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="afp-clear clear20"></div>
</div>
<script type="text/javascript">
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
<?php get_footer(); ?>
And the CSS
.buynow {
background-color: #F5D2D5;
color: #FFFFFF;
display: block;
float: left;
font-size: 12px;
font-weight: 400;
height: 42px;
letter-spacing: 0.3em;
line-height: 42px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 230px;
}
.shop_bottom_border{
border-bottom:1px solid #CCC;
margin-bottom:5px;
}
How to set the_post_thumbnail so that it doesn't use an array for its size, but instead can be set with a 100% width and auto height:
<?php $ht_featured_img = get_option('ht_featured_img');
if ($ht_featured_img == "true") { ?>
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { /* if post has a thumbnail */ ?>
<div class="post-image">
<?php the_post_thumbnail( array(1215,9999) ); ?>
</div><!--post-image-->
<?php } ?>
<?php } ?>
<?php $ht_featured_img = get_option('ht_featured_img'); if ($ht_featured_img == "true") { ?>
<?php if ( ( function_exists('has_post_thumbnail') ) && ( has_post_thumbnail() ) ) {
$post_thumbnail_id = get_post_thumbnail_id();
$post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );
?>
<div class="post-image">
<img title="image title" alt="thumb image" class="wp-post-image" src="<?php echo $post_thumbnail_url; ?>" style="width:100%; height:auto;">
</div>
<?php } ?>
<?php } ?>
<? if( has_post_thumbnail( $post_id ) ): ?>
<div class="post-image">
<img title="image title" alt="thumb image" class="wp-post-image"
src="<?=wp_get_attachment_url( get_post_thumbnail_id() ); ?>" style="width:100%; height:auto;">
</div>
<? endif; ?>
You could also just use
<img src="<?php echo get_the_post_thumbnail_url (); ?>" style="width:100%; height:auto;">