Adding a caption aligned to the right edge of an image in Wordpress

Any suggestions on aligning an image caption under an image tag to its right hand edge?

I attempted using a div, but it seems it's not allowed in WordPress.

Can anyone recommend alternative CSS or tags that I could use for this purpose?

Answer №1

Is this not functioning properly?

.wp-caption p.wp-caption-text { text-align:right; }

Answer №2

I devised a method to specify alignment for each caption individually.

Essentially, I duplicated the caption shortcode from the media.php file and transformed it into my own custom function that accepts a "captionalign" argument.

To implement this, simply paste the following code into your theme's "function.php" file - this will enable you to define an option in your caption tag called captionalign. By setting this to right, left, or center, you can determine the alignment of each caption text. Omitting the attribute will make the caption default to your overall alignment preference.

Here is an example demonstrating how this works:

[caption align="aligncenter" width="300" caption="My caption" captionalign="right"]
<a href="http://www.myawesomeblog.com/wp-content/uploads/2010/05/image.jpg">
<img title="My image" src="http://www.myawesomeblog.com/wp-content/uploads/2010/05/image.jpg-300x216.jpg" alt="My image" width="300" height="216" />
</a>
[/caption]

And here is the customized function for this purpose:

add_shortcode('wp_caption', 'custom_img_caption_shortcode');
add_shortcode('caption', 'custom_img_caption_shortcode');

/**
 * The Caption shortcode.
 *
 * Allows a plugin to replace the content that would otherwise be returned. The
 * filter is 'img_caption_shortcode' and passes an empty string, the attr
 * parameter and the content parameter values.
 *
 * The supported attributes for the shortcode are 'id', 'align', 'width', and
 * 'caption'.
 *
 * @since 2.6.0
 *
 * @param array $attr Attributes attributed to the shortcode.
 * @param string $content Optional. Shortcode content.
 * @return string
 */
function custom_img_caption_shortcode($attr, $content = null) {

// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
    return $output;

extract(shortcode_atts(array(
    'id'    => '',
    'align' => 'alignnone',
    'width' => '',
    'caption' => '',
    'captionalign' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
    return $content;

if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text" style="text-align:' . $captionalign . '">' . $caption . '</p></div>';
}

I hope this proves useful to someone!

Answer №3

Posted on the Wordpress community forum as well, but received no replies. It seems like this feature is not included in version 2.2.1

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Flexbox with a column wrap and setting the height to min-content, the wrapping behavior may not

I'm facing a CSS challenge. I have divs of varying heights and I want the parent element to adjust its height based on the tallest child element, while keeping the rest of the elements aligned properly. The code provided below achieves this for rows b ...

How to showcase JSON/API image data in React with JSX

As someone who is new to React, I am currently facing a challenge when trying to display images retrieved from a movie API in my component. Although I have successfully retrieved and displayed text data, I am struggling to show the movie posters using JSX ...

Receiving an error when triggering an onclick event for a checkbox in TypeScript

I am creating checkboxes within a table using TypeScript with the following code: generateTable(): void { var table = document.getElementById("table1") as HTMLTableElement; if (table.childElementCount == 2) { for (var x = 0; x < 2; x++) ...

Transferring Chart Div Titles Above Bars

Is there a way to adjust the layout of an HTML bar chart so that the names or labels appear outside of the bars, tagged to the left end? <!DOCTYPE html> <style> .chart div { font: 10px Ubuntu; background-color: white; text-align: right; ...

Struggling to perfect your CSS menu design?

For some time now, I have been experimenting with CSS menus that have three levels, but unfortunately, I am struggling to get the layout exactly how I want it. The menu structure itself is simply a series of nested unordered lists within the HTML: <ul ...

How can I remove the blue highlight on text fields in a Chrome Extension?

I am currently developing a Chrome extension that allows users to edit a small text field. However, I am encountering an issue with the blue highlight that appears around the text field when clicked - I find it quite bothersome. Is there a way, possibly t ...

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

I'm currently working on my HTML website and facing a layout issue. I have an image in the center of the screen, but I want to add text beside it on the right side. Every time I try to do this, the image moves down, which is frustrating. I'm not ...

Is It Possible for an HTML Page to Load Within an iframe?

Recently, I embedded an iframe link from a game hosted on Scirra onto my website. However, I noticed that the page automatically scrolls down to where the iframe is positioned once opened, which is quite annoying. Does anyone know how to resolve this iss ...

Choose the option for overseeing safaris

Hello there! I need some help with Safari. Can you please guide me on how to disable the arrows? https://i.stack.imgur.com/1gzat.png ...

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: https://i.sstatic.net/Ktbnm.png The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column shou ...

I am looking to adjust the height of my MUI Grid component

Recently exploring React, and I'm looking to set a height limit for MUI Grid. I've structured my project into 3 sections using MUI grid components. My goal is to restrict the page height in order to eliminate the browser scrollbar. If the conten ...

Showing a JSON data as HTML content within a div element

How can I retrieve information from a tag within a list using dot notation? Both backend and frontend are written in Javascript.</p> <p>Here is the HTML code:</p> <pre><code><div>{{ GameData }}</div> </pre> ...

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

Why isn't a single click enough to activate an anchor generated with the Sidr jQuery library in Rails?

I am utilizing a library named Sidr to generate sidebars. I have included all the necessary jQuery and CSS, and while it is operational, I find that I need to double click instead of just one click to open the sidebar. Here is the code snippet. I essentia ...

Issues with JQuery Ajax rendering in browser (suspected)

I'm encountering an issue on my webpage. I have a div with two hidden fields containing values of 0 and 2, respectively. Upon clicking a button that triggers an AJAX query, the div contents are updated with hidden field values of 1 and 2. However, it ...

PHP failing to insert data

I'm facing an issue where my PHP code is not inserting any data. I have a form that displays values, but the update code doesn't seem to be working. Can someone please help me with this problem? Here is the PHP code snippet: if (isset($_POST[&ap ...

managing the HTML class names and IDs for various functions such as styling, jQuery interactions, and Selenium automation

While there is an abundance of articles on writing clean HTML/CSS, one aspect that seems to be lacking advice is how to organize class names and IDs for different purposes such as design, jQuery, and Selenium testing. The challenge lies in deciphering the ...

Does IE 9 support Display Tag?

Although this may not be directly related to programming, I have been unable to locate any information regarding the compatibility of IE 9 or even 8 with the Display Tag Library. The documentation is silent on the matter. If anyone has encountered any cha ...

Create a CSS path that connects two points by drawing a line

My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code: div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animatio ...