Categories
Free Tutorials Genesis Tutorials

Show Site Description After Header Image In Gallery Pro

This tutorial shows you how to display the site description ( tagline ) when a header image ( logo ) has been added. Generally, when you add a header image or logo, the site description & site title are hidden. In the Gallery Pro child theme by Bloom, its coded differently.

Here’s the result :

Coding #

There’s 2 steps relating to modification of the code inside the Gallery Pro theme folder :

Step 1 – Go to gallery-pro > inc > genesis-changes.php and remove or comment out the following line of PHP code on or around line 42 :

remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

Step 2 – In the gallery pro themes style.css file, find the following CSS between lines 1198 – 1202,

.header-image .site-description, 
.header-image .site-title a {
	display: block;
	text-indent: -9999px;
}

and replace it with this CSS :

.header-image .site-title a {
	display: block;
	text-indent: -9999px;
}

.site-title {
    margin-bottom: 10px;
}

Clear caching if the changes aren’t showing.

Categories
Genesis Tutorials

Change Genesis Site Description – Tagline Conditionally

This code enables you to use any conditional tag to change the site description which some people refer to as the tagline. In this example, the site description is changed on one specific single page named Demo. The slug for this page is demo however you could also use the page id.

Here’s the part of the code which controls which page the site description is modified.

is_page( 'demo' )

You can replace this conditional with any other to target specific pages, posts, archives etc.

Here’s the demo video showing a very simple example of how the site description is modified on the page named Demo.

Demo Video

Shows a custom site description when the demo page is loaded.

Note : The code also enables you to modify the site description on all/any single posts/pages, blog listings page, author, category, search, and tag archive page types. Support for this is included for registered users.

Code Installation

There’s only 1 step :

From the download folder, copy & paste the PHP code to the end of your child themes functions file.

Register or login to access the code in the download folder :

Categories
Genesis Tutorials

Minimum Pro Custom Site Description & Tagline Right CTA Button

The code in this tutorial extends the solutions in this tutorial and enables you to add a custom site description within the site-tagline-left div as well as a custom CTA button with custom button text on any single post or page. If no custom tagline is added, the default displays.

Code Installation

There’s only 1 step :

Replace the default code in the Minimum Pro themes functions file between lines 93 – 110 with the code from the functions file in the download folder for logged in users below.

Setup

After you install the code, create a custom field named tagline to change the site description and a custom field named tagline_right to change the button text and link as seen in the following screenshot :

Register or login to access the download folder :

Categories
Free Tutorials Genesis Tutorials

Site Title & Description After Logo In Genesis Sample

This CSS enables you to add your logo image via the header image setting in the customizer and also display your site title and tagline after the logo like this :

Tested using the Genesis Sample child theme by StudioPress.

Add the following CSS rules to the end of your child themes style.css file and clear caching :

.header-image .site-description,
.header-image .site-title {
	text-indent: 0px;
	text-align: center;
}

.header-image .site-title a {
    padding-top: 210px;
    background-size: auto !important;
}

Note : Assumes uploading a image which is 150px in height otherwise you may need to modify the above CSS.

Related Tutorials

Categories
Genesis Tutorials

Show Custom Menu, Title, Tagline & Header Widget On All WooCommerce Pages

This code enables you to display a completely different header area for all your WooCommerce pages. Here’s a example showing the default header area and custom header area which only displays when a WooCommerce page displays:

You can change the following on all WooCommerce pages and display a different:

  • Primary Nav Menu with WooCommerce pages only
  • Site Title
  • Site Description
  • Header Right Widget

You can also change the site title link to any URL.

You will need to create a new menu named woocommerce-menu and assign it to the WooCommerce Menu Display location as seen in the following screenshot:

You’ll also find a new widget area on the widgets admin page named WooCommerce Header Right. You can change the site title and description text in the code.

Here’s the demo video:

Tested using the Genesis Sample child theme by StudioPress.

Here’s the code for logged in members:

Categories
WordPress Plugins

Change Site Description Based on Language Using qTranslate-X Plugin

The qTranslate-X plugin language selector changes the language code in the HTML page source. This enables you to use code to display different site descriptions when different languages are selected.

The code in this tutorial enables you to display a different site description ( tagline ) when any language is selected.

The code examples work for Dutch & English however you can change the language code to any other languages.

There’s several ways to write the code included below for logged in members:

Categories
Genesis Tutorials

Show Different Site Description Based on Language Setting

This code works based on the language you set in Settings > General > Site Language. The language you set will output in the HTML source code which you can view in Chrome by right clicking > View Page Source which generates a HTML document like this:

html

Note: The code changes the site description ( tagline ) on the front end but not in the HTML of the page source.

In this example, it displays a different description when the site language setting is set to French like this:

site-langauge

It replaces the site description set in Settings > General > Tagline:

tagline

Here’s the code for logged in members:

Categories
Genesis Tutorials

2 Ways To Add Social Icons After Your Site Title in Genesis

This code enables you to display your social follow icons after your site title in Genesis.

Here’s the result without any CSS for styling added:

icons-after-title

The code in this download provides 2 different solutions you can choose from.

Tested using the Simple Social Icons plugin by StudioPress.

Here’s the code you simply paste in your child themes functions file:

Categories
Genesis Tutorials

Add Widget After Site Title in Genesis Replacing Description

This code enables you to display a widgets content after the site title conditionally.

In this example, it only displays the widgets content ( search widget ) on any page using the landing page template.

widget-after-title

You can easily change the conditional tag to return a different result:

Simply add the following PHP code to the end of your child themes functions.php file.

Related Code

Categories
WordPress Themes

Add Background Image To Minimum Pro Themes Tagline

This tutorial simply shows you how to add an image to the background of the site tagline area in the Minimum Pro child theme by StudioPress.

Here’s the default tagline without any customization to the taglines CSS:

default

Lets add this CSS to the very end of the child themes style.css file:

.site-tagline {
    background-image: url('images/bg.jpg');
}

And this is what the CSS produces:

add background image to minimum pro theme

Lets change the color of the font and add a semi transparent background to the text.

.site-tagline p {
    background-color: rgba(0, 0, 0, 0.8); 
	padding: 20px;
	color: #fff;
    font-weight: bolder;
}

You can play around with the 0.8 to change the background color.

minimum pro

Here’s what 0.6 produces:

background transparency

Related Tutorials

Categories
Genesis Tutorials

Add Logo Above Tagline/Description In Genesis

This PHP code enables you to show your logo on top of your site description/tagline.

Simply upload your logo to your child themes images folder.

Copy the PHP code from the view raw link in the Gist and paste it at the end of your child themes functions.php file.

The code assumes your image is named logo.png otherwise change the path to your image in the code.

Categories
Genesis Tutorials

Remove Genesis Site Description Conditionally

Both these code snippets include a conditional tag which removes the site description from the front page.

You can modifiy, replace or add to the conditional tag based on your own needs.

Alternatively, you could also use code like this to return something else conditionally. In this example it simply returns the description.

If you prefer using CSS code, you can grab the post/page i.d or template class from the body classes in your source code and use it in a new rule like this:

.home .site-description {
display: none;
}
Categories
Genesis Tutorials

Add Clickable Site Description With Custom Font

In this tutorial, i’ll provide the PHP and CSS code you can use or modify to make your sites description clickable.

All you need to do is hook in a new tagline with link and add some styling.

Please paste this code at the end of your child themes functions.php file.

remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

function custom_site_description() { 
    echo '<div class="custom-description"><p style="text-align: center;"><a href="http://yourdomain.com/link/">Add Your Site Description Here</p></div>';
};

add_action( 'genesis_site_description', 'custom_site_description' );

Remove the HTML from the code that centers the text if needed.

<p style="text-align: center;">

You can easily create a description in a new post draft and even center and style it before adding it to the above code. Or add all the styling using CSS.

Next step is to add some styling.

.custom-description {
    font-family: 'Oswald',arial,serif;
    font-size: 24px;
    font-weight: normal;
    margin: 0;
    text-shadow: 1px 1px 1px #070707;
}

This CSS uses a custom Google font named Oswald which you’ll need to add to your child themes functions.php file using some PHP code.

add_action( 'wp_enqueue_scripts', 'wpsites_load_google_font' );
function wpsites_load_google_font() {
	wp_enqueue_style( 'google-font', 'http://fonts.googleapis.com/css?family=Oswald:400', array(), CHILD_THEME_VERSION );
}

Grab your own web font from Google and replace the url in the PHP code above to suit your style.

Filter Site Description & Add Link

You can also use the genesis_seo_description filter to modify the output of the default description and add a link to any url.

Related Code