• Hi,
    I am creating a plugin to display images and titles with a link from my external server.

    I am retrieving the data using an API as JSON data. And I am planning to display the details with shortcode.

    How can I display the content with a style in the page with shortcode.

    Thanks in Advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • From the left-hand menu, go to Settings, and then select Shortcoder.
    Click Create a new shortcode.
    Give your shortcode a title, and then add your content in the editor.
    Click Create shortcode at the bottom, and you’ve just created your first shortcode!

    It is actually simple: you can conditionally enqueue your scripts and styles using is_page function (details here).

    Hope this will be helpful, bye.

    Moderator bcworkz

    (@bcworkz)

    It depends on exactly what you mean by “with a style in the page”. If you want to use style rules already applied to the page, include the proper attributes in your shortcode output to match the existing style selectors. For example, if the page’s CSS already includes this rule: .my-red {color: red;}, add the class “my-red” to your shortcode’s HTML element, like so:
    <h1 class="my-red">Shortcode Title</h1>

    If you mean instead to have the shortcode apply new style rules not available elsewhere, you could begin the shortcode output with an inline <style> block that contains your new rules. Rules added like this will be applied to the entire page, not just your shortcode. To limit styles to your shortcode, you can use element styles, for example <h1 style="color: red;">Shortcode Title</h1>, or use distinct selectors that could not be applied elsewhere.

    Inline and element styles like I just described are frowned upon in good webpage design practices. We should keep style and content separate so page appearance can be altered without touching content at all. It’s better to have the style rules enqueued separately so other modules and devs are able to override your plugin’s default styles if need be without needing to directly hack your plugin code.

    Thread Starter vijayj

    (@vijayj)

    Thanks All.
    I am new to these topics and really confused now.
    Can anyone give a good link to read about the topic.

    [news_link]

    This is the shortcode I am using to display image and description,I need to place the description just below the Image.So whenever I add my shortcode to a page It shold list the Images with description.

    Moderator bcworkz

    (@bcworkz)

    Sorry for the confusion. It can be the nature of forums. Different people have different ideas. Some may have misunderstood what you asked.

    Perhaps the easiest thing to do is wrap your shortcode in a custom div (using text view), then add styling that applies to the div in the Additional CSS panel of the customizer. For example:
    <div class="my-class">[news-link]</div>

    Then add applicable CSS to the customizer:

    .my-class {
      width: 80%;
    }

    You can also target inner elements, preceded with selector .my-class, so the CSS is only applied to shortcode output. Let’s say there’s a h3 element you want to target. Make a rule like this:

    .my-class h3 {
      font-size: 110%;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding sytle to shortcode for a new pugin’ is closed to new replies.