This article guides how to add banner to WordPress header section of Graphene theme enabled site.
It is really simple, no need to modify existing source code or does not require PHP knowledge at all. So let’s look at hot to do it.
1) Go “Appearance” –> “Graphene Options” and select “Advanced” tab. Under that section, you can find “Action Hooks Widget Areas“, and toggle / expand it.
2) Find the header.php and tick the “graphene_top_bar” as going to positioned the banner at top of WordPress logo . You can find all Graphene Action Hooks Map from here .It has ton of method to customize the WordPress.
3) when you go to “widgets“, new section called “Graphene Top Bar” appears left hand side of the panel. you can drag and drop any widgets as you wish !. So, I added “Text” widget and fill the title with some words such as “testing123” etc. This is be useful to find the widget ID later.
4) To figure out widget ID, open your WordPress home page, right click on free area and open “view page source“. page source will open on new window. you need to press “CTRL” + “F” key to get the search box. Enter the text which you have put on previous step (“testing123”). you can find the widget ID easily as below image.
5) Now again go to “Graphene Options” and Click on “Display” from tab section. Then find and toggle “Custom CSS” at the bottom.add similar css code as below but remember to change “text-6” according to your widget ID. here I used text widget and it’s ID was “text-6”. In your case it will be totally different.
#text-6{
width: 740px;
height: 115px;
float: left;
}
6) That’s all. comments if there any doubts or need any help. Below is the preview of it.
References:-
http://docs.graphene-theme.com/Action_Hooks_Widget_Areas