Theme: Twenty Twelve, add search bar

Ah, I just managed to restore an old install… the search bar is back! BUT, if you’ll notice, it’s on the second line, not truly right-aligned.

How can I truly right-align it?

You can edit your template css file to add #nav-search { float:right; } which will bring the nav bar to the right side of your menu. However, with the current number of menu elements you have and the search bar, you need 2 lines. You’d have to reduce the size of the input or the button.

Do you know which template?

I’ve got Main Index Template, Front Page Template Page Template, Full-width Page Template, No Sidebar Page Template, and Page Template.

Main Index, probably…?

Sorry, my bad. I meant to say theme css.

Quick fix which is not recommended:
Just add
#nav-search { float:right; }
to your style.css of Twenty Twelve.

The down side of this is that when there’s an update of the theme, you’ll lose customization done in the theme’s files.

Better way:
Create a child theme (https://codex.www.ads-software.com/Child_Themes)
Apply all your css changes to the child theme. This way, your customization are separate from the theme itself and not lost when the theme is updated.

I hope this helps. Have a great day.

Kind of got it working. How could I nudge it down a few pixels and over to the right some more pixels?

Hi Joshua,

Edit the style.css file as mentionned before, adding

#nav-search {
float:right;
margin-top:5px;
}

The float will make the search element go all the way to the right. The margin-top will nudget it down a bit. Feel free to experiment with other values than 5px.

Good luck

Joshua – doesn’t look like you have a child theme set up – which means that you will, again, lose all your changes to theme files when WP is updated. Not a good situation.

Make a child theme and move your changes to the child theme!

I foolishly updated the Twenty Twelve theme

No, it’s foolish to NOT update WP – using an outdated version of WP is a major security risk. Default themes are overwritten when WP is updated so avoiding updates is not a good strategy.

I tried to make a Child Theme, but apparently I did something incorrectly, as it never showed up for me to choose as a theme.

Wait, I got it working! The child theme, that is. Okay… Now I just need to redo my categories, get the search bar, get the header going… but here’s a question:

When I updated the Twenty Twelve theme, I lost my footer customization, lost my my post title customizations and colors, too.

How do I prevent that from going away when I update the parent theme? I’m not sure where in the parent theme it is, so I don’t know how to copy it to the child theme. :\

I’d suggest you figure out why it wasn’t working – if you want help with that, please review this article:

https://codex.www.ads-software.com/Child_Themes

If it’s still not working, please post the code you have in the child theme style.css file.

As you can see, I’ve got a child theme going now, but this code in my style.css sheet isn’t adding the search bar.

The stray comment tag here is preventing that CSS from working:

/*

#nav-search {
float:right;
margin-top:5px;
}

Also, remove all of those !important codes from your CSS – you should only use those as a very last resort – it’s hardly ever necessary. If your CSS isn’t working, you either have errors or it’s not specific enough or you need a media query in this theme.

Removed the stray tag, I think. Still isn’t showing a search bar, though.

I’ll go through and remove the !important codes in a bit. All of that was done by a guy I hired, but now that I’ve got it all in a child theme, I’ll try to clean it up.

Also, that code won’t add a search form – do you have the code for the search form in the header.php file (in the child theme)?