BugWP logo BugWP
Back to Community
Home / Community / Theme → Onepress

How to Add Social Media Icons and Search to Your OnePress Theme Header

21 threads Sep 7, 2025 Theme → Onepress

Content

Many users of the OnePress theme want to customize their site's header by adding elements like social media icons or a search bar. While the theme includes these features in the footer by default, placing them in the header requires a bit more work. This guide covers the most common methods to achieve this popular customization.

Why Isn't This a Standard Feature?

The OnePress theme is designed with a specific layout, and its built-in social media and search functions are primarily configured for the footer area. The header layout is intentionally simpler, focusing on the logo and main navigation menu. Therefore, adding new elements to the header is considered a customization beyond the theme's standard support scope.

Common Solutions for Adding Elements to the Header

1. Using a Custom Menu Item (No Coding Required)

The most straightforward method, which doesn't require any code, is to add a link as a custom menu item. This works well for adding a single social media icon.

  • Go to your WordPress dashboard and navigate to Appearance > Menus.
  • Select the menu you use in your header.
  • On the left, click Custom Links.
  • Enter the URL to your social media profile (e.g., https://facebook.com/yourprofile).
  • In the Link Text field, you can simply enter the name of the social network (e.g., "Facebook").
  • Add the link to your menu. You can then use a plugin like Menu Icons to add an icon next to the text.

This method was suggested by the OnePress team as a viable workaround.

2. Using a Plugin for a Search Icon

To add a search icon to your navigation menu, a simple plugin can do the trick without heavy coding.

  • Install and activate the BOP Search Box Item Type For Nav Menus plugin.
  • This plugin adds a new "Search Box" item type to your menu builder in Appearance > Menus.
  • Simply add this item to your header menu, and it will display a clickable search icon that expands into a search field.

3. For Advanced Users: Custom Code in a Child Theme

For more control, such as adding multiple social icons or a custom search bar, modifying the theme's code is necessary. Always use a child theme to prevent your changes from being overwritten by theme updates.

  • First, create and activate a child theme for OnePress. You can find a sample child theme on the FameThemes documentation site.
  • Copy the header.php file from the parent theme into your child theme's directory.
  • Edit the child theme's header.php file to add your custom HTML for social icons or a search form in the desired location.
  • You will likely need to add corresponding CSS to your Customize > Additional CSS panel to style the new elements correctly. For example, to adjust the position of a newly added search bar, you might use CSS like .my-search-class { margin-top: 25px !important; }.

Important Considerations

  • Scope of Support: It's important to understand that the OnePress support team typically classifies these header modifications as "out of scope" for their free support, as they involve custom code or third-party plugins.
  • Icons: If you need an icon that isn't available in the FontAwesome library (which OnePress uses), you may need to add a custom icon font and reference it in your CSS, which is an advanced task.
  • Responsiveness: Any custom code added to the header should be tested on mobile devices to ensure it doesn't break the responsive layout.

By using a combination of custom menu items, lightweight plugins, and careful custom coding in a child theme, you can successfully integrate social links and search functionality into your OnePress header to create the perfect layout for your website.

Related Support Threads Support