I'm using child theme of default theme in WP and I have changed background image (in wp-admin)... it's generated with wp_head(); function in header.php... output source code looks like this:
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #fffffe; background-image: url('http://example.com/wp-content/uploads/header.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>
I need to modify url of the image (some hook, functions.php modification or anything else) for some reason but I am not able to find how to do this. I've searched all theme files with no resault :(
anyone know, how to do it (of course, without modifying wp core files - just theme modification or plugin)
To be honest, I'm not a fan of WordPress adding unadjustable functionality to any theme. This is how I solved it. I removed the custom-background class from the body tag. Hopefully it's still useful to someone.
function disable_custom_background_css($classes)
{
$key = array_search('custom-background', $classes, true);
if($key !== false)
unset($classes[$key]);
return $classes;
}
And before calling body_class(), preferably in functions.php
add_filter('body_class', 'disable_custom_background_css');
This prevents the script in wp_head from adding this particular style to the body tag. Now you can decide how to implement a background image.
The code in the WP tuts article didn't work for me, but I managed to make some modifications to get it working.
global $wp_version;
if ( ! function_exists( 'change_custom_background_cb' ) ) :
function change_custom_background_cb() {
$background = get_background_image();
$color = get_background_color();
if ( ! $background && ! $color )
return;
$style = $color ? "background-color: #$color;" : '';
if ( $background ) {
$image = " background-image: url('$background');";
$repeat = get_theme_mod( 'background_repeat', 'repeat' );
if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
$repeat = 'repeat';
$repeat = " background-repeat: $repeat;";
$position = get_theme_mod( 'background_position_x', 'left' );
if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
$position = 'left';
$position = " background-position: top $position;";
$attachment = get_theme_mod( 'background_attachment', 'scroll' );
if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
$attachment = 'scroll';
$attachment = " background-attachment: $attachment;";
$style .= $image . $repeat . $position . $attachment;
}
?>
<style type="text/css" id="custom-background-css">
.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php
}
if ( version_compare( $wp_version, '3.4', '>=' ) ) {
add_theme_support( 'custom-background', array( 'wp-head-callback' => 'change_custom_background_cb','default-color' => 'fff' ) );
}
else {
add_custom_background('change_custom_background_cb');
}
endif;
Here's eexactly what I have been looking for: http://wp.tutsplus.com/articles/tips-articles/modifying-custom-background-feature-for-any-html-element-you-want/
Related
I have a Wordpress problem that I can't fix....
Woocommerce is using a sidebar with product filters.
I'd simply like to hide the sidebar + filters on Woocommerce parent pages.
I first tried by adding a class which I could hide the sidebar content with css, like this :
add_filter( 'fusion_sidebar_1_class', 'usl_wc_product_cats_css_body_class' );
function usl_wc_product_cats_css_body_class( $classes )
{
if( is_tax( 'product_cat' ) ) {
$cat = get_queried_object();
if( 0 == $cat->parent ) $classes[] = 'usl-parent';
}
return $classes;
}
But this obviously leaves the main content at 80% or so.
So I'm now trying to remove the sidebar instead using a mix of the above and some example code from the Avada help pages. Code is below but totally doesn't work! Can anyone please help?
function remove_woo_commerce_sidebar() {
global $avada_woocommerce;
{
if( is_tax( 'product_cat' ) )
{
$cat = get_queried_object();
if( 0 == $cat->parent )
remove_action( 'woocommerce_sidebar', array( $avada_woocommerce, 'add_sidebar' ), 10 );
}
}
add_action( 'after_setup_theme', 'remove_woo_commerce_sidebar' );
Can't you just do this through CSS? Just change the selector to match the page type you want to affect
.woocommerce-page #content .single_wrap {
float: none;
width: 100%;
}
.woocommerce-page #sidebar {
display: none;
}
Couldn't find a neat way to unload the sidebar so added an extra body class so I could target both the main content & sidebar with this :
add_filter( 'body_class','usl_body_classes' );
function usl_body_classes( $classes )
{
if( is_tax( 'product_cat' ) ) {
$cat = get_queried_object();
if( 0 == $cat->parent ) $classes[] = 'usl_full_woo_css';
}
return $classes;
}
I've been trying to work on this little thingy for almost a full day so any help would be highly appreciated
You can see how the breadcrumbs looks like in here:
https://www.bitcoinhoy.co/criptomonedas/ethereum/
I managed to find the relevant php file and here's the code:
enter code here
<!-- ** Breadcrumb ** -->
<?php
if( !empty( $global_breadcrumb ) ) {
if(empty($settings)) { $settings['enable-sub-title'] = true; }
if( isset( $settings['enable-sub-title'] ) && $settings['enable-sub-title'] ) {
$breadcrumbs = array();
$bstyle = digibit_cs_get_option( 'breadcrumb-style', 'default' );
$separator = '<span class="'.digibit_cs_get_option( 'breadcrumb-delimiter', 'fa default' ).'"></span>';
if( is_singular('post') ){
$cat = get_the_category();
$cat = $cat[0];
$breadcrumbs[] = get_category_parents( $cat, true, $separator );
}
$breadcrumbs[] = the_title( '<span class="current">', '</span>', false );
$bcsettings = isset( $settings['breadcrumb_background'] ) ? $settings['breadcrumb_background'] : array();
$style = digibit_breadcrumb_css( $bcsettings );
digibit_breadcrumb_output ( the_title( '<h1>', '</h1>',false ), $breadcrumbs, $bstyle, $style );
}
}
?><!-- ** Breadcrumb End ** -->
Any idea how can I modify the "home" text to something else?
It looks like Digibit is a premium theme. Modifying a theme file may not be a great idea because if they update the theme, it will break the modifications you make.
What you can do is add this in your CSS (perhaps in Customize > Additional CSS):
.breadcrumb a:first-child {
font-size: 0;
}
.breadcrumb a:first-child:after {
content: "Something Else";
font-size: 14px;
}
I have a problem that drives me mad, and can't find a solution to it in the documentation...
I want to hook in to Wordpress' post_gallery function to add a Class to the dl element that wraps the WP generated gallery individual images. By this I want to have the option to have full width images that can be controlled in the Attachments window of WP Media via ACF switch
if ( get_field('fullwidth') == 1 ){
$classname = 'fullwidth';
} else {
$classname = "";
}
Also setting the img "src" to the Large for these fullwidth images would come handy, so the page-load is not too slow.
Do I need to rewrite the whole gallery generating code from here?
https://core.trac.wordpress.org/browser/trunk/src/wp-includes/media.php
Can it be done via this method at all, or should I somehow try to hook in to the_content? But also for that method, I didn't find any info in regard how galleries are generated...
to add a Class to the dl element that wraps the WP generated gallery individual images
Instead of that, why don't you — using the Text/HTML editor — add the gallery like this:
<div class="fullwidth">
[gallery ... /]
</div>
(the three dots indicates the Shortcode parameters such as ids, size, and link)
And write some CSS code similar to:
.fullwidth .gallery-item {
/* Add styles for the DL (or FIGURE for HTML5-supported themes) element that wraps the gallery image and caption. */
}
.fullwidth .gallery-icon {
/* Add styles for the DT (or DIV for HTML5-supported themes) element that wraps the gallery image. */
}
.fullwidth .gallery-caption {
/* Add styles for the DD (or FIGCAPTION for HTML5-supported themes) element that wraps the gallery caption. */
}
[EDIT] Below is a custom Shortcode; used the exact same way you'd use the default [gallery] Shortcode.
Add these to the theme's functions.php file:
/**
* #param array $attr
* #param WP_Post $attachment
*/
function gallery_shortcode2_image_attributes( $attr, $attachment ) {
// Name of the custom field. (ACF)
$field_name = 'fullwidth';
if ( get_field( $field_name, $attachment->ID ) ) {
$attr['data-gallery-layout'] = 'full-width';
}
return $attr;
}
add_shortcode( 'gallery2', 'gallery_shortcode2' );
function gallery_shortcode2( $attr ) {
$atts = shortcode_atts( array(
'itemtag' => 'figure', // I'm assuming we'll always be using HTML5-supported themes..
'fwclass' => 'fullwidth', // The CSS class applied to items with, well, full-width layout.
'size' => 'medium_large', // You may change the default value; to "large", "custom", etc.
), $attr );
// Don't modify anything below unless you're 100% sure of what you're doing. =)
$itemtag = tag_escape( $atts['itemtag'] );
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) ) {
$itemtag = 'dl';
}
add_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );
$output = gallery_shortcode( array_merge( $attr, $atts ) );
$output2 = '';
remove_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );
$_tag = '<' . preg_quote( $itemtag ) . ' class=\'gallery-item\'>';
$arr = preg_split( "/($_tag)/", $output, -1, PREG_SPLIT_DELIM_CAPTURE );
for ( $i = 0, $j = 1; $i < count( $arr ); $i++, $j++ ) {
if ( $_tag === $arr[ $i ] && isset( $arr[ $j ] ) ) {
$class = 'gallery-item';
if ( preg_match( '/<img (.*?) data-gallery-layout="full-width"/', $arr[ $j ] ) ) {
$class .= ' ' . $atts['fwclass'];
}
$output2 .= '<' . $itemtag . ' class=\'' . esc_attr( $class ) . '\'>';
} else {
$output2 .= $arr[ $i ];
}
}
unset( $output, $arr );
return $output2;
}
And use [gallery2] instead of [gallery]; same arguments (e.g. ids and size), but with one extra argument for [gallery2], which is fwclass. (Refer to the gallery_shortcode() function for details on that argument.)
Hopefully [gallery2] works for you, like it did for me.
NOTE: Use [gallery2] only if you want to add a custom CSS class to the individual gallery item element (i.e. .gallery-item). Otherwise, use the default Shortcode — [gallery].
In Woocommerce 3.0 the single variation add to cart button is wrapped in a container div:
<div class="woocommerce-variation-add-to-cart variations_button">
// do_actions for before and after add_to_cart_quantity
</div>
I'd like to filter the html to remove the container div without overriding the variation-add-to-cart-button.php template file and without jquery/javascript.
Any help would be great!
Please try the following code. I haven't tested it but it supposed to work. Please try this on your dev environment first.
add_action( 'woocommerce_before_template_part', function( $template_name ) {
if ( 'single-product/add-to-cart/variation-add-to-cart-button.php' === $template_name ) {
ob_start();
}
} );
add_action( 'woocommerce_after_template_part', function( $template_name ) {
if ( 'single-product/add-to-cart/variation-add-to-cart-button.php' === $template_name ) {
$content = ob_get_clean();
$content = str_replace( '<div class="woocommerce-variation-add-to-cart variations_button">', '', $content );
$content = str_replace( '</div>', '', $content );
echo $content;
}
} );
i'm coding a Wordpress Theme that has custom backgrounds, but in the WP docs there isn't nothing about the functions to retrieve the values for each background parameter (image, color, position, etc.) I figured out only get_background_color and get_background_image.
This is the code for supporting custom backgrounds:
$custom_background_support = array(
'default-color' => 'FFF',
'default-image' => '',
'wp-head-callback' => 'custom_background_cb'
);
if ( is_wp_version( '3.4' ) )
add_theme_support( 'custom-background', $custom_background_support );
else
add_custom_background( $custom_background_support );
And this is the callback:
function academia_custom_background_cb()
{
?>
<style type="text/css">
body{
background-color: #<?=get_background_color();?> !important;
background-image: url('<?=get_background_image();?>');
background-position: ...
background-repeat: ...
...
}</style>
<?php
}
EDIT: these are the values I need to get. This screenshot is from Appearance -> Background.
Old question, but it came up in my google search for the same info. Finishing off Krike's answer, it is indeed get_theme_mod()
You can see it at work in the default wp-head-callback.
/**
* Default custom background callback.
*
* #since 3.0.0
* #access protected
*/
function _custom_background_cb() {
// $background is the saved custom image, or the default image.
$background = set_url_scheme( get_background_image() );
// $color is the saved custom color.
// A default has to be specified in style.css. It will not be printed here.
$color = get_theme_mod( 'background_color' );
if ( ! $background && ! $color )
return;
$style = $color ? "background-color: #$color;" : '';
if ( $background ) {
$image = " background-image: url('$background');";
$repeat = get_theme_mod( 'background_repeat', 'repeat' );
if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
$repeat = 'repeat';
$repeat = " background-repeat: $repeat;";
$position = get_theme_mod( 'background_position_x', 'left' );
if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
$position = 'left';
$position = " background-position: top $position;";
$attachment = get_theme_mod( 'background_attachment', 'scroll' );
if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
$attachment = 'scroll';
$attachment = " background-attachment: $attachment;";
$style .= $image . $repeat . $position . $attachment;
}
?>
<style type="text/css" id="custom-background-css">
body.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php
}
So you'd get the repeat, position and attachment like so:
$repeat = get_theme_mod( 'background_repeat', 'repeat' );
$position = get_theme_mod( 'background_position_x', 'left' );
$attachment = get_theme_mod( 'background_attachment', 'scroll' );
I assume the second parameter is the default.
I'm not 100% sure but I think you are looking for get_theme_mod() -> http://codex.wordpress.org/Function_Reference/get_theme_mod