You can try wrapping your search form call in the middle of your naviation with something along these lines:
<span class="center-nav widget_search"><?php get_search_form(); ?></span>
The ‘widget_search’ class should make the two search boxes appear the same, now just simply center the search form by applying the correct CSS to the ‘center-nav’ class, such as ‘margin: 0 auto;’ for example.
Thread Starter
anonymized-7517021
(@anonymized-7517021)
I’m not sure I did it right…
Did you mean I was going to put
<span class="center-nav widget_search"><?php get_search_form(); ?></span>
So it be like this, in the loop.php
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
<span class="center-nav widget_search"><?php get_search_form(); ?></span>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-below -->
?
If so… It didn’t work. As you can see now the search function is even bigger (or longer).
Did I misunderstood something?
Thread Starter
anonymized-7517021
(@anonymized-7517021)
One more thing. How do I do if I want to maintain the search function between the navigation even when there is no navigation?
If I want a search function in center over the line in the footer. Should I maybe do this in another way than place it in between the navigation?
Thread Starter
anonymized-7517021
(@anonymized-7517021)
Here is a screenshot of how it looked when I used
<span class="center-nav widget_search"><?php get_search_form(); ?></span>
I changed back to only
<?php get_search_form(); ?>
Which is why I link to a screenshot so you can see how it turned out.
Thread Starter
anonymized-7517021
(@anonymized-7517021)
I decided to place the search function in the footer above the line instead which gave me the right size (and it’s still there even if there is no navigation). Now I only need to make it centered and “lift” it a little bit above the line.
This is taken straight from my test site editing the Twenty Ten theme directly. The first bit is from the loop.php at the bottom of the file:
<div id="nav-below" class="navigation">
<span class="center-search"><?php get_search_form(); ?></span>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-below -->
Notice the placement of ‘get_search_form’; this gets the function out of the floating issues that make centering an element between the nav items difficult.
Now add this to you style sheet (at the end will work):
div#nav-below span.center-search { position: relative; text-align: center; top: 18px; }
div#nav-below span.center-search input { font-size: 10px; }
Both of the above samples should be easily added/edited into your Child-Theme.
