0

So I made this shortcode for a client that creates an expandable transcription box. It works as intended except if there is a line break in the code. Then it create an extra p tag inside the div

function transciptor( $atts = '' ) {
    $value = shortcode_atts( array(
        'text' => '',
        'title' => 'Video transcript:'
    ), $atts );
    return '
    <style>
    #trans_title {
        margin: 0 auto;
        width: calc(60% + 48px);
        font-weight: bold;
    }
    #transcript_div > p {
        width: 60%;
        margin: 0 auto;
        max-height: 500px;
        overflow: scroll;
        padding: 24px;
        background-color: #e9f4fb;
        transition: 200ms;
    }
    #transcript_div > a {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: fit-content;
        background-color: #252a2d;
        padding: 12px 36px;
        border-radius: 36px;
        position: relative;
        bottom: 24px;
        color: white;
    }
    </style>
    <p id="trans_title">'.$value['title'].'</p>
    <div id="transcript_div">
        <p>'.$value['text'].'</p>
        <a href="#">Expand</a>
    </div>
    <script>
        trans_text = document.querySelector("#transcript_div > p");
        trans_btn = document.querySelector("#transcript_div > a");
        expanded = false;

        trans_btn.onclick = function(event){
            event.preventDefault();
            expanded = !expanded;

            if(expanded == false){
                trans_text.style.maxHeight = "500px";
                trans_btn.innerHTML  = "Expand";
            }
            if(expanded == true){
                trans_text.style.maxHeight = "fit-content";
                trans_btn.innerHTML  = "Collapse";
            }
        }
    </script>

    ';
}
add_shortcode( 'transcript', 'transciptor' );

for example entering the code like this:

[transcript text="example line

example line"]

create two paragraph tags. How do I get the shortcode to add in linebreaks instead of making extra p tags?

enter image description here

UPDATED WITH $CONTENT

function transciptor( $atts = '', $content ) {
    $value = shortcode_atts( array(
        'title' => 'Video transcript:'
    ), $atts );
    return '
    <style>
    #trans_title {
        margin: 0 auto;
        width: calc(60% + 48px);
        font-weight: bold;
    }
    #transcript_div > p {
        width: 60%;
        margin: 0 auto;
        max-height: 500px;
        overflow: scroll;
        padding: 24px;
        background-color: #e9f4fb;
        transition: 200ms;
    }
    #transcript_div > a {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: fit-content;
        background-color: #252a2d;
        padding: 12px 36px;
        border-radius: 36px;
        position: relative;
        bottom: 24px;
        color: white;
    }
    </style>
    <p id="trans_title">'.$value['title'].'</p>
    <div id="transcript_div">
        <p>'.$content.'</p>
        <a href="#">Expand</a>
    </div>
    <script>
        trans_text = document.querySelector("#transcript_div > p");
        trans_btn = document.querySelector("#transcript_div > a");
        expanded = false;

        trans_btn.onclick = function(event){
            event.preventDefault();
            expanded = !expanded;

            if(expanded == false){
                trans_text.style.maxHeight = "500px";
                trans_btn.innerHTML  = "Expand";
            }
            if(expanded == true){
                trans_text.style.maxHeight = "fit-content";
                trans_btn.innerHTML  = "Collapse";
            }
        }
    </script>

    ';
}
add_shortcode( 'transcript', 'transciptor' );
1

You could try using the enclosing form to write the shortcode and make use of the $content returned variable.

You need to declare you short code function with the extra parameter:

function transciptor( $atts = '', $content ) {

and then write your shortcode as:

[transcript]
place the value that
will be passed to
$content here
[/transcript]

Note the alternative syntax for the shortcode. There is information about it in the codex here.

If the p tags are still there I see two other options. Don't enclose your shortcode parameter in paragraph tags, i.e.

'.$value['text'].'

instead of

<p>'.$value['text'].'</p>

or you could parse the p tags from the variable with something like:

$value['text'] = str_replace("<p>", "", $value['text']);
$value['text'] = str_replace("</p>", "<br>", $value['text']);
6
  • so i tried your sugesstions but it is still outputting two p tags; i will edit in updated code
    – sallycakes
    Apr 29 '20 at 23:39
  • could you recomment i cant find it but i got an notification
    – sallycakes
    Apr 29 '20 at 23:42
  • Ok, I've modified the original answer with a few more suggestions. Let me know if they worked
    – dyg
    Apr 29 '20 at 23:45
  • thank you the last option did it! I just had to change "/n" to "<br>" since its user submitted string!
    – sallycakes
    Apr 29 '20 at 23:57
  • Great. I've modified with the br. Would you mind upvoting the answer as correct. Thx.
    – dyg
    Apr 30 '20 at 0:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.