Archiv für Januar 2011

Define Variables in CSS

Each of us webdesigners needs to use many or a few different color codes on many places in their .css-files. I know the pain of changing one basic color on all places – find and replace is a lifesaver, but if you get used to following, you don’t even need to do that.

In this tutorial you will learn how to let your webserver parse your .css-file, inserting the right colorcodes at the right places.

CSS vs. PHP

Even if you don’t know PHP, please don’t be frightened – you just need two lines of code to learn by heart, which you will need a lot, and two lines of code once for each document you want to use this way.

If you know PHP already, go directly to the solution-section.

It’s true, CSS cannot handle variables itself. There is no way to define variables in CSS itself. But: PHP is able to define variables or constants, just as you like, and I will show you, how to us it. Nearly each webserver is able to parse .php-documents but they won’t do it without some hint: you need to end all files which should be parsed as php with „.php“ Your „style.css“ will look like „style.css.php„.

Why does this work and how does a webbrowser know, it’s CSS?

When a .php-file is „parsed“ it means that the webserver will search the complete file for PHP-areas, execute the commands defined in these PHP-areas and put together all outputs into one single text. To know that the result of any php-parsing is plain text is important to understand why a webbrowser is not confused by any PHP-files as long as the webserver is able to do PHP. (Your webhost will tell you, if your webserver is able to do PHP).

When someone requires a website, the server sends the information to the webbrowser. This information is just plain text – it will be interpreted by the webbrowser depending on its ‚content-type‘. So, in theory, the server can give any text to the webbrowser and say it’s CSS – the browser will believe the documents ‚content-type‘. Therefore, we just need to tell the webbrowser the text sent from our webbrowser should be interpreted as CSS.

So, how do I use PHP now?

I’m suggesting, your webserver can do PHP.

I recommend to create a file called „colors.php“ into the same folder as your „.css“-files.

I will show you the very basics of PHP so you can use my technique without any problems for your color-definition:

<?php
?>

An PHP-Area is defined by opening „<?php“ (must be followed by a space) and closing „?>“. Everything between will be parsed by your webserver as I told you earlier.

As you see in the next example, each line must end with a semicolon (;).

The next example shows you two strings, marked by one ‚ before and after the string. Be aware that it makes a difference wheter or not you leave a space after or before the ‚-sign. Its something different to write ' #0000FF ' or '#0000FF'

<?php
define(‚BLUE‘, ‚#0000FF‘);
$blue = BLUE;
?>

There are two different ways to store your color-codes. You can chose!

define()“ is a function provided by PHP itself which declares a constant. A constant is a set of characters which can be written instead of its value throughout the code. In the second line „$blue = BLUE;“ the webserver will replace BLUE with ‚#0000FF‘ (including the ‚-signs!). SO – whereever you use BLUE, the color-code will be written.

What is positive about CONSTANTS? As the name already says: you cannot change the value of it during one parse session. When you write the file and someone requests it, the server will take the file at in its momentary state and will parse it. During the parsing process CONSTANTS cannot be changed by any calculations in the code. If you change the file and save it, the changes will apply from the next request to the next change of the file.

Every variable is marked by an „$“ sign and has its unique name. You can imagine these variables as boxes with names – the box in my example is called „$blue„. Whatever I will give into „$blue“ will replace what was in it before. In our example in line „$blue = BLUE;“ the variable called „$blue“ will get a value (marked by „=„). This value is BLUE. As we learned in the paragraph before, BLUE is a defined CONSTANT and therefore will be replaced with '#0000FF' during the parsing process. The line looks like: „$blue = '#0000FF';“ in the end. Please note the ‚-signs before and after #0000FF.

Okay, I know enough of PHP, what do I really need?

You need the defination of the colors: I recommend to have your own file (ie. colors.php):

<?php
// Blue (this is a comment and will not affect anything nor will it be seen in your .css)
define(‚BASE‘, ‚#BAE7FF‘);
define(‚DARK‘, ‚#546873‘);
define(‚MIDDLE‘, ‚#D0EAF6′);‘
define(‚LIGHT‘, ‚#E0F4FF‘);
?>

You will also need your CSS-file (ie. style.css.php). You MUST name it .php in the end. You do not have to name is .css.php but it is recommended for recognition and readability.

<?php
header(„Content-Type: text/css“);
require_once(‚colors.php‘);
?>
/* CSS Document can begin here */
/* you write styles normally and only insert special-color-lines*/

body {
background-color: <?php echo BASE; ?>; /* do not forget about the semicolon at the end of line for CSS */
color: <?php echo LIGHT; ?>; /* do not forget about the semicolon at the end of line for CSS */
}

All emphasised lines should be known by heart.

The header-command tells the webbrowser that the resulting plain text should be interpreted as CSS.

The require_once-command makes all code from the file awailable. In this case your file ‚colors.php‘ which has to be in the same directory as your style.css.php.

The <?php echo ____; ?> is the command what you are waiting for the whole time: this command inserts the color-code you desire by NAME. You can access all NAMES defined in the colors.php – and you may define some colors in the PHP-section of this file, too.

 

I would be pleased if you leave any comments. Please tell me whether you liked it, found it helpful or have and helpful critics.

Advertisements

Der berühmte ‚Are you sure you want to do this? Please try again.‘ Fehler

I described my problem and the solution in the wordpress support forum in ENGLISH.

Neulich, beim Programmieren eines WordPress Plugins, bin ich erstmals auf diesen Fehler gestoßen. Die WordPress-Support-Seite hat mir wenig geholfen, das Forum von WordPress.org geht über mit unbeantworteten Fragen bezüglich dieses Fehlers – alle mit unterschiedlichem Setup, mit und ohne Plugins und mit unterschiedlichen WordPress Versionen.

Nachdem ich meinen Fehler gefunden habe und den Fehler für „schnell gemacht und leicht behoben“ halte, möchte ich ihn mit euch teilen:

Das Auftreten des Fehlers

Der Fehler überraschte mich beim Erstellen des ersten Posts in einem eigenen Post-Type. Beim Speichern und Veröffentlichen des Eintrags leitete er mich auf die Fehlerseite „Are you sure you want to do this?“ und verlinkte mich zurück auf die vorherige Seite.

Finden des Fehlers

Im wp-config.php File im Stammordner eurer WordPress-Installation könnt ihr die globale Konstante „WP-DEBUG“ auf true setzen. WordPress zeigt euch dann viele Fehlermeldungen mehr als vorhin an.

In der Meta-Box zum Speichern des Eintrags ist mir folgender Fehlereintrag aufgefallen: [Wordpress Version 3.0.4]

Notice: Trying to get property of non-object in….\wordpress\wp-admin\includes\meta-boxes.php on line 18

Gleich mal nachgesehen, was denn da steht …

Wir befinden uns in der Funktion post_submit_meta_box($post) und wollen in Zeile 17 $can_publish = current_user_can($post_type_object->cap->publish_posts); auf ein „Nicht-Objekt“ zugreifen. Das erste Objekt, auf das wir in dieser Zeile zugreifen wollen, ist das Objekt $post_type_object. Erkennen kann man einen Objekt-Zugriff nicht nur am Namen „post_type_object“ sondern auch an der Zugriffsweise: $objekt->varibale steht für einen Zugriff auf eine Objektvariable. Nachdem WordPress eine WordPress-eigene Funktion verwendet, um dieses Objekt zu erzeugen, nehme ich an, die Funktion stimmt und frage mich, was es denn für ein Objekt zurück liefert – scheinbar ist was mit den Daten falsch.

Der Fehler

Kurzerhand habe ich die Datei meta-boxes.php verändert und zwischen Zeile 16 und Zeile 17 folgende Zeile zusätzlich eingefügt: print_r($post); — daraufhin erscheint, wenn ihr zum Testen auf die Erstellen-Seite des Post-Types geht, in der Meta-Box zum Speichern des Eintrags eine laaaange Buchstaben-Wurst. Schöner formatiert wird sie euch, wenn man echo „<pre>“.print_r($post,1).“</pre>“; schreibt.

Diese Buchstabensuppe stellt euren Post dar. In meinem Fall hatte der post_type des Objekts $post nicht gepasst: er war abgeschnitten! Und das war auch schon der Trick bei der Sache: mein Plugin erstellt für mein Plugin einen „unique“ String, der dann auch für das Identifizieren von meinen Post-Types verantwortlich ist/war – und zusammengesetzt war das einfach zu lang! Also hab ich den „unique“-String allgemein gekürzt und siehe da, der post_type meines $post-Objekts war wieder vollständig und die Fehlermeldung verschwunden!

P.S: Vergesst nicht darauf, dass ihr eure Änderungen an den Dateien wp-config.php und wp-admin/includes/meta-boxes.php wieder rückgängig macht!