- Posts
The current Venetian theme only allows me to work with 2 columns, 1 for the logo on the left and 1 for the menu on the right. How would I make it a 3 columns so that I can have a slogan in the middle. Something like the circled areas in the header below:
Thanks.
Hello tee dee,
Thank you for submitting a question about adding a third column to the Venetian theme. The header area is not editable the way the pages are: through the default Visual/Text page/post editor. It would need to edited at the core level in the .php template file.
However, in the page/post editor, you could the default Bootstrap options, as follows:
<div class=”container”>
<div class=”row”>
<div class=”col”>
1 of 2
</div>
<div class=”col”>
1 of 2
</div>
</div>
<div class=”row”>
<div class=”col”>
1 of 3
</div>
<div class=”col”>
1 of 3
</div>
<div class=”col”>
1 of 3
</div>
</div>
</div>Best,
Christopher M.
Hi Chris, thanks for the suggestions. What would I need to change in the .php to make it a 3 columns header then? I need to have it changed in the header, not in the body of a page.
Hello tee dee,
You could edit the header directly, but those changes will be lost each time you update your theme. In the child theme’s functions.php, you could add the code I created from this gist to have the columns rearranged. I included notes about what is actually happening inline there that you can read over if you’d like. This will add 3 columns equal width like your picture above with the site title first, the tagline in the middle, and the menus on the right. This will ensure that features in the customizer continue to work properly, and give you the layout you desire!
I would highly suggest that you download and install the Snippets Plugin and include the code from the gist I created below as a snippet, or create a child theme and include the change directly in the child theme’s functions.php.
-Tim Elsass
Allow me to jump in – I’m just another user, but just yesterday I figured out exactly what you’re asking to do (in my case the theme is Hydra, but I suspect the structure is very similar). I don’t really understand Tim’s suggestion in functions.php, but my solution is as follows:
- Create a child theme, if you haven’t already done so.
- Copy from the parent theme the file templates/header/header.php into the same structure in the child theme – you’ll need to create the templates and header folders to build the structure. (Unfortunately, the theme editor in WordPress won’t show two levels deep, so you have to do this using FTP or the file manager in your hoster’s control panel.)
- In that new header.php file in your child theme, you’ll see <div> tags for each row, and then within each one there will be one, two, or three columns. In the Hydra theme, the site name/logo is the div with “header-6” and the social icon menu is “header-7”. Yours might be different, but if you can figure out the row you want to add to, you can create a new column <div> there.
- Note the classes called “col-md-[some number]” – you have to make sure that all the columns in each row add up to 12 – that’s the width ratios (how many 1/12 parts for each column), so you can arrange the widths to your liking.
I hope that helps.
- The topic ‘Adding Another Column to the Header’ is closed to new replies.
