Putting a div in a function

To wrap the words “SEARCH & FILTER” with a div element having a specific class in your WordPress shortcode function, you need to modify the PHP code a bit. Here’s how you can do it:

function image_sidebar_shortcode() {
    // Start by opening the div tag with the specific class
    echo '<div class="your-class-name">';

    // Echo the gettexted words inside this div
    echo __('SEARCH & FILTER', 'sacconicase');

    // Close the div tag
    echo '</div>';

    // Continue with the rest of your code
    echo '<div class="filter"><img height="100" src="https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg"></div>';
}

// Register shortcode
add_shortcode('image', 'image_sidebar_shortcode');

In this code:

1. I added a div tag with class="your-class-name" around the __('SEARCH & FILTER', 'sacconicase'). You should replace "your-class-name" with the actual class name you want to use.
2. The rest of the function remains the same.

This modification will result in “SEARCH & FILTER” being wrapped inside a div with the specified class, and it will be part of the output when the shortcode [image] is used on your WordPress site.

Attention: add_shortcode() should always return a value via return, never via echo. See: https://developer.www.ads-software.com/reference/functions/add_shortcode/ – then it also works with the output within an HTML element.

I changed my shortcode into:

function image_sidebar_shortcode() {
   return'<div class="textsearch">' . __('SEARCH & FILTER', 'sacconicase') .'</div>'. '<div class="filter"> . <img height="100" src="https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg"> . </div>';
}


// Register shortcode
add_shortcode('image', 'image_sidebar_shortcode');

My css:

div.filter{
    width:100%;
}
div.textsearch {
  position: relative;
  top: 27px;
  left: 28px;
  width: 150px;
  height: 0px;
  font-size:25px;
  font-weight:bold;  
}	

Problems: having a correct text layout both for desktop and laptop, putting a top border-radius to the image, removing the space between the widget with the search box and the above widget (the one displaying the shortcode)

In deinem Shortcode gibst Du fehlerhaften HTML-Coce aus. So w?re es richtig:

function image_sidebar_shortcode() {
   return '<div class="textsearch">' . __('SEARCH & FILTER', 'sacconicase') .'</div><div class="filter"><img height="100" src="https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg"></div>';
}

Styling should then be possible more reliably. However, without knowing the entire website, it is not possible to judge why something looks different than you expect via CSS.

The name “image” for a shortcode is also extremely unfavourable, far too general. Better choose a different one to avoid overlapping with shortcodes from other plugins. A tip would be to include your plugin/theme name in the name of the shortcode.

Attention:?add_shortcode() should always return a value via return, never via echo.

Oh, totally true ?? Thanks @threadi!