[Resolved] Styling php inside elements (hook)

[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

[Leo]

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(); ?>

[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.

[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.

[Leo]

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

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

[sipahi]

Thank you.

[Leo]

No problem 🙂

[Author]

Posts