7 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
richardsonweb says

Hi all, new to ThemeForest but I’ve making custom Wordpress themes for clients for a few years now.

One thing that’s stumped when starting a new theme to pop up onto TF is how to allow users to edit the CSS from the admin panel. I understand how to create the actual admin section that contains the available options, but I’m curious as to the best way the CSS file can be changed via code to reflect user input.

Is there a common way of achieving this? If so, could anyone point me in the direction of some useful resources such as tutorials or articles? Or does anyone just have a helpful tip they wouldn’t mind sharing with me?

Thanks in advance!

1509 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
OriginalEXE says

Hi,

I believe the most simple and right way is option filed in admin + http://codex.wordpress.org/Function_Reference/wp_add_inline_style

3752 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in Spain
  • Has sold $125,000+ on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+9 more
pezflash says

Talking as a TF user who buys WP themes for my own clients, i believe Child theme is the best practise. http://codex.wordpress.org/Child_Themes

I’ve never used the built-in custom CSS option that some themes includes.

1509 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
OriginalEXE says

Talking as a TF user who buys WP themes for my own clients, i believe Child theme is the best practise. http://codex.wordpress.org/Child_Themes I’ve never used the built-in custom CSS option that some themes includes.

Child theme is the best practice, but most of the buyers don’t (know/want) use it.

399 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
EugeneO says

Child theme is the best practice, but most of the buyers don’t (know/want) use it.
I always recommend buyers to use a child theme (there are explicit instructions in my documentation) and I have never had anyone complain or refuse. Explain why they should use a child theme, tell them how to use a child theme and even include a skeleton child theme and there is no reason why they wouldn’t.

In my themes I have a textarea in the theme options that can be used for small pieces of CSS that are added to the page head using wp_add_inline_style(). Other than that I believe the Child Theme route is best. As for the OP’s specific question about editing files, if the user is not using WordPress multisite they already have access to the built in file editor (Appearance > Editor). Why reinvent the wheel?

7 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
richardsonweb says

Thanks for the quick responses guys.

On a similar note, what if I gave the user an option to, let’s say, change the global font of the site from the admin panel. What would be the best way to alter the CSS file in order to change that?

80 posts
  • Has been part of the Envato Community for over 1 year
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
eriktailor says

Thanks for the quick responses guys. On a similar note, what if I gave the user an option to, let’s say, change the global font of the site from the admin panel. What would be the best way to alter the CSS file in order to change that?

I think changing a font should be a separate option, it isn’t an elegant solution to force the user (who may don’t know css) to do modifications in the code.

7 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
richardsonweb says

I think changing a font should be a separate option, it isn’t an elegant solution to force the user (who may don’t know css) to do modifications in the code.

That makes a lot of sense. Any suggestions about the best way to achieve this?

80 posts
  • Has been part of the Envato Community for over 1 year
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
eriktailor says


I think changing a font should be a separate option, it isn’t an elegant solution to force the user (who may don’t know css) to do modifications in the code.
That makes a lot of sense. Any suggestions about the best way to achieve this?

Well it’s hard to tell how to do it, i can suggest to start your theme with building on an option framework (i’m using option- tree) and after a while you’ll see through the process of using a framework and i’m pretty sure about you will get an idea about how to integrate webfonts as an option . Experience comes with practicing :)

7 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
richardsonweb says

OptionTree looks like a fantastic place to start. Thanks so much for your help eriktailo!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by