I'm trying to wrap my head around the wp_add_inline_style function in WordPress.
I've managed to output my customiser CSS using this function and it works perfectly.
Here's how I am using the wp_add_inline_style function to output the customiser styles;
function theme_custom_css() {
$header_height = get_theme_mod( 'header_height', '96' );
$output .= '.site-header { height: ' . esc_attr( $header_height ) . 'px; }';
if ( ! empty( $output ) ) {
wp_add_inline_style( 'custom-style', $output );
}
}
add_action( 'wp_enqueue_scripts', 'theme_custom_css' );
This works exactly as expected. It adds a style tag to the head below the style.css file with all the custom css inside. Great, that's exactly what I wanted.
However, if I have another file where there is CSS that can be changed by the user and I want to add the changed CSS to the style tag printed by the wp_add_inline_style function. This doesn't work. Here's the code where I'm attempting this.
function theme_slider_css() {
if ( get_field( 'slider_padding_top' ) ) {
$slider_css .= '.slider-inner-wrap { padding-top: ' . get_field( 'slider_padding_top' ) . ';px }';
}
if ( ! empty( $slider_css ) ) {
wp_add_inline_style( 'custom-style', $slider_css );
}
}
add_action( 'wp_enqueue_scripts', 'theme_slider_css' );
The theme_slider_css function is being completely ignored.
Am I completely missing the point here? Is there anything obvious I am missing?
I would be happy to have two separate style tags printed in the head but I cannot achieve that either?
Hopefully I've explained this well, if not, please ask.
Any help will be appreciated.
Thank you in advance.
The last ' is missing.
Change it from:
"$output .= '.site-header { height: ' . esc_attr( $header_height ) . 'px; };"
to:
"$output .= '.site-header { height: ' . esc_attr( $header_height ) . 'px; }';"
Related
I've used a snippet to display the weight of jewellery in shop page of woocommerce. I've inserted the snippet in function.php file. But its displaying the weight below add to cart button. It must be displayed above the button.
here is the snippet
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_show_product_dimensions_loop', 20 );
function bbloomer_show_product_dimensions_loop() {
global $product;
$dimensions = $product->get_dimensions();
if ( ! empty( $dimensions ) ) {
echo '<div class="dimensions">';
echo '<br><b>Weight:</b> ' . $product->get_weight() . get_option( 'woocommerce_weight_unit' );
echo '</div>';
}
}
the weight must be printed above the add to cart button, what i've to change here.
add_filter( 'woocommerce_loop_add_to_cart_link', 'bbloomer_show_product_dimensions_loop', 10, 2 );
function bbloomer_show_product_dimensions_loop( $html, $product ) {
$weight = '';
$dimensions = $product->get_dimensions();
if ( ! empty( $dimensions ) ) {
$weight .= '<div class="dimensions">';
$weight .= '<br><b>Weight:</b> ' . $product->get_weight() .
esc_html( get_option( 'woocommerce_weight_unit' ) );
$weight .= '</div>';
}
return $weight . $html;
}
You have to use the filter tag woocommerce_loop_add_to_cart_link and prepend your weight component HTML like this. Since it's filter hook no need to echo the output just return the output HTML the tag woocommerce_loop_add_to_cart_link will handle that.
Based on my own blog tutorial: How To Add Quantity Input In Shop Page
Visit source code if you want to learn how this filter woocommerce_loop_add_to_cart_link works internally.
You can take the help of flex css for example:
.itemxyz{display: flex;flex-direction: column;}
.itemxyz .desc{order: 1;}
.itemxyz .price{order: 2;}
.itemxyz .btn{ order: 4;}
.itemxyz .weight{ order: 3;}
I'm trying to figure a way to use the home icon from FontAwesome in my breadcrumb trail for WooCommerce but it just shows up as a blank. Basically, I tweaked the code Woo provides to replace breadcrumb text with other text, but I guess it doesn't like HTML tags. This is my code.
add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
$defaults['home'] = '<i class="fas fa-home"></i>';
return $defaults;
}
The filter only allows you to change the text without adding HTML tags as the home delimiter is wrapped in esc_html(). Here's one solution. Change the filter to the following:
add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
$defaults['before'] = '<span class="nmr-crumb">';
$defaults['after'] = '</span>';
$defaults['home'] = ' ';
return $defaults;
}
Use a space inside the single quotes on the line with $defaults['home'] = ' ';
Next, you'll need to add the following to your theme style.css:
.woocommerce-breadcrumb .nmr-crumb:first-child a {
text-decoration: none;
}
.woocommerce-breadcrumb .nmr-crumb:first-child a::before {
font-family: FontAwesome;
content: '\f015';
}
Credit: https://wordpress.org/support/topic/swap-home-for-icon/
A less elegant solution would be to edit the breadcrumbs template file. You'll need to use a child theme and have an existing breadcrumbs template file under:
/woocommerce/global/breadcrumb.php
where / is your child theme folder. Inside breadcrumb.php find the following if statement:
if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
echo '' . esc_html( $crumb[0] ) . '';
} else {
echo esc_html( $crumb[0] );
}
change the above if statement to the following:
if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
if (0==$key){
echo '<i class="fas fa-home"></i>';
}else{
echo '' . esc_html( $crumb[0] ) . '';
}
}else{
echo esc_html($crumb[0]);
}
Here's a guide on how to edit WooCommerce template files.
I am using a content block plugin which allows me to use content frequently as a shortcode. The content editor for the shortcode content blocks uses Visual Composer. When I use a created shortcode for a block on a page, most everything works fine except any custom css that is defined in the visual composer shortcode.
For example:
[vc_column_inner width="1/3" css=".vc_custom_1463660338922{background-image: url(/circlebg.png) !important;}”]
The custom css class is defined in the div created in the fronted source, but the definition does not appear in the header. This does work if I do this same process on the page itself without using a shortcode for the content. I believe this has something to do with functions.php. I've changed this function to the following (in bold), but still nothing is recognized :
if(!function_exists('qode_visual_composer_custom_shortcodce_css')){
function qode_visual_composer_custom_shortcodce_css(){
if(qode_visual_composer_installed()){
if(is_page() || is_single() || is_singular('portfolio_page') || is_singular('content_block')){
$shortcodes_custom_css = get_post_meta( qode_get_page_id(), '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
echo '<style type="text/css" data-type="vc_shortcodes-custom-css-'.qode_get_page_id().'">';
echo $shortcodes_custom_css;
echo '</style>';
}
$post_custom_css = get_post_meta( qode_get_page_id(), '_wpb_post_custom_css', true );
if ( ! empty( $post_custom_css ) ) {
echo '<style type="text/css" data-type="vc_custom-css-'.qode_get_page_id().'">';
echo $post_custom_css;
echo '</style>';
}
}
}
}
add_action('qode_visual_composer_custom_shortcodce_css', 'qode_visual_composer_custom_shortcodce_css');
}
Anyone come across this before?
Thank you!
I solved this using the parseShortcodeCustomCss method of the visual_composer class, it's the one used by Visual Composer itself to include the styles in the header or footer.
My solution:
$shortcodeContent = '[vc_column_inner width="1/3" css=".vc_custom_1463660338922{background-image:url(/circlebg.png)!important;}”]';
$shortcodes_custom_css = visual_composer()->parseShortcodesCustomCss( $shortcodeContent );
if ( ! empty( $shortcodes_custom_css ) ) {
$shortcodes_custom_css = strip_tags( $shortcodes_custom_css );
$output .= '<style type="text/css" data-type="vc_shortcodes-custom-css">';
$output .= $shortcodes_custom_css;
$output .= '</style>';
echo $output;
}
echo apply_filters( 'the_content', $shortcodeContent );
You can try this code:
Vc_Manager::getInstance()->vc()->addShortcodesCustomCss($page_id);
$the_post = get_post($page_id);
echo apply_filters('the_content', $the_post->post_content);
It works for me
I already have a wordpress website with many images in posts. I'm creating a new theme using bootstrap but it seems like the images are crossing the container area.
Bootstrap provides a built-in class :
class="img-responsive"
but this code needs to be inserted in all the <img> tags which is a lot of work.
What is the other way to make the images responsive?
Also, this code doesn't work -
img
{
border: 0 none;
max-width: 100%;
vertical-align: middle;
}
It just squeezes the image inwards.
There is a gist showing how to do this at https://gist.github.com/mkdizajn/7352469
The technique is to add the following to your functions.php (from gist):
function bootstrap_responsive_images( $html ){
$classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<img.*? class="/', $html) ) {
$html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
} else {
$html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
}
// remove dimensions from images,, does not need it!
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 );
You should consider creating a child theme to make this modification if you are using a stock theme.
I have reviewed the other posts similar to my questions but I must be missing a something.
I have added excerpts to my page like so:
[title size="2"]LATEST ARTICLES[/title]
[recent_posts columns="4" number_posts="12" cat_id="" thumbnail="yes" excerpt="yes" title="yes"] [/recent_posts]
I am trying to do two things
set the length of the excerpt
make it link to the article (not necessarily a read more link the dots are fine)
I have tried to add the excerpt manually to the excerpt area (screen options) for the page but that is not overwritting what Wordpress is pulling from.
in my function.php file I am using
add_filter('the_excerpt', 'do_shortcode');
which works, but when I tried to add additional code below it does not do anything. Do I need to modify anothe rphp file to get this to register?
`enter code here`function new_excerpt_more($more) {
return '' . ' read on ..' . '';
}
add_filter('excerpt_more', 'new_excerpt_more');
function new_excerpt_length($length) {
return 46;
}
add_filter('excerpt_length', 'new_excerpt_length');
I have achieved your desired result w/ the following code (from the codex):
function custom_excerpt_length( $length ) {
return 46;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
function new_excerpt_more( $more ) {
return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read More', 'your-text-domain') . '</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );