Welcome! To use this support forum, please Login or Join Today!

   

Customizing Lightfast - Best Practice

{name}
Rank

Total Posts: 1

Joined 2014-08-31

PM

 

Hello,

Can you please advise how to change the giant size for a Heading 1?

Thanks

John

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

The font sizes aren’t part of the theme options typography in Lightfast. You can, however easily change by going to:

Appearance → Editor and add the following line (for example):

h1 {
 font
-size24px;
{name}
Rank

Total Posts: 1

Joined 2014-08-31

PM

 

Thank you Casey.

Wouldn’t I need to change an existing setting in there rather than add new?

Also, can it go anywhere?

Next, what is the code code used for the title of a blog post?  Is that also h1 or something else?

Finally, what happens when the theme is updated?

Sorry for the dumb questions, I’m a newby to customizing a theme!

Cheers

John

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi John,

You are correct in that the H1 rule is originally declared in the parent theme style.css which is imported into the child theme style.css.

CSS is “cascading” so for simple customizations/overrides as such, it isn’t very expensive to add a few lines below the initial parent theme @import. If your customizations are extensive, you can certainly remove it and copy over the entire contents of the parent theme into the child theme stylesheet. Just be sure you don’t change or remove this portion:

*
Theme NameLightfast Child
Theme URI
http://www.simplethemes.com/wordpress-themes/theme/lightfast
DescriptionLightfast Child theme. Use this child theme to safely make modifications to the existing themeUsing a child theme ensures that you do not lose the modifications with theme updates.
Version1.0.0
Author
Simple Themes
Author URI
http://www.simplethemes.com
Templatelightfast
*/ 

The important bit here is the “Template: lightfast” line. This associates the functionality to the ‘lightfast’ parent theme.

You’ll also notice some comments that further explain how CSS customizations can be implemented:

/*
----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------

This child theme enables you to make customizations while allowing for safe updates to the parent theme.
The parent theme's style.css is imported below. If you wish to make customizations, do one of the following:

Option A.) Remove the import below, and copy the contents of lightfast/style.css into this file, but leave the (above) child theme head in tact!
Option B.) Add specific rules BELOW the import. This is intended for minimal customizations.

----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------

*/ 


As with CSS, virtually anything else can be overriden. For example, if you need to customize one of the template files, you can just copy it into the child theme directory and WordPress will use it instead of the parent theme version.

As for updates, the parent theme is completely overwritten on update. So all your customizations should be done at child theme level.

If you just need to customize a small chunk of code, most of the template files use hooks and conditionals to bring in pieces of code defined in functions.php.

Here’s a basic example. In the parent theme functions.php we have this code:

/*-----------------------------------------------------------------------------------*/
// Opening #header
/*-----------------------------------------------------------------------------------*/

if ( !function_exists'skeleton_header_open' ) ) {

    
function skeleton_header_open() {
        
echo '<div id="header">';
        echo 
'<div class="container">';
        echo 
'<div class="sixteen columns">';
    
}
    add_action
('skeleton_header','skeleton_header_open');

To override this, you’d simply add this function to your child theme functions.php:

/*-----------------------------------------------------------------------------------*/
// Opening #header
/*-----------------------------------------------------------------------------------*/

function skeleton_header_open() {
    
echo '<div id="header">';
    echo 
'<div class="container">';
    echo 
'<div class="sixteen columns">';
    echo 
'<div>...Look, a custom div tag!...</div';
}
add_action
('skeleton_header','skeleton_header_open'); 

Notice we removed the function_exists() wrapper. Because the child theme is scanned first, the parent theme function never gets fired, hence allowing the child theme to override it.

The last line is where the real magic happens:

add_action('skeleton_header','skeleton_header_open'); 

Because in our header.php you’ll find this line:

do_action('skeleton_header'); 

This is just a simple example to demonstrate how you could customize the header without completely overriding the parent theme header.php template file.

You can look at the parent theme functions.php to see all the overridable functions and hooks used throughout.

I hope this helps. Let me know if you have any questions along the way.