Hi Ankur! Nice to hear from you again. 🙂
Let’s go through these one by one:
1. I want to reduce the size of the footer area (above the site credits/copyright statement). Right now when I place Google ads in that area, I see a lot of empty space which spoils the look & feel of the homepage.
Can you give the following custom CSS a try? It will reduce the height of the Google Ads widget as well as the padding within the widget area:
.widget-area {
padding: 1em 0;
}
.grid-container {
height: 90px !important;
}
2. Instead of showing social icons in the footer area I want to show them on the right side of credit/copyright statement. How can I do that?
The theme does support a social links menu in the bottom right hand corner. Follow these steps to set that up:
- Navigate to Appearance > Menus in your site’s /wp-admin area.
- Select the option to “create a new menu”.
- Name the menu “Social Links” or similar and click the blue “Create Menu” button.
- Select the “Custom Links” tab from the left sidebar.
- From the “Custom Links” tab, add the URLs to any social profiles you wish to link to to your menu. You can add the name of the social network to the “Link Text” field.
- View all of your links in the right hand area and check the option to display it as a “Social Links Menu” under “Menu Settings”.
- Save your changes. 🙂 The theme will automatically convert your URLs into the social icons.
Let me know how that goes!
3. Is there a way I can also add the social icons with links to my social pages above the menu options in header area?
There isn’t a built-in way to add social icons in your theme’s header area, no. If you’d like to add a menu to that area of your site then you’d need to get more involved with the theme’s HTML and PHP.
The first step would be for you set up a child theme. In case you’re unsure, the following guides provide a good introduction to child themes, including steps to set one up:
Let me know if you decide to set up a child theme!
Another option is to add custom links to your social profiles to the main, primary menu. We could then use custom CSS to convert the text to icons.
I’m still a novice with HTML/CSS hence all of this is still rocket science for me.
I remember thinking of HTML/CSS as magic when I first started learning! ✨
If you’re interested in learning more, there’s a good list of resources here:
https://en.support.wordpress.com/custom-design/css-basics/#get-going
I’m happy to help with questions that come up along the way too.
Thread Starter
Ankur
(@dpunksoul)
Excellent. Solution to my 1st query worked like a charm. But when I created a social menu with links to my Facebook, Instagram & Twitter profiles, It does not show Twitter’s logo there plus this menu has increased the height for that whole area. Take a look at it and you’ll get what I mean by that. 🙂
Btw, I’m already using a child theme.
Cheers!!
Ankur
Hi Ankur,
I’m seeing that a width of 100% is being added to your footer credit:
.footer-bottom-info:before {
content: "© 2017 www.AllStuffIndian.com. All Rights Reserved";
text-align: left;
width: 100%;
}
You’ll need to reduce that width and float it to the left so that the social links menu appears along the same line.
The final CSS should look as follows:
.footer-bottom-info:before {
content: "© 2017 www.AllStuffIndian.com. All Rights Reserved";
text-align: left;
width: 50%;
float: left;
}
In addition, I can see the Twitter icon in the menu. Were you able to resolve that issue?
Btw, I’m already using a child theme.
Great, if you’d like to add an extra menu to the header area then you’ll need to edit the the theme’s header.php file.
You could tweak the following code that exists in the theme’s footer.php file to display the social links menu:
<div class="footer-bottom-info <?php if ( has_nav_menu( 'social' ) ) { echo 'has-social-menu'; } ?>">
<?php
if ( has_nav_menu( 'social' ) ) {
wp_nav_menu( array(
'theme_location' => 'social',
'container' => 'div',
'container_id' => '',
'container_class' => 'social-links',
'menu_id' => '',
'menu_class' => 'social-links-items',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
'fallback_cb' => '',
) );
}
?>
</div>
