Wordpress Setting Default Fonts and Colors

I am about 3 months into figuring out wordpress (trying to). I have installed, customized, deleted and reinstalled many times over to get more and more comfortable with it and in using the "customize" sections of themes. The one thing that seems very clear to me is that different themes allow you to customize different aspects of fonts and colors. Some allow easy customizing to most aspects while  other themes do not allow a lot of customizing and also not so easily.

I have found that I spend a lot of time messing around with fonts & colors for all the various different aspects of the site (background, main text, button text, hover-over text, banner text, menu text, et.c etc.). So my question is this is there an easier way to add ccs code or some other mechanism to create a list of all these various features that need to be stipulated each time I reinstall or change a theme so that I have a sort of master file that I can use each time, something that stipulates what fonts and colors I want for all these features? Thank you.
LVL 26
Lionel MMSmall Business IT ConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David FavorLinux/LXD/WordPress/Hosting SavantCommented:
I think maybe this will assist.

https://wordpress.org/plugins/custom-css-manager-plugin/ which allow CSS to be injected into your site.

Be sure to comment which CSS goes which theme/plugin, as CCS persists across theme/plugin removal/change, so you can input your CSS once + toggle between different themes/plugins + retain your CSS.

This plugin allows very quick flipping between themes/plugins to test layout, without have to code up child themes or custom plugins.
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
I found SiteOrigin CSS last night and it works, even allows me to copy and save. Will check out your suggestion and see how it works--thanks
0
Andrew DerseOwnerCommented:
SiteOrigin is AMAZING! In my opinion at least.

They have some really solid free themes that work as a good base for you to do your development.

If you are looking to build and customize themes, their stuff is the way to go.

Me, I just keep some default.css sheets in a main folder on my computer (and in the cloud) and for each new theme I'm working with, I use theme. Here's my method.

1) Install main theme.
2) Create child theme off of main theme.
3) Drop in css into style.css file and viola...styles, colors, etc, are there.

If you want your clients to be able to select their own colors for the theme ( once you are finished with their site ) then I recommend installing Advanced Custom Fields and setting up an options page. This way you can give you clients incredibly control over their site.

Hope this helps :)
0
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Lionel MMSmall Business IT ConsultantAuthor Commented:
can you give me the details on your approach please--like the sound of that
1) Install main theme.
2) Create child theme off of main theme.
3) Drop in css into style.css file and viola...styles, colors, etc, are there.
0
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
https://codex.wordpress.org/Child_Themes covers details of building child themes.
0
Andrew DerseOwnerCommented:
Absolutely. This is the basics of WordPress theme development.

So, here's literally what I do and you can do this based on any theme you can find.

1) Install any theme and activate it.
2) Create the child theme.

To do this you will need to setup at least 2 files and 1 directory.
So say you are using twentyseventeen as your main theme, then create a directory called twentyseventeen-child or literally whatever you want to call it...could be...mycustomtheme for what it's worth.

Then create 2 files: functions.php and style.css

So now you should have this in your site:

wp-content/themes
wp-content/themes/twentyseventeen/*
wp-content/themes/mycustomtheme
wp-content/themes/mycustomtheme/functions.php
wp-content/themes/mycustomtheme/style.css

In the styles.css you need to have this code, but change it to your specs:
/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/

Open in new window


The biggest part to keep an eye on is the Template: tag...that tells WordPress to look at the twentyseventeen theme to pull it's css and code.

In the functions.php you need to have this code at a minimum.
<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.

    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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Open in new window


Always check out the WordPress Codex when you need help. Here's the Codex for Child Themes:
https://codex.wordpress.org/Child_Themes

Finally, drop any css changes you need to make within the style.css file.

If you need to modify the page structure of any pages...
Copy the page.php file from the twentyseventeen theme into your mycustomtheme folder and rename it to: page-mycustompage.php where the mycustompage is the slug of the page you need to work with.

Hope this helps.
1
Andrew DerseOwnerCommented:
Sorry, David beat me to posting that as I was giving a super detailed how-to ;)
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
OK since reading your comments and reading the provided link and trying to replicate this for myself I am still struggling a bit. You have likely given me the answer but I am just not recognizing it so allow me to ask this another way. This process of creating a child theme will allow me to copy the section(s) that deal with background color, main text font family & size & color, heading text font family & size & color, menu text font family & size & color, etc. and then copy that customization from one child theme's css to another child theme css? Is that right? So there is no process that allows me to create a "master css" that will govern all themes that I switch to and switch back and forth to & from without adding these customization to each child theme's css? Is that right? Thank you.
0
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Correct.

Also Child Themes go much further.

You can package up a custom functions.php file + all sorts of other files to dramatically effect behavior.

Likely good for you to read through WordPress Functionality Plugins which provides a great table with suggestions on how to inject different types of code into your site.

Some code is best done via Child Theming, other coding best done via Functionality Plugins or custom plugins.
1
Lionel MMSmall Business IT ConsultantAuthor Commented:
David, does that include the items I mentioned--they are not mentioned in your link or in the link from one of the comments it. For right now, as a relative beginner, I want to decide on fonts, size, and colors and use those same choices as I try out different themes. as an aside comment it is baffling to me that most themes default fonts are just horrible--most are not clear and clean. thanks
0
Andrew DerseOwnerCommented:
I agree with David.

In my experience, it's best to stick with a base theme as your starting point. I build one theme and only one theme, 1000 different ways, but it's always starting the same way.

I'm guessing here, but it looks like you might be trying to setup a way to model different possibilities for potential clients to show them a potential style of site they might like, but you want to keep the same css styles running on them, right?

Might want to look into Oxygen or a staging plugin where you can build templates on WordPress to quickly display what's in your head for your clients...just a thought.
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
No I am not trying to create something to sell to multiple clients--all I am trying to do is to find a way that when I switch from one theme to another that I can do something quick and easy to make the fonts, font sizes & fonts colors what I have found I like most without having to go to the customize theme section of each theme and change each feature one by one and theme by theme. The idea forwarded by David Favor looks good but my follow-up question was if that concept he talked about can be used for what I am asking about -- I could not find them mentioned in the example links provided (background color, main text font family & size & color, heading text font family & size & color, menu text font family & size & color, etc) .
0
Andrew DerseOwnerCommented:
I understand what you are trying to do, but I honestly have never seen anything like that in the WordPress area and here's why.

Each theme is so unique and is written by different authors using different code and frameworks.

Some use twig files to render, some follow the wp codex, some do their own thing entirely.

I honestly don't think there's going to be a solution for what you are looking for. I've worked with WordPress for several years and there's just nothing out there that does this for the reason I mentioned above. Each theme is so unique, that is the blessing and curse of WordPress themes.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Lionel MMSmall Business IT ConsultantAuthor Commented:
OK thanks -- back when I used to work with NetObjects (20 years ago) there was some html code I used to put in the header or body (can't recall--haven't done that kind of work for 20 years now) and that would set all the colors, fonts and font sizes -- I guess I was hoping for something similar -- this is not my IT skills area -- doing this site as a favor for my family and now living to regret it -- thanks for the time and input anyway -- thanks you.
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
I really like the plugin suggested by David as it seemed it MIGHT do what I wanted https://wordpress.org/plugins/custom-css-manager-plugin/ but with security at a premium these days and since it has not been updated in over 2 years I am too scared to use it in a production website. However Andrew confirmed that what I was looking for really isn't possible and the best "solution" was for me to use the "child-theme" concept to minimize customization as I test themes and although I ahven't had the time to test this it does seem a compelling solution. Thanks for your time and suggestions.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.