GeneratePress Theme Customization & Style CSS

GeneratePress theme is very light and fast which is very useful for site SEO. Though the GeneratePress theme is free to use but premium plugin is required to use all necessary features. Because you will need GeneratePress premium plugin to design the GeneratePress theme beautifully. In today’s post, we will discuss the customization of the Marketer theme from GeneratePress Premium Library and share the required CSS files and settings.

GeneratePress Free Theme Install

GeneratePress theme can be installed for free with one click from the theme options in the WordPress dashboard. For this, from the left side menu bar of your site’s dashboard, click on the “Themes” option from Appearance. Then search for GeneratePress by clicking the “Add New” button above your site’s current themes information. Click the Install button when the GeneratePress theme is actually on your screen and activate it once installed.

Even after installing the theme, you won’t see anything good in your site design. In this case, you need to unlock the full options through GeneratePress Premium. And with GeneratePress Premium, you can import custom design themes from the site library.

GeneratePress Premium Plugin Install

Usually, you have to buy the GeneratePress premium plugin which has an official price of 59$ per year and 249$ for a lifetime. However, you can buy the plugin from various third parties online for a very low price with a “license key” or many will let you use it for free. Contact us (ASIF) if you need the GeneratePress premium plugin. So let’s see how to install the GeneratePress Premium plugin and what follows.

GeneratePress premium plugin is like other plugins, go to the “Plugin” option of the WordPress dashboard, click on the “Add New” button, select the plugin, click on the Install Now button, and after installation, click on the “Activate Plugin” button to activate it.

Once the plugin is installed, access the GeneratePress menu from the Dashboard’s Appearance. Now here you will see many options as Modules. Among these, activate the Site Library option.

You will find an option called “Open Site Library“, click on it. Enter the Site Library and you will see many design templates. From there, click on the “Marketer” theme or template found under the “Blog” category.

If you click on the template, some information about the “Marketer” theme and the option to import all files will come. The template will display information about what plugins are used, and which plugins are required.

1. There first click on the Get Started button.
2. Then tick the Import Theme Options, Import Demo Content and I understand options and click the “Begin Import” button.
3. Then all the data of the theme including the demo content will be imported.

Note that if you do not select “Import Demo Content”, the data and design of the theme will not be imported correctly. So Import Demo Content is definitely important. In this case, if your site has a lot of posts you should also import the demo content. No need to fear, just deleting 3 posts and 3 images will delete all demo content.

GeneratePress Theme Customization

Now it’s time to customize the Marketer theme. Notice that the theme doesn’t look very nice or attractive even after importing it. However, this theme can be given a very beautiful and attractive look through some settings and CSS changes.

From your home page, click on the Customize option and make the necessary settings as you like. Here are some of our favorite settings.

1. You can set the Title and Tagline of your site in the Site Identity settings. You can also add a logo for the site. But if you use a logo then you must tick the “Hide site title” option. Then only your site logo will be used, otherwise, the site title will also be visible.
2. The layout option is very important. Here you will find important settings related to Site Layout.
3. From the Container option you can give Container Width: 1280 px, Separating Space: 20 px, Content Separator: 1 em, Content Layout: One Container, Content Alignment: Text, Content Padding Top 40, Right 50, Bottom 20, Left 50.
4. Cut the Menu text from the Mobile Menu Label in Primary Navigation, then the Menu text will not be next to the menu in the mobile view.
5. Turn Sticky Navigation On and Transition: Slide. Then the menu will be sticky and slide. If you want to hide the menu while scrolling down the page, then tick the Hide when scrolling down box. Also if you want to use logo in Sticky Menu then you can select Logo.
6. You can enable the Back to Top Button from the Footer option.
7. You can change the color of the place you need from the Colors option. I will change the color of the Primary Navigation so that you can change the color of the Menu Bar in accordance with the Widget of the Sidebar. Which can use: #83b0de, #4bbac2, #3fcdb2 respectively. Since we will be using Custom CSS, we are not changing anything else.
8. You can also change the font and size of the required space from the Typography option. In this case, you can add Poppins Font from the Add Font option. You can change the font of the heading anywhere if you like the font.
9. Add Primary and Footer Bar menus from the Menus option.
10. The widgets setting will not work from here. Element is used in Sidebar, so if you want to do something in Sidebar, you have to do it from the Element option.
11. Homepage Settings work will be discussed below. Because I will give you some Code and CSS to make a beautiful Home Page.
12. Use additional CSS code as needed. Here we will provide the CSS code which will change the design of your site to look very beautiful.

GeneratePress Theme Customised CSS Code

After importing the Marketer theme design from the Site Library, using the CSS code will not change the layout of the site. In this case, the post container, feature image, image, button, headline tag, bullet list, links, etc will be changed which will look very nice and will be liked by the visitors. The most interesting thing is that we don’t need to use any additional plugins to make beautiful and attractive styles. So the theme looks beautiful as well as very light and fast which will easily pass the Core Web Vital score.

Below we have shared the GeneratePress Theme Customized CSS Codes. But even if you use the codes, you have to change several things from Elements and if you want to use any additional options, then below I will discuss the HTML and CSS codes of those additional options and how to add them.


/* GeneratePress Site CSS */
.container-widget, .recentpost, .important, .gb-container-home {
box-shadow: rgba(23, 43, 99, 0.3) 0 6px 18px;
border-radius: 5px;
padding: 30px 25px;}
}
/* End GeneratePress Site CSS */
.content {
margin-left: 75px;
font-size: 30px;
}
.comment-form #url {
display: none;
}
.masonry-load-more a {
font-size: 14.5px;
font-weight: 600;
padding: 8px 25px !important;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
transition: 0.5s;
color: #fff;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 120px;
margin-bottom: 40px;
}
.wp-block-search .wp-block-search__input {
flex-grow: 1;
min-width: 3em;
border: 1px solid #949494;
}
.wp-block-search__input {
border: none !important;
border-bottom: 1px solid #cdd6d1 !important;
background: 0 0 !important;
font-size: 15px;
padding: 5px 2px !important;
}
input:focus-visible {
outline: -webkit-focus-ring-color auto 0;
}
.wp-block-search__button {
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%) !important;
}
.wp-block-search__button {
border-radius: 20px;
font-size: 13px !important;
padding: 8px 20px !important;
text-align: center;
color: #fff !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px !important;
}
.widget_categories ul li::before {
font: var(--fa-font-solid);
content: "\f039";
padding-right: 1em;
color: #49bcc0;
font-size: 18px;
}
.author-box {
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
border-radius: 25px;
}
.author-box .avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
h5.author-title {
margin-bottom: 0.1em;
font-weight: 600;
font-size: 18px;
}
.author-description {
line-height: 1.6em;
font-size: 16px;
}
.author-links a {
margin-top: -1.5em;
font-size: 2em;
line-height: 2em;
float: left;
}
@media (max-width: 768px) {
.author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
flex-direction: column;
text-align: center;
}
.author-box .avatar {
margin-right: 0;
width: 100%;
margin-top: -25px;
}
.author-box .avatar img {
max-width: 100px;
border: 2px solid #10b98e;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -0.1em;
}
}
.page-header-image-single .attachment-full {
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 25px;
}
.comment-respond .comment-reply-title {
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
border-radius: 10px;
font-weight: 600;
color: #fff !important;
font-size: 22px !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
.entry-content figure img {
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
transition: 0.5s;
border-radius: 10px;
box-shadow: rgba(23, 43, 99, 0.3) 0 2px 10px;
}
.entry-content figure img:hover {
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
transition: 0.5s;
}
.entry-content img {
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
transition: 2.0s;
border-radius: 10px;
box-shadow: rgba(23, 43, 99, 0.3) 0 2px 14px;
}
.entry-content img:hover {
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
transition: 2.0s;
}
.attachment-full {
top: 0;
top: -12px;
position: relative;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
transition: 0.5s;
}
.attachment-full:hover {
top: -20px;
transition: 0.5s;
}
.featured-image:hover ~ .size-full {
display: none;
}
.entry-content ul li {
margin: 20px 0;
list-style: none;
margin-left: -20px;
text-decoration: none;
background-image: linear-gradient(transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px), linear-gradient(transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px);
background-size: 0 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 0.3s ease-in-out;
background-repeat: no-repeat;
padding-bottom: 8px;
font-weight: 700;
}
.entry-content a:not(.button):not(.wp-block-button__link):not(.gb-button) {
text-decoration: none;
background-image: linear-gradient(transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px), linear-gradient(transparent 0px, #d8dce9 0px, #d8dce9 0px, transparent 0px);
background-size: 0 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 1.9s ease-in-out;
background-repeat: no-repeat;
padding-bottom: 4px;
font-weight: 700;
}
.entry-content ul li:hover:not(.button):not(.wp-block-button__link) {
color: #10b98e;
background-size: 100% 6px;
}
.entry-content a:hover:not(.button):not(.wp-block-button__link):not(.gb-button) {
color: #10b98e;
background-size: 100% 6px;
}
.entry-content ul li:before {
font: var(--fa-font-solid);
content: "\f140";
margin-left: -1.1em;
padding-right: 0.4em;
color: #4cbac3;
}
.entry-content ol li {
margin: 10px 0;
margin-left: -25px;
text-decoration: none;
background-image: linear-gradient(transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px), linear-gradient(transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px);
background-size: 0 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 1.9s ease-in-out;
background-repeat: no-repeat;
padding-bottom: 8px;
font-weight: 700;
}
.entry-content ol li:hover:not(.button):not(.wp-block-button__link) {
color: #10b98e;
background-size: 100% 6px;
}
.entry-content a:hover:not(.button):not(.wp-block-button__link):not(.gb-button) {
color: #10b98e;
background-size: 100% 6px;
}
.entry-content ol li:before {
margin-left: -1.1em;
padding-right: 0.4em;
color: #4cbac3;
}
.entry-content h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
border-radius: 10px;
color: #fff !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
.entry-content h2 {
font-size: 25px !important;
}
.entry-content h3 {
font-size: 21px !important;
font-weight: 900 !important;
}
.entry-content h4 {
font-size: 17px !important;
}
.entry-content h5 {
font-size: 15px !important;
}
.entry-content h6 {
font-size: 13px !important;
}
.comment-respond .comment-reply-title {
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
border-radius: 10px;
font-weight: 600;
color: #fff !important;
font-size: 22px !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
.gb-headline-65a471be, .gb-headline-3f6e0571, .wp-block-heading {
padding: 10px 10px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
border-radius: 10px;
font-weight: 700;
color: #fff !important;
font-size: 19px !important;
text-align: center;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
.gb-headline-b4fe9595 {
background-image: linear-gradient(to right, #3cd3ad 0, #4cb8c4 81%, #4cb8c4 100%);
}
.gb-headline-d4207768 {
text-align: justify;
}
.gb-headline-ada53e5a {
padding: 4px 4px;
background-image: white;
border-radius: 10px;
font-weight: 500;
color: #fff !important;
font-size: 15px !important;
text-align: left;
}
.gb-headline-7fdf44ff:before {
font: var(--fa-font-brands);
content: "\f198";
margin-left: -1.1em;
padding-right: 0.4em;
color: #4cbac3;
text-align: center;
}
.wp-block-search__input {
background-color: green;
}
.sidebar .widget {
box-shadow: rgba(23, 43, 99, 0.3) 0 6px 18px;
border-radius: 5px;
padding: 40px 25px;
}
.button.light {
background-color: #fff;
border-radius: 50px;
font-weight: 700;
color: #333;
}
.button.light:hover {
background: #333;
color: #fff;
}
@media (min-width: 769px) {
.post-image-aligned-left .gb-block-image img {
margin-top: 0px;
border-radius: 10px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
}
@media (max-width: 768px) {
.post-image-aligned-left .post-image img {
margin-top: -20px;
border-radius: 12px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
}
@media (min-width: 769px) {
.widget-area {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar aside:recentpost {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
}
.orange {
border-radius: 8px;
color: #fff;
text-align: center;
padding: 10px 25px;
width: 200px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
transition: all 0.5s;
cursor: pointer;
margin: 3px 2px;
text-decoration: none;
}
.orange span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.6s;
color: #fff;
}
.orange span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #fff;
}
.orange:hover span {
padding-right: 15px;
color: #fff;
}
.orange:hover span:after {
opacity: 2;
right: 0;
color: #fff;
}
a.gb-button {
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
}
a.gb-button {
font-size: 14px;
padding: 10px 25px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: #fff;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 120px;
}
a.gb-button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
a.button {
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
}
a.button {
font-size: 14px;
padding: 10px 25px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: #fff;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 120px;
}
a.button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.page-numbers:before {
content: "\f101";
font-family: FontAwesome;
padding-right:10px
}
.page-numbers:after {
content: "\f100";
font-family: FontAwesome;
padding-left:10px
}
.page-numbers, .gb-button-67a5ae01, .gb-button-96329c94 {
font-size: 14px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
padding: 10px 25px;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
.gb-button-106b5b32 {
border-radius: 120px;
}
blockquote {
background: #dcdcdc54;
border-left: 5px solid #4cbac3;
padding: 15px;
font-style: inherit;
font-size: 18px;
margin: 0 0 1.5em;
}
/* Style for the code container */
code {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
height:180px;
overflow: auto;
display: block;
font-family: "Courier New", monospace;
font-size: 14px;
color: #333;
}
.sbox {
position: fixed;
top: 50%;
left: 20px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
border-radius: 25px;
overflow: hidden;
background: #fff;
width: 40px;
padding: 20px 2px;
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}
.sbox a {
padding: 15px 5px !important;
text-align: center;
line-height: 15px;
}
.sbox a i {
margin: 12px 5px;
transition: 0.3s;
color: pink;
}
.sbox a i:hover {
margin-left: 10px;
transition: 0.3s;
}
.aforyou-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.aforyou-social-wrapper span {
font-weight: 700;
padding-right: 10px;
font-size: 16px;
}
.aforyou-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.aforyou-social-sharing {
font-size: 17px;
padding: 6px 17px;
display: inline-block;
}
.aforyou-social-wrapper {
margin: 30px 0;
font-size: 0;
}
}
.aforyou-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.aforyou-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.aforyou-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.aforyou-social-facebook {
fill: #fff;
background-color: #3b5998;
}
.aforyou-social-facebook:hover {
background-color: rgba(59, 89, 152, 0.8);
}
.aforyou-social-twitter {
fill: #fff;
background-color: #1da1f2;
}
.aforyou-social-twitter:hover {
background-color: rgba(29, 161, 242, 0.8);
}
.aforyou-social-pinterest {
fill: #fff;
background-color: #bd081c;
}
.aforyou-social-pinterest:hover {
background-color: rgba(189, 8, 28, 0.8);
}
.aforyou-social-linkedin {
fill: #fff;
background-color: #0077b5;
}
.aforyou-social-linkedin:hover {
background-color: rgba(0, 119, 181, 0.8);
}
.aforyou-social-whatsapp {
fill: #fff;
background-color: #25d366;
}
.aforyou-social-whatsapp:hover {
background-color: rgba(37, 211, 102, 0.8);
}
.aforyou-social-reddit {
fill: #fff;
background-color: #ff5700;
}
.aforyou-social-reddit:hover {
background-color: rgba(255, 87, 0, 0.8);
}
.aforyou-float-social-wrapper {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}
.aforyou-float-social-sharing {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
font-size: 12px;
padding: 14px 10px;
}
.aforyou-float-social-sharing:first-of-type {
border-top-right-radius: 10px;
}
.aforyou-float-social-sharing:last-of-type {
border-bottom-right-radius: 10px;
}
.aforyou-social-facebook {
fill: #fff;
background-color: #3b5998;
}
.aforyou-social-facebook:hover {
background-color: rgba(59, 89, 152, 0.8);
}
.aforyou-social-twitter {
fill: #fff;
background-color: #1da1f2;
}
.aforyou-social-twitter:hover {
background-color: rgba(29, 161, 242, 0.8);
}
.aforyou-social-pinterest {
fill: #fff;
background-color: #bd081c;
}
.aforyou-social-pinterest:hover {
background-color: rgba(189, 8, 28, 0.8);
}
.aforyou-social-linkedin {
fill: #fff;
background-color: #0077b5;
}
.aforyou-social-linkedin:hover {
background-color: rgba(0, 119, 181, 0.8);
}
.aforyou-social-whatsapp {
fill: #fff;
background-color: #25d366;
}
.aforyou-social-whatsapp:hover {
background-color: rgba(37, 211, 102, 0.8);
}
.aforyou-social-reddit {
fill: #fff;
background-color: #ff5700;
}
.aforyou-social-reddit:hover {
background-color: rgba(255, 87, 0, 0.8);
}
</code.

Sidebar Widget Setting

You may have used the Custom CSS Codes we shared. But the titles of recent posts in the sidebar are also becoming like headings. Yes, because generally, those titles are H3. Now you need to Edit Sidebar from Element.

If you have the Classic Editor plugin active then deactivate it for some time. Otherwise, you will not be able to modify the sidebar.

In the Sidebar Edit option, you can change Product Highlight and Recent Posts or you can add a new Widget to the sidebar if you want.

Now you can give Product Highlight title, Paragraph and info in it, and links to buttons or remove them if not required.

Then click on any of the Title of Recent Post. Then you will see the settings. Select Paragraph instead of H2 there. Then the color of the Title of Recent Posts in the sidebar will be normal.

To add Category List to Sidebar click on the Plus (+) button and select Heading. Then select Heading Categories. Now click on the three-dot button and click on the Group menu. Then click on the Plus (+) button again to add the Categories List Widget and make the necessary settings.

Update when the element you need is added and see the changes on your site.

Add Social Share Elements In Post Page

Without a nice share option at the end of the post content, the design remains flawed. For this you can use a nice share option. If you can create a nice share option without using any JS or Image File then think how fast your site can load?

Yes, we have included a nice share button here in the customization of this theme. This share option has share buttons on sites like Facebook, WhatsApp, Twitter, Pinterest, Linkedin, and Reddit. So, if you want to use this beautiful share button, follow the code and steps given below.

Get Sharing Code

This CSS code was included in the previous CSS codes.

CSS
.aforyou-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.aforyou-social-wrapper span {
font-weight: 700;
padding-right: 10px;
font-size: 16px;
}
.aforyou-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.aforyou-social-sharing {
font-size: 17px;
padding: 6px 17px;
display: inline-block;
}
.aforyou-social-wrapper {
margin: 30px 0;
font-size: 0;
}
}
.aforyou-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.aforyou-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.aforyou-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.aforyou-social-facebook {
fill: #fff;
background-color: #3b5998;
}
.aforyou-social-facebook:hover {
background-color: rgba(59, 89, 152, 0.8);
}
.aforyou-social-twitter {
fill: #fff;
background-color: #1da1f2;
}
.aforyou-social-twitter:hover {
background-color: rgba(29, 161, 242, 0.8);
}
.aforyou-social-pinterest {
fill: #fff;
background-color: #bd081c;
}
.aforyou-social-pinterest:hover {
background-color: rgba(189, 8, 28, 0.8);
}
.aforyou-social-linkedin {
fill: #fff;
background-color: #0077b5;
}
.aforyou-social-linkedin:hover {
background-color: rgba(0, 119, 181, 0.8);
}
.aforyou-social-whatsapp {
fill: #fff;
background-color: #25d366;
}
.aforyou-social-whatsapp:hover {
background-color: rgba(37, 211, 102, 0.8);
}
.aforyou-social-reddit {
fill: #fff;
background-color: #ff5700;
}
.aforyou-social-reddit:hover {
background-color: rgba(255, 87, 0, 0.8);
}

How To Add Sharing Buttons In GeneratePress Theme?

First of all, it is not made using any JS or Image File and it is not a plugin. So to add this sharing option to your site you need to edit the code of your theme. Editing the theme’s code is risky, so try the method described here.

• First, go to your site file manager > public_html > wp-content > themes > generatepress folder from your hosting or cPanel.
• Then, open or edit the file named content-single.php.
• Now, Find “the_content();” and save it by pasting the mentioned codes of sharing option at the end of that </div> tag.

• Then these beautiful share options will be added at the end of your post.
• And if you can put the share option at the beginning of the post then paste the code before the <div> of “the_content();” and save.

Customize Home Page With Category Wise Posts

Want to design your Generatepress Theme’s homepage beautiful and attractive? I have shared a nice customized front page code for you. Using the codes, you can easily make the homepage in Generatepress Theme like the image above. Below is everything you need to do to customize your homepage.

• First, create a page by clicking on the Add New menu from the “Pages” option.
• Then give the Page Title “Home”.
• Then, go to the “Text” option from the “Visual” and “Text” options of your editor and paste the “Custom Homepage” codes provided by us.

Now, change the “Title“, “Category Term ID” and “View More Link” of our codes. You can increase the Category Post Widget according to your needs. The complete code of a Category Post Widget is given before and after the line ”<– Next –>” for easy understanding. Moreover, we have provided both Post Thumbnails and Only Post Title designs in the code so that you can use them wherever you want.

You can find any Category Term IDs from the Category edit page. Follow the image.

Finally, to set your page as Homepage, select the page as A Static Homepage from Reading Setting. Then the page will be displayed as your homepage.

Add Pagination Option For Category and Tag Archive Pages

One issue you may have noticed or are looking for a solution to is that GeneratePress Marketer Theme does not have pagination or page numbers. So, if there are a large number of posts in a particular category or tag, the page becomes very large and long. So Pagination or number of pages is important so that a certain number of posts are on the first page and the rest gradually move to the next page. So let’s see how to add pagination to your Generatepress Theme.

• First, Deactivate the Classic Editor if it is active.
• Then, go to the Elements option of Appearance and click on the Edit button of the “Blog/archive loop template” page.
• Then, open as Code Editor, select all the codes, and replace the codes given here (Get GP Blog/archive loop template With Pagination Codes).
• Then Pagination will be added to Default Home Page, Category, Tag, and Search Pages on your site.

Fix Fontawesome Fonts or Icon Loading Properly

Font Awesome Fonts may not display correctly when using GeneratePress Theme Customization & Style CSS Codes. In this case, you need to use fontawesome’s JS Script in the Head option of the theme.

• For this, Add New Element from Elements of Appearance.
• Select Hook as the element type and click Create.
• Give a Title and paste your fontawesome js script code.
• In Setting, Hook=wp_head, Priority=10 (deafult), Select Location=”Entire Site” in Display Rules.
• Finally, Publish the Element.

Remember that in the same way, you can add all the Head Codes of your Generatepress Theme such as Google Adsense, Analytics, etc verification codes.

Conclusion

I have tried to present here all the things that are required in GeneratePrash theme customization. Hope you have successfully completed all the steps by reading the entire article. However, if you have any issues beyond the discussion in this article on GeneratePress theme customization, you can let me know. I will try to solve your problems or if I know the solution I will share it with you. If you benefited from this article then share our post and help me with a backlink to my site on your site.