I’ve been trying to sort out the answer to a question asked on Hacking the Tagline about backgrounds and headers, so I’m pulling apart mystique_logo() from header.php to see what makes it tick. This is a step-by-step overview of what each line does and where the functions it uses are located.

Although I don’t have the newest version of the theme, hopefully this will help others who are trying to tweak mystique_logo() — which contains the blog title or the selected title image.

So let’s pop open Appearance -> Editor and read on…

The base for this code modification is Mystique WordPress Theme created by Digital Nature version 2.4.2.

Always make a copy of the file before you start editing so that you can replace it if something goes wrong!

In header.php there is the following line that creates the blog title or header image:

This function is located in code.php (where most of the Mystique functions are hiding).

function mystique_logo(){
$options = get_option('mystique');
$size = $options['logo_size'];
if($size) $size = 'width="'.substr($size, 0, strpos($size, "x")).'" height="'.substr($size, strpos($size, 'x')+1).'"';

$sitename = get_bloginfo('name');
$siteurl = get_bloginfo('url');

$tag = (is_home() || is_front_page()) ? 'h1' : 'div';

$output = '';

if($options['logo']) // logo image?
$output .= '';
else
$output .= ''.$sitename.'';
$output .= '';
echo apply_filters('mystique_logo', $output);
}

So let’s break this down…

$options = get_option('mystique');

The option settings for Mystique are pulled out of the database by the WordPress function get_option().

An array of the option settings (and their default values) can be found in settings.php.

$size = $options['logo_size'];

This gets the size of the image, which is sorted as a string in the Mystique settings under ‘logo_size’.

if($size)

This bit of code checks to see if there is a value in $size, if not the line below is skipped.

$size = 'width="'.substr($size, 0, strpos($size, "x")).'" height="'.substr($size, strpos($size, 'x')+1).'"';

‘logo_size’ is a string stored as a ‘123×123’ format. This bit of code splits the value into a width and height component.

substr() is a PHP function that returns a portion of the string based on the values given. The first number is where to start and the second number is where to end (moving from left to right).

strpos() is a PHP function that returns the position of a substring within the string.

So for the first substr() the code tells it to grab all of the numbers starting a the beginning of the string up until it hits the ‘x’.

The second substr() grabs all of the numbers after the ‘x’.

So a $size value of ‘123×456′ would result in the string: “width=’123’ height=’456′”

$sitename = get_bloginfo('name');
$siteurl = get_bloginfo('url');

get_bloginfo() is a WordPress function that pulls information about the blog from the database. These two lines pull the blog name and the blog URL.

$tag = (is_home() || is_front_page()) ? 'h1' : 'div';

This bit checks is_home() and is_front_page() to see if either one is true (|| means Or). If so, $tag is set to ‘h1’ if not, it’s set to ‘div’.

is_home() is a WordPress function that returns TRUE if the blog homepage is displayed and FALSE if not.

is_front_page() is a WordPress function that returns TRUE if the blog front page is displayed and FALSE if not. (The front page is not always the same as the homepage)

The setting for controlling what is considered the front page is on the Dashboard under Settings-> Reading.

$output = '';

$output is a string where the code to echo is stored. Here is it set to:

'

So if is_home() is true, $output would equal:

'

‘

The id ‘logo’ is defined in style.css under the /*** LOGO & HEADLINE ***/ section with the following lines. If you want to change the font or the image attributes, this is where you’d go:

#site-title{padding:1em 0 1em 0;font-family:"Segoe UI"}

#site-title #logo{font-size:400%;font-weight:bold;font-style:normal;margin:0;padding:0;float:left;line-height:60px;font-family:"Segoe UI"}

#site-title #logo a{color:#fff;text-decoration:none;text-shadow:#000 1px 1px 1px;font-variant:small-caps;letter-spacing:-0.04em;font-family:"Segoe UI"}

#site-title #logo a:hover{color:#ed1e24;font-family:"Segoe UI"}

#site-title p.headline{float:left;border-left:1px solid #999;margin:0 0 0 1em;padding:.2em 0 .2em .8em;font-weight:normal;font-size:140%;line-height:64px;letter-spacing:0.1em;font-family:"Segoe UI"}

if($options['logo']) // logo image?

This line checks the Mystique settings that we pulled earlier. If there is a value stored under ‘logo’ then it continues, otherwise it skips down to the Else. (‘logo’ contains the name of the image file that you chose for your header.)

$output .= '';

This creates the code for the logo image, if there is one. $size, $siteurl and $sitename got their values a few lines back and $options[‘logo’] pulls the name of the image from the Mystique settings. Then it adds the new a href string to the end of $output.

As an example, if $siteurl was “http://123.com”,’logo’ was Picture.jpg, $sitename was “Test Blog” then $output would be equal to:

Next line!

else
$output .= ''.$sitename.'';

If there was no value in ‘logo’ then the code creates a blog name instead, with a link back to the hompage. This uses $siteurl and $sitename which were assigned values earlier in the function.

$output .= '';

After either the logo or the blog name string has been added, it’s time to cap off the h1 (or div) that was opened above

echo apply_filters('mystique_logo', $output);

apply_filters() is a WordPress function, that applies the filter ‘mystique_logo’ to the $output string before it is put into the header.php.

But darned if I can find where the ‘mystique_logo’ filter is defined… I’ll keep digging and come back and update the post when I do. From my reading of the other PHP coding, it’s most likely a function that cleans out any hostile coding (remember little Bobby Drop Table? *grin*).

As always, if you run into problems with this code, just give me a holler and I’ll try and help you sort it out!