How to make my a cms that can change themes like tumblr - php

Hey guys. I was wondering how would I make theme options for a cms of mine like tumblr? I understand how to use the code like tumblr, {description}, {text} and variables like that but how would I make a theme switcher like this in php?

Simply put a php variable in your head section. Be sure to create the $userCSSchoice at the beginning of your page or you will break it all! Doom!
<LINK REL=StyleSheet HREF="<?php echo $userCSSchoice; ?>.css" TYPE="text/css" MEDIA=screen>
Nah, seriously, I do this and it works just fine for me. Then you have to create all those css stylesheets, but that's not too hard.

An alternative is to create your CSS page in PHP so you can pass a variable to a single sheet to determine the style.
<link rel=StyleSheet href="styles.php?theme=<?php echo $userCSSchoice; ?>" type="text/css" media=screen>
Then your PHP/CSS page can determine colors/images..
<?php
header("Content-Type: text/css");
if (isset($_REQUEST['theme']))
$theme = $_REQUEST['theme'];
else
$theme="default";
$bgImage="images/bg_".$theme.".png";
if ($theme=="default")
$mainColor="0f8200";
else if ($theme=="green")
$mainColor="009900";
?>
body {
background:url('<?php echo $bgImage; ?>') repeat-x #<?php echo $bg; ?>;
color: #<?php echo $mainColor; ?>;
}

Related

Embedded php css file not working

I have embedded my CSS file as PHP to make it more dynamic as shown in various examples online but I can't seem to get it working
<link rel='stylesheet' href='myphpstylesheet.php'>
My PHP file which I added in the link
<?php
$bgcolor = '#FF00FF';
?>
<style>
Div #container {
Background-color: <?php echo $bgcolor ; ?>
}
</style>
My HTML file
<html>
<head>
<link rel='stylesheet' href='myphpstylesheet.php'>
</head>
<body>
<div id="container ">
I am a div with lorem ipusum
</div>
</body>
</html>
But the color does not apply please help
I did some search on embedding css as php file,
I don't really see the reason for this just use css as intended.
Anyway you can try these methods hope it fixes you problem also take note of herf and hrefas pointed out by Riggs Folly as they are not the same.
METHOD 1
You can edit your httpd.conf or .htaccess with this line
AddType application/x-httpd-php .css
the web server will now parse PHP code that is within the CSS files but i would
avoid messing with those at all costs.
METHOD 2
You can also include a PHP file, in the same manner as you include a CSS file
<link rel="stylesheet" href="style.php" media="screen">
this should be done within the head of the HTML document that is the <head></head> tags
Then your style.php file should look something like this:
<?php
header("Content-type: text/css; charset: UTF-8");
$brandColor = "#990000";
$linkColor = "#555555";
$CDNURL = "http://cdn.blahblah.net";
?>
Then your css file should look somthing like this:
#header {
background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}
a {
color: <?php echo $linkColor; ?>;
}
ul li a {
color: <?php echo $linkColor; ?>;
}
You should use PHP's include command to inject the external PHP:
<?php include 'myphpstylesheet.php'; ?>
Inside that PHP file, you have a missing PHP closing tag, and the CSS needs to be declared properly within <style> tags:
<?php
$bgcolor = '#FF00FF';
?>
<style>
div #container {
background-color: <?php echo $bgcolor ; ?>
}
</style>
There's many ways to have dynamic control over CSS.
If you wanted to maintain the method, and truly feed it a dynamic PHP file, you have to make sure the PHP output is ONLY css. Here's an article on that.

Using diff. stylesheets with diff. pages in Wordpress HTML5Blank template

I am making a site on Wordpress and plugging in my custom html and css to the HTML5Blank template. The css file is enqueued using WordPress functions into wp_head... I have tried inserting a conditional php if statement into head and it has no effect because
<?php wp_head(); ?>
is still being called. Removing this and keeping the conditional statement
<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( '/style.css' ); ?>" />
<?php } ?>
still doesn't fix it. I want my homepage to call a different css file than the rest of the website. I'll only need potentially 2 css files and have already made another one called frontstyle.css in the same directory as the original css file.
Thanks in advance!
EDIT: have also been trying this but it isn't working either but actually seems the most promising.
?php if( is_home() ) { ?>
<?php get_header(); ?>
<?php } else { ?>
<?php get_header( 'other' ); ?>
<?php } ?>
with files header.php and header-other.php respectively. All I really need to change is the header. I plugged this into the page template and didn't get the response I needed but it did change a bit.

Conditional CSS based on boolean PHP variable

How can I have certain CSS load only if a specific PHP variable is true and have other CSS load of the variable is false?
Have it in 2 separate files and have the correct file load depending on the boolean state or use if statements to echo the code you want within the document depending on the boolean state.
<style type='text/css'>
<?php
if(boolean)
{
echo "elementName { attribute: value; } ";
echo "elementName2 { attribute: value;} ";
}
else
{
//echo css here
}
?>
</style>
or, in the head tag:
<?php
if (boolean)
{
echo "<link rel='stylesheet' type='text/css' href='1.css'>";
}
else
{
echo "<link rel='stylesheet' type='text/css' href='2.css'>";
}
?>
Also, form vs content; it would be more practical to keep your CSS in a separate file and have a particular CSS script load depending on a variable rather than mix up the CSS with the HTML.
<link rel="stylesheet" type="text/css" href="<?php echo ($var) ? "css1" : "css2"; ?>.css">
In your HTML page, on the <head> section, you can write some simple conditions in PHP to include or not a CSS:
<?php
if ($yourCondition)
{
?>
<link rel="stylesheet" type="text/css" href="http://path/to/css1.css" />
<?php
}
else
{
?>
<link rel="stylesheet" type="text/css" href="http://path/to/css2.css" />
<?php
}
Note: Avoid using inner style, because all style should be in CSS (presentation layer separated from the HTML which is a structure and data layer)

Adding a links to js and css files within a conditional script in page header

I want to add something like this to my page header, in order to load a js and css file only if NOT an iPhone/iPad:
if(!(navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
//Link to js file
//Link to css file
}
The first line works fine, I've tested it by pasting in a script, but I'm not sure how to get the files linked... especially as I'd like the js and css links to start with the WP template tag <?php echo get_stylesheet_directory_uri(); ?>
Thank you in advance for your help!
<?php
if (!preg_match("{iPhone|iPod}i",$_SERVER['HTTP_USER_AGENT']))
{
echo '<script src="yourscript.js"></script>';
echo '<link href="yourstyle.css" rel="stylesheet" type="text/css">';
}
?>
It's better to check the user agent using PHP, since it's easier to then add the right HTML tags to load the right css and js files.
<?php if ( !preg_match( '/iPhone/', $_SERVER['HTTP_USER_AGENT'] ) && !preg_match( '/iPod/', $_SERVER['HTTP_USER_AGENT'] ) ): ?>
<link href="<?php echo get_stylesheet_directory_uri() ?>/style.css">
<script src="<?php echo get_stylesheet_directory_uri() ?>/script.js" type="text/javascript"></script>
<?php endif; ?>
Doing it using just javascript would add unneeded complexity, and need you to use a js loader as RequireJS http://requirejs.org/
Something like that:
<?php if(!(navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) : ?>
<link href="<?php echo get_stylesheet_directory_uri() ?>/main.css" type="text/css" rel="stylesheet" >
<script src="<?php echo get_stylesheet_directory_uri() ?>/main.js" type="text/javascript"></script>
<?php endif ?>

How to display multiple single page templates based on categories for WordPress?

I am using multiple stylesheets and need the pages to differ based on category.
I added the following to my header.php, but shows base theme`s single entry template. Any ideas?
<?php if (is_category('20')) { ?>
<link rel="stylesheet" type="text/css" href="wp-content/themes/tanzaku/style.css" />
<?php } else {?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
<?php } ?>
I am using the same theme as these sites, but I use two themes on my site compared to these.
http://marioortega.net/
http://atelier6.co.uk/
When you click one of the thumbnails, the single ends up on top and the thumbnails at the bottom.
All:
Thank you for looking into this. In order for me to get this to work, the problem was actually multiple single.php files. This can be solved by having your single.php look like this,
<?php
$post = $wp_query->post;
if ( in_category('20') ) {
include(TEMPLATEPATH . '/single1.php');
} else {
include(TEMPLATEPATH . '/single2.php');
}
?>
I have also edited the question for other people looking for this answer.
Shouldn't you be using echo statement to put the link into your page.
<?php
if (is_category('20')) {
echo '<link rel="stylesheet" type="text/css" href="wp-content/themes/tanzaku/style.css" />';
}
else {
echo '<link rel="stylesheet" type="text/css" href="'.bloginfo('template_url').'/style.css" />';
}
?>

Categories