Simply go to Appearance > Customize > Topbar and here you can enter the URL’s for any of your social media profiles and choose your specific settings for their display.
The Diamond theme includes a built-in shortcode for creating a login/logout link which you can add anywhere on your site (including certain options in the Theme Customizer such as the Topbar content field). Here is the very basic way of adding the shortcode to your site:
[wp_login_url text="Login" logout_text="Logout"]
And here are the accepted parameters:
- login_url – By default it will go to the WordPress login url but you can use this parameter to define a custom url
- url – The same as login_url (just a fallback)
- text – Text for non-logged in users
- logout_text – Text for logged in users
- target – Set to “blank” to open the login URL to open in a new tab/window
- logout_redirect – Set a custom redirection for users after they logout
The Diamond theme includes a region at the very top of the site called the “Top Bar” where you can literally add ANYTHING you want either via the Customizer text field or by creating a custom page and displaying the page content in this area (or via theme action hooks – for developers). This area by default has a phone number, email and login/logout link on the left and social links on the right. To edit the area simply log into WordPress and go to Appearance > Customize > Top Bar to make your adjustments.
The general options for the Top Bar:
The main content for the Top Bar. Default is a few shortcodes for phone, email, login link.
[font_awesome icon="phone" size="14px" margin_right="8px"]
<span style="font-size: 15px;">Call Us: 1–800–987–6543</span>
[font_awesome icon="envelope" margin_left=12px; size="16px" margin_right="8px"]
<span style="font-size: 15px;">Email: email@example.com</span>
Options for the Top Bar social icons which will display on the right side by default. You can choose from various styles and even customize the default colors.
There is actually a simple search form shortcode included in Diamond which you can use to place a simple search form anywhere on the site (there is also a search form Visual Composer module with many options). If you want to add a search to your Top Bar you can do so via the shortcode if you aren’t displaying VC content in this area.
Simply use the shortcode to display the default site search form:
This will pull the code from the searchform.php file so there aren’t any parameters available for the shortcode.
Below is an example of the shortcode in action:
The Top Bar height is actually dictated mostly by 15px top and bottom padding added by default to the Top Bar. If you want your bar smaller all you have to do is log into WordPress and go to Appearance > Customize > Top Bar > General and enter a smaller number for the top and bottom padding values like the example below (you must specific “px” or “%” in your value):
If you want you can make your entire site 100% wide by tweaking these settings, however, you can also have centered content with a full-width Top Bar if wanted via the option available at Appearance > Customize > Topbar > General.
The Top Bar has the ability to become sticky/fixed on scroll. To Enable simply go to Appearance > Customize > Top Bar > General and check the “Sticky” box.