Dynamically Add Stylesheet? WordPress
- SOLVED
Hi,
I am creating a Premium WordPress theme. The theme comes in 3 different color schemes. I need help figuring out a way to dynamically add a style sheet to the theme (just for display purposes).
So, essentially i'll have 3 links (on another site) that will say Blue, Black, and Brown. When the user clicks either link it should open up the site in the correct color scheme, and every page should remain in that color scheme.
I have 3 stylesheets already created:
- master.css
- black.css
- brown.css
- master.css is the master stylesheet so it must always be in the head. It is also the Blue color scheme, so blue is pretty much already setup. They will click blue, and the site will load like normal with the master.css being called in the head.
- black.css and brown.css are the other color schemes. When a user clicks Black, black.css will need to be added to the head of the site below master.css. When they click brown, brown.css will need to be added to the head of the site below master.css.
I don't know if dynamically adding a stylehseet is the right way to go about it, so I am up for any ideas you might have.
Thank you in advance for all of your help.
Answers (3)
Buzu B answers:
You can send the color of the scheme via GET and then on wp catch it. Since it is just for display purposes, (I'm guessing you are selling a theme in three different colors or something like that) you can set a session variable holding the name of the CSS file and check every load of the page for that variable. If it is set, you just load the CSS file that corresponds, otherwise, you just load the primary css file.
It is quite simple to implement once you understand the idea. If you want me to guide you through the process, just let me know.
WP Answers comments:
Hi Buzu,
Sorry about the delay on my end. I really like this idea and I would like you to please walk me through the process.
Thanks.
Buzu B comments:
OK, so it is a really simple process.
First thing you have to do is to create your style sheets. In my case, I created two simple style sheets which I called optional_1.css and optional_2.css. I saved them on my current theme's directory. In my case, I have thematic so I saved theme under
wpinstalationsfolder/wp-content/themes/thematic/optional_1.css
wpinstalationsfolder/wp-content/themes/thematic/optional_2.css
The I opened header.php which is also in my theme folder, and edited as follows.
At the very top (this is important) of the file I added:
//ADED BY BUZU
session_start();
if($_GET && isset($_GET['style'])){
$_SESSION['style'] = $_GET['style'] . '.css';
}
if($_SESSION['style']){
$styles = $_SESSION['style'];
}
//END ADDED
Then, Just before the closing header tag (</header>) in the same file I added:
//BY BUZU
if(isset($styles)){
echo "<link href='http://localhost/pruevaswp/wp-content/themes/thematic/$styles' rel='stylesheet' type='text/css' />";
}
//END By BUZU
You can see I hard coded the rout to my css files folder here. You can optionally use some of the wordpress functions to get this value, but I preferred to hard code it since it is something that is not likely to change.
Now the calling links are something like this:
<a href="/rout/to/your/wpsite/?style=optional_1">link</a>
you can change the optional_1 for the name of the style sheet you want to apply. For example If the style sheet you want to apply is called brown.css, you would do like this:
<a href="/rout/to/your/wpsite/?style=brown">link</a>
That works well for me, let me know if you have any problem.
Buzu B comments:
My header file looks like this, the important parts are the ones that are marked as added by me, the other stuff is more likely to be different depending on your theme:
<?php
//ADED BY BUZU
session_start();
if($_GET && isset($_GET['style'])){
$_SESSION['style'] = $_GET['style'] . '.css';
}
if($_SESSION['style']){
$styles = $_SESSION['style'];
}
//END ADDED
// Creating the doctype
thematic_create_doctype();
echo " ";
language_attributes();
echo ">\n";
// Creating the head profile
thematic_head_profile();
// Creating the doc title
thematic_doctitle();
// Creating the content type
thematic_create_contenttype();
// Creating the description
thematic_show_description();
// Creating the robots tags
thematic_show_robots();
// Creating the canonical URL
thematic_canonical_url();
// Loading the stylesheet
thematic_create_stylesheet();
// Creating the internal RSS links
thematic_show_rss();
// Creating the comments RSS links
thematic_show_commentsrss();
// Creating the pingback adress
thematic_show_pingback();
// Enables comment threading
thematic_show_commentreply();
// Calling WordPress' header action hook
wp_head();
//BY BUZU
if(isset($styles)){
echo "<link href='http://localhost/pruevaswp/wp-content/themes/thematic/$styles' rel='stylesheet' type='text/css' />";
}
//END By BUZU
?>
</head>
<?php
if (apply_filters('thematic_show_bodyclass',TRUE)) {
// Creating the body class
?>
<body class="<?php thematic_body_class() ?>">
<?php }
// action hook for placing content before opening #wrapper
thematic_before(); ?>
<div id="wrapper" class="hfeed">
<?php
// action hook for placing content above the theme header
thematic_aboveheader();
?>
<div id="header">
<?php
// action hook creating the theme header
thematic_header();
?>
</div><!-- #header-->
<?php
// action hook for placing content below the theme header
thematic_belowheader();
?>
<div id="main">
WP Answers comments:
Dude, you are seriously the man. It works like a charm. Thank you once again for your help here. I have learned a ton of new awesome stuff thanks to you.
I have one last thing I need help on before I am finished with my first premium WordPress theme. I need to get back to work right now, but I will be posting the other issue later tonight.
It has to do with a custom admin panel. I have everything created and setup but when I go to save it says I do not have permission. I will post more details later tonight. I might need a decent amount of hand holding so it will likely be a 30-$40 question :)
Thanks again!
Jack Armstrong answers:
You might consider making two child themes - "black" and "brown" which contain the second and third CSS stylesheets -- they would only need the changes from the original stylesheet, not the complete CSS specifications. A reasonable tutorial of how to add child themes is here - [[LINK href="http://op111.net/53"]][[/LINK]]
then include a simple theme switcher plugin like [[LINK href="http://wordpress.org/extend/plugins/theme-switcher/"]][[/LINK]] to allow visitors to try the alternative themes.
WP Answers comments:
Hi Jack,
Thanks for the idea, but I'd like to avoid a stylesheet switcher if possible. I don't want to add any elements to the design (stylesheet switcher bar) that aren't actually part of the final design.
Joel Fisher answers:
I've tried many different methods and the best method is using a little javascript.
This tutorial walks you through how to do it and hold the settings (cookie) for future visits.
http://www.blogohblog.com/integrating-alternative-stylesheets/
Hope that helps.