Enclosured php element in p-tag is ouside p, how is this possible?

Question

I am using advanced custom fields in wordpress and having this line of code:

<p class="small"><?php the_field('somefield', 'options'); ?></p>

And it is printed like this in the browser:

<p class="small></p>
<p>the content of somefield</p>

Why does this happen and how do I fix it?

Answer 1

it's because you are using paragraph inside and paragraph you can fix it by using the fix below , if you are inserting the <p> inside this field , please use span or something else it will cause this problem if you use <p>:

<?php 
   $myfield = the_field('somefield', 'options');
   echo strip_tags($myfield, '<p></p>');
 ?>

Answer 2

@Arsh gave a good answer.

Let me explain the inner-workings of it in WordPress Methodology.

Most function which starts with the_{function_name} most of the time has a function get_the_{function_name}.

Since the_{function_name} is a function to output the field and not threat it has data unlike get_the_{function_name}.

Here is a simple example with the_ID()

function the_ID() {
    echo get_the_ID();
}

And here is an example with get_the_ID()

function get_the_ID() {
    $post = get_post();
    return ! empty( $post ) ? $post->ID : false;
}

Understanding those pattern better your understanding of WordPress conventions and its inner workings.

You can always check official documentation to understand WordPress functions.

https://developer.wordpress.org/

or check in with plugin developers docs.