Add a tagline

The tagline is there, but the author chose to hide it. To make it visible, add the following CSS. I’ve also included some additional styling declarations since when I made it visible, it came in nearly the same size as the site title.

.site-description {
    display: block;
    font-size: 16px;
    margin-top: 10px;
}

I added it, but nothing happened. I put it in this position in the css file. Did I do something wrong?

Many thanks for any help.

Sorry, forgot to add the placement. I put it in the middle of .site-header and .site-content. No results.

.site-header:after {
clear: both;
}

.site-description {
display: block;
font-size: 16px;
margin-top: 10px;
}

.site-content:before,
.site-content:after {
content: ”;
display: table;
}

Can you post a link to your site?

on localhost

If you added the code where I think you added it (around line 360 or so), then what’s probably happening is that the code that hides the site description is defined later in the stylesheet (around line 970 or so), and because of the way CSS works, the rules defined later in the file “win”. Your best bet would be to add the code that sacredpath suggested using a custom CSS plugin. That way, the changes will apply correctly because the plugin will load after the stylesheet, and you also won’t lose those changes if the theme is updated in the future.

Hi @susan-bates: @stephencottontail got it right. ??

To back up his points:

The provided CSS should be added using a custom CSS plugin or by creating a child theme. You should never edit your theme style.css directly as your changes will be overwritten when updates.

Thanks for that info – worried about creating a child theme while working on localhost– worried that will not have access to editor–this happened when I enabled multiple sites (Not having access to editor) and I think I read somewhere that the same thing happens when working on a child theme in localhost. Is this true?

When working with the multiple sites, I ended up having to delete the database and start over from scratch. I’m worried I’ll have to do the same thing again if I make a child theme.

Hi Susan,

You should not lose access to the editor after enabling a child theme, no. You’ll still be able to access and edit files from your admin area, but will first need to duplicate them from the parent theme.

If you’re concerned though, a custom CSS plugin will work just as well for what you’d like to accomplish. ??

Hi, I upgraded to hosting to make the child theme, but I am having problems. I created a style.css and functions.php file in the root directory of sketch-child, but the dashboard tells me that the theme is broken because the stylesheet is missing.

I used this info for styles
/*
Theme Name: Sketch Child
Theme URI: https://jennifer.deliciousdesign.ca/sketch-child
Description: Sketch Child Theme
Author: Susan Bates
Author URI: https://deliciousdesign.ca
Template: sketch
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: light, full width, two-columns, right-sidebar, responsive-layout, accessibility-ready, portfolio
Text Domain: sketch-child
*/

and this info for functions
<?php
function theme_enqueue_styles() {

$parent_style = ‘parent-style’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
?>
<?php

I got this info from www.ads-software.com – how to create a child theme. Upon reading it said that if your theme has two stylesheets, you have to enqueue them separately, but I have no idea how to do that. The other stylesheet is rtl.css

Please help.

Next I tried changing the functions.php to the simple version on the WP Codex page but still get the same error – stylesheet is missing

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}
?>

Hi @susan-bates: The code you’ve entered to each file looks correct.

The error you’re seeing could indicate that the extension for your style sheet is incorrect. Can you please double check the extension for each file? It should be: style.css and functions.php.

Thanks. It was the style.css that was wrong. I had it as styles.css.

I don’t know which php script is preferable in the functions.php file. Now I have the shorter one.
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}
?>

But is the longer one better?
<?php
function theme_enqueue_styles() {

$parent_style = ‘parent-style’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
?>
<?php

Or should I put both?

Also, now that I am working on a child theme as you suggested, I no longer have access to the editor for the Sketch files. Only the new style.css shows in my dashboard and when I try to make changes to it, it doesn’t work, I have to use a custom css that comes with Jetpack, so what is the point of a child theme? I can’t change the styles with the new stylesheet and I can’t see the old files from the original template and I can use Jetpack CSS and not have these files overwritten.

Can I import the parent stylesheet into my child theme because it and all the other files such as footer.php, which I wanted to change were not there.

Hi there,

I don’t know which php script is preferable in the functions.php file. Now I have the shorter one.

The first shorter script will work with Sketch. The second script is helpful in cases where the parent theme’s stylesheet can’t be correctly loaded with the first script.

Also, now that I am working on a child theme as you suggested, I no longer have access to the editor for the Sketch files.

All of the code for your parent theme will still load even with the child theme active. The child theme’s code will load after and effectively override certain parts of the parent theme.

My colleague, Kathryn, did a great talk on child themes that I’d encourage you to watch here:

To steal from her recipe metaphor:

• A parent theme is comparable to a master recipe. An example of a master recipe is one for brownies.
• A child theme is comparable to a variation of the master recipe. For example, mint brownies would be a variation of the recipe for brownies.
• To make mint brownies, you would follow the master recipe but add mint extract and take away vanilla. The master recipe is still used and needed but we “override” the parts of it we wish to change.

To take this back to your child theme:

• All of the main code for Sketch is still going to be loaded.
• You can add CSS to your child theme’s style.css file to override parts of the parent theme’s style.css.

The only CSS that needs to be added to your child theme’s style.css, in order to display your site’s tag line, is the snippet provided by @sacredpath.

Let me know if that makes sense or if you have any further questions on how child themes work.