I'm trying to have a feature where users can change the background image of certain divs via the theme customizer. I've tried many different ways but can't seem to get it to work.
As of right now I have it to where I'm able to change the background of one div but not able to get more than that one.
Function.php file
function meraki_custom_background_cb() {
ob_start();
_custom_background_cb(); // Default handler
$style = ob_get_clean();
$style = str_replace( 'body.custom-background', '#featured-home-image', $style );
echo $style;
}
add_theme_support( 'custom-background',
array(
'wp-head-callback' => 'meraki_custom_background_cb',
'default-color' => '000000',
'default-image' => '%1$s/images/background.jpg',
)
);
header.php file
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #bdd96e; }
</style>
I'm pretty sure what this is doing is just replacing the string 'body.custom-background' with the ID #featured-homeimage', which works great, but only for one div.
Is there a way to make this possible for multiple divs? Thanks in advance for your help.
Related
I want to add a meta tag for my site description inside the head area of a specific page, before the body tag opens. The site is built with WordPress & Elementor.
I don't want to add it globally like in the theme>>header option here: https://wordpress.org/support/topic/how-to-inset-code-the-closing-tag/
I'm looking for another solution besides editing the header.php file in a way that applies for all the theme pages. If I can do so in this file, and control which pages/posts the added meta tag will apply to, so that will be good.
What is my solution?
EDIT: This can be the relevant code at functions.php
function envo_shop_setup() {
// Theme lang.
load_theme_textdomain('envo-shop', get_template_directory() . '/languages');
// Add Title Tag Support.
add_theme_support('title-tag');
// Register Menus.
register_nav_menus(
array(
'main_menu' => esc_html__('Main Menu', 'envo-shop'),
'main_menu_right' => esc_html__('Main Menu Right', 'envo-shop'),
'main_menu_cats' => esc_html__('Categories Menu', 'envo-shop'),
)
);
// some templete conditions...
endif;
function envo_shop_pingback_header() {
if (is_singular() && pings_open()) {
printf('<link rel="pingback" href="%s">' . "\n", esc_url(get_bloginfo('pingback_url')));
}
}
add_action('wp_head', 'envo_shop_pingback_header');
If the theme you are using is nothing really weird and special you should have a call like this:
<?php wp_head(); ?>
before the tag. If that's the case you can use:
add_action( 'wp_head',function (){
// you can pass Page ID, title, slug, or array of such to check against. Default empty.
if(is_page("mypage")){
}
} );
This would put what you need only where you want them to appear using the conditionals tags (see https://codex.wordpress.org/Conditional_Tags)
I am trying to apply styles to all images that are inserted into my wp_editor() textarea using PHP. I have tried the following but had no success:
<?php
$settings = array(
'style_formats' => array(
array(
'block' => 'img',
'styles' => array(
'width' => '100%'
)
)
)
);
echo wp_editor('', 'email-content', $settings);
?>
What is the correct syntax to do this?
I have used the following docs to try complete this task:
https://developer.wordpress.org/reference/functions/wp_editor/
https://www.tiny.cloud/docs/configure/content-formatting/
If you only want to make all images 100%, then it might be more appropriate to just do it in your CSS stylesheet.
If you need to customise the WP Editor (which uses the TinyMCE editor), there are a few ways to do it, depending on what you want. The description and the code in your question don't match so I've given both options below:
1. Add a "Custom Styles" dropdown to the editor toolbar
The code in your question is what you would use to add a custom styles dropdown, similar to the default styles (Paragraph, Heading 1 etc). You can do this using the following code to your functions.php.
This adds a dropdown called "Formats" with 2 options - one to add the style directly on the image and one that adds a custom class to the image (which is preferable because it gives you more flexibility):
1. Set up the custom styles in the TinyMCE Editor settings
function my_mce_insert_custom_styles( $settings) {
// Create your array of custom styles to add
$style_formats = array(
// 1. OPTION TO ADD STYLE DIRECTLY TO THE IMAGE
array(
'title' => '100% Width Image Style',
'selector' => 'img',
'styles' => array( 'width' => '100%' )
),
// 2. OPTION TO ADD A CLASS TO THE IMAGE
array(
'title' => 'Add My Class to Image',
'selector' => 'img',
'classes' => 'my_image_class',
)
);
// Add the array the 'style_formats' setting
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_insert_custom_styles' );
// 2. Add custom styles to the 2nd toolbar of your Wordpress editor
function my_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');
Now will have an extra "Formats" drop down in the 2nd toolbar on the editor. When you select an image, you can choose either of the formats above to apply to the image.
2. Automatically add a style / class to the inserted image
Even though you were using the code above, your description sounds like you want to automatically apply styling.
You can do this by adding the the following to your functions.php. Again, I have given options for adding the style directly to the image, or adding a class - you can remove the option you don't need:
function my_custom_image_styling($html, $id, $caption, $title, $align, $url, $size, $alt) {
$doc = new DOMDocument();
$doc->loadHTML($html);
$imgs = $doc->getElementsByTagName('img');
foreach($imgs as $img){
// 1. ADD THE STYLE ATTRIBUTE DIRECTLY TO THE IMAGE
$styles = $img->getAttribute("style");
$img->setAttribute("style", $styles."width:100%;");
// OR 2. ADD A CLASS TO THE IMAGE
$classes = $img->getAttribute("class");
$img->setAttribute("class", $classes." my_image_class");
}
$html = $doc->saveHTML();
return $html;
}
add_filter('image_send_to_editor', 'my_custom_image_styling', 1, 8);
Now, depending on which lines you use, the style or class will automatically be added to the image when it is being inserted into the editor.
References
tiny_mce_before_init hook
image_send_to_editor hook
I'm unsure about your request but if you're trying to inject css into the admin panel this is the way:
<?php function theme_admin_css() {
echo '
<style media="screen">
/* ... Your custom css goes here ... */
</style>
'; }
add_action( 'admin_head', 'theme_admin_css' ); ?>
I am creating a site with woocomerce and wordpress, and I have a product with 6 related images and instead of showing 4 images the flex slider shows me the 6 images in two lines. I tried using this filter to change the flexslider settings but I can't find a way to make it a slider.
I have the images inside a li inside a ol with class="flex-control-nav flex-control-thumbs"
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );
function ud_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
$options['sync'] = '.flex-control-thumbs';
$option['minItems']=0;
$option['maxItems']=4;
$option['animaton']='slide';
$option['itemWidth']=': 210';
return $options;
}
Thank you.
Did you sort this in the end? I also came across the same issue and so far I've found the following.
The FlexSlider 2 jQuery plugin is being used for the primary image and thumbnails on the WooCommerce product page. Specifically this example is being used - the "Slider w/thumbnail controlNav pattern"
Slider w/thumbnail controlNav pattern
This is what produces the unorder list mark-up you mention:
<ol class="flex-control-nav flex-control-thumbs">
<li><img/></li>
</ol>
But I haven't found an option to enable a horizontal scroll for this mark up generated for the thumbnails via FlexSlider 2. This would be the simplest solution here if there was an option. By default, there's no horizontal scroll and thumbnails display on multiple rows.
However, it looks like if we can change how WooCommerce uses Flexslider we can use the "Slider w/thumbnail slider" example form the FlexSlider website instead:
Slider w/thumbnail slider
I've been able to make progress with this and using the "woocommerce_single_product_carousel_options" filter you have done is correct but going slightly further:
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );
function ud_update_woo_flexslider_options( $options ) {
$options['sync'] = '#our_own_thumnail_markup';
$options['controlNav'] = false;
return $options;
}
Note the "controlNav" option. This should be changed to false so the jQuery plugin doesn't automatically generate it's own thumbnails.
And taking the "Slider w/thumbnail slider" example from the FlexSlider website we need to generate our own markup for thumbnails just before the last closing div in "woocommerce/single-product/product-image.php" in our theme:
$attachment_ids = $product->get_gallery_image_ids();
if ( $attachment_ids && $product->get_image_id() ) {
echo '<div id="our_own_thumnail_markup">';
foreach ( $attachment_ids as $attachment_id ) {
echo wc_get_gallery_image_html( $attachment_id );
}
echo '</div>';
}
And call the following via jQuery:
$('#our_own_thumnail_markup').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '.woocommerce-product-gallery__wrapper'
});
I haven't got this to work but I think I'm heading in the right direction.
The title in my WordPress is of two words (say "The Company" for example). Right now the default color is Blue. But I want the "The" portion in the above example to be Grey. I used the font tag and set it as <font color="grey">The</font> Company in the site title Input box. In the preview page it is showing correctly, but when I visit my page , it is showing as
<font color="grey">The</font> Company
including the tags. How to modify? I'm using mindfulness theme in WordPress
(similar kind of) if someone throws a light on option two of this page.
A briefly describing image:
How to target specific words in the blog title of the Twenty Twelve theme?
You can try the following, it works for the Twenty Twelve theme:
/**
* Wrap the first word of the blog title with the <span>...</span> tag.
* Assumes the Twenty Twelve theme.
*
* #see http://stackoverflow.com/a/25096093/2078474
*/
add_filter( 'body_class',
function( $class )
{
add_filter( 'bloginfo', 'so_25094932_modify_first_word', 10, 2 );
return $class;
}
);
function so_25094932_modify_first_word( $output, $show )
{
static $counter = 0;
// Target the "name" part:
if( 'name' === $show )
{
// Target the second instance:
if( 2 === ++$counter )
{
remove_filter( current_filter(), __FUNCTION__ );
// Modify the first word of the blog title:
$title = explode( ' ', $output );
if( count( $title ) > 0 )
{
$title[0] = sprintf( '<span>%s</span>', $title[0] );
}
$output = join( ' ', $title );
}
}
return $output;
}
where we use the bloginfo filter to target only the second instance of the blog name, counted from the <body> tag.
Then we can target the span tag with CSS:
h1.site-title span{
color: red;
}
Example:
Here's a screenshot:
It should be possible to adjust our code snippet to other themes as well.
I hope this helps.
To do so you have to change the style.css that controls your design | theme.
Edit CSS from wordpress:
Login to WordPress, not sure which version you're running, but you should have a section called Themes or Design. From there choose Theme Editor. There will be a list of all the files you can edit, the CSS stylesheet should be named style.css.
You will have to have write access in order to edit it from within WP admin.
Otherwise you will have to find the file via FTP on your website, download it to your computer, edit it, and then upload it back to your site.
Edit CSS the way you want it:
<span id="the">The</span>
<span id="company">Company</span>
<style>
#the{color: #0033CC;} //refers to blue.
#company{color:#CCCCCC;} //refers to grey.
</style>
There is also a fiddle for you to test it:
JSFIDDLE Demo
GoodLuck!
I have a problem with a shortcode.
Check this theme out:
http://themeforest.net/item/elogix-responsive-business-wordpress-theme/full_screen_preview/1958520
Please navigate to "Shortcodes-> Toggle" and see the example.
I want to use the toogle function, however, i want to be able to use an image beside the title, like a symbol.
However, when i do this within wordpress, the title will not be shown, and the shortcode gets messed up.
The core code looks like this:
function minti_toggle( $atts, $content = null)
{
extract(shortcode_atts(array(
'title' => '',
), $atts));
return '<div class="toggle"><div class="title">'.$title.'<span></span></div><div class="inner"><div>'. do_shortcode($content) . '</div></div></div>';
}
add_shortcode('toggle', 'minti_toggle');
I am still new at PHP, so I cannot seem to see, where it limits me to only use letters within the title tag, and not an image file as well.
Best Regards
Patrick
Okay, so i figured out the problem, if anyone else needs this:
The problem was, when adding a tag, it would disrupt the title tag, and not display anything.
So i edited the code, so i could input another value, which would then be showed left to the title:
function minti_toggle($atts, $content = null)
{
extract(shortcode_atts(array(
'title' => '',
'image' => ''
), $atts));
return '<div class="toggle"><div class="title">'.$title.'<span style="float:left;margin-right:5%"><img width="22" height="22" src="'.$image.'" class="alignnone wp-image-157"></span></div><div class="inner"><div>'. do_shortcode($content) . '</div></div></div>';
}
add_shortcode('toggle', 'minti_toggle');
This code returns the code input for image. So the shortcode would be
If you want to be able to edit the code in a css file instead, just delete the style in the , and make a class for this in the style.css.
Hope this helps someone :)
For Setting background image in title.
Please make change in .css file of plugins.
.title{
background:url('imageurl');
background-repeat: no-repeat;
}