Adding HTML class selector with PHP

Question

I'm tyring to build a Wordpress theme where user can choose some available options.

Let's say I have an option where user can choose column width from available options. In my page.php, I'm using this code to add class

<div class="<?php if ( my_column_width == '1' ) : ?> full-width
            <?php elseif ( my_column_width == '2' ) : ?> one-two
            <?php elseif ( my_column_width == '3' ) : ?> one-three">

Usually I put it in a single line, above code just for it' easier to understand. I have a lot of options on my theme, so those conditional statements really make it hard to read my code.

Can someone tell me the better approach to do this? I'm hoping that people who will use my theme can understand the logic when they read my code.

I'd start by never having php and html in the same script. Once you separate templates from values, things usually get easier. — Félix Adriyel Gagnon-Grenier
– Félix Adriyel Gagnon-Grenier, Commented Jun 22, 2014 at 16:27
@FélixGagnon-Grenier it's wordrpress :( WordPress forces developers to bad practices :( — Denis V
– Denis V, Commented Jun 22, 2014 at 17:04
But in my case, WordPress is a pretty good entry project for PHP beginner. Especially if you can find a good commented themes. :) — user3131837
– user3131837, Commented Jun 23, 2014 at 13:03

Denis V · Accepted Answer · 2014-06-22 16:24:47Z

1

Create a function:

function get_my_option_class($width)
{
    switch ($witdh) {
        case 2:
            $class = 'one-two';
            break;
        case 3:
            $class = 'one-three';
            break;
        case 1:
        default:
            $class = 'full-width';
    }

    return $class;
}

And then you'll do this:

<div class="<?= get_my_option_class($my_column_width) ?>">

Functions are reusable and much better than hard-coding any logic in your templates. If this code is supposed to run on PHP lower than PHP 5.4, then it's better to change the last line to this:

<div class="<?php echo get_my_option_class($my_column_width) ?>">

This will work in PHP < 5.4 even if short_open_tag is off.

answered Jun 22, 2014 at 16:24

Denis V

3,4081 gold badge30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3131837 Over a year ago

Thank you, Denis. I guess I'll start writing those functions.

pavel · Accepted Answer · 2014-06-22 16:22:34Z

0

Ideal is to have a switch where you prepare your class and then put this class to your code.

<?php

switch ($my_col_width) {
    case 1:
        $class = 'full-width';
        break;
    case 2:
        $class = 'two-cols';
        break;
    case 3:
        $class = 'three-cols';
        break;
    default:
        $class = 'four-cols';
        break;
}

?>

<div class="<?php echo $class; ?>">text</div>

Second, one-line variant, is

<div class="box-<?php echo $my_col_width; ?>">text</div>

answered Jun 22, 2014 at 16:22

pavel

27.3k11 gold badges47 silver badges63 bronze badges

Comments

Marcel · Accepted Answer · 2014-06-22 18:56:23Z

0

In Wordpress you have several action hooks and filters. In this case, you can use the "body_class" filter. Just see the following example.

add_filter('body_class', 'my_body_classes_function');
function my_body_classes_function( $classes, $col_width = 0 ) {
    // your settings here
    switch ($col_width) {
        case 1 :
            $classes[] = 'my_col1_class';
            break;
        default :
            $classes[] = 'my_default_class';
            break;
    }

    return $classes;
}

Add this function to your theme 's functions.php and add the following HTML code to your template.

<body <?php body_class(); ?>>

You should also have a look at the wordpress function reference: http://codex.wordpress.org/Function_Reference/body_class#Add_Classes_By_Filters

answered Jun 22, 2014 at 18:56

Marcel

5,1811 gold badge18 silver badges27 bronze badges

1 Comment

Marcel Over a year ago

Oh I 'm sorry. You are right. Never the less I would remain this answer here for others with the full-width problem in wordpress.

Collectives™ on Stack Overflow

Adding HTML class selector with PHP

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related