[Resolved] Styling php inside elements (hook)

Home Forums Support Styling php inside elements (hook)

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1105087
    sipahi

    Hello,

    I am trying to insert a search box (not just icon) inside header navigation area. https://imgur.com/Qw27o1K this is what I am trying to accomplish.

    I am creating an element and selecting hook and then do proper settings.

    <?php get_search_form(); ?>

    I need to style the php code above.

    if it was a shortcode I could use

    <div class="classname">[shorcode]</div>

    now that it’s a php code, can you please give me some idea in order to style it.

    do you think the code below works?

    echo '<div class="my_class">';
    echo <?php get_search_form(); ?>;
    echo '</div>';

    my css and php knowledge is extremely limited. that’s why I need help.

    Thanks in advance

    #1105118
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not seeing the search box on your page currently.

    Can you add it in so I can see?

    Try just adding this first and make sure execute PHP is checked:
    <?php get_search_form(); ?>

    #1105124
    sipahi

    I enabled it.

    As you can see it needs to be styled. But if I style it as is, then the sidebar search box also get affected. I think I need to assign a new class to it.

    #1105136
    sipahi

    it seems there is a workaround https://www.wpbeginner.com/wp-tutorials/how-to-add-search-form-in-your-post-with-a-wordpress-search-shortcode/

    it tells how to create shortcode for search bar. let me try it. if it solves my issue, I will update this post accordingly.

    #1105140
    Leo
    Staff
    Customer Support

    You should only have to make you CSS selector more specific like this:

    .inside-navigation input[type="search"] {
        border-radius: 10px;
    }
    #1105210
    sipahi

    Thank you.

    #1105214
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.