Redux framework: background logo setup with in wordpress

Question

I want to set up a theme option "Logo upload" with Redux framework. But I have faced some problem, because my HTML template has setup the logo through a stylesheet. How can setup this logo via uploader? I'm new in wordpress and obviously in redux framework. I have tried some code but it did not work.

Here is my code:

<div class="header row">
        <div class="span12">
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <h1>
                    <?php global $anida;
                        $logo=$anida ['header_logo'] ['url']
                     ?>
                        <a class="brand" href="<?php echo home_url();?>"><?php bloginfo('title'); ?> - <?php bloginfo('description'); ?><?php echo $logo ?></a>
                    </h1>
                    <div class="nav-collapse collapse">
                        <?php
                        if (function_exists('wp_nav_menu')) {
                            wp_nav_menu(array('theme_location' => 'wpj-main-menu', 'menu_class' => 'nav pull-right', 'fallback_cb' => 'wpj_default_menu'));
                        }
                        else {
                            wpj_default_menu();
                        }
                        ?>                              

                    </div>
                </div>
            </div>
        </div>
    </div>

And my css is:

.header a.brand {
    display: inline-block;
    text-indent: -9999px;
    width: 280px;
    height: 63px;
    padding: 30px 0;
    background: url(../img/logo.png) 20px center no-repeat;
}

score 1 · Answer 1 · answered Aug 14 '14 at 22:04

1

You'd have to do inline CSS or make a CSS file that compiles based on PHP variables.

answered Aug 14 '14 at 22:04

Dovy

1,210
9
18

Will you please give me a example of CSS file that compiles based on PHP? – partha Aug 15 '14 at 04:20
body {background: } – Dovy Aug 15 '14 at 18:36
Thanks a lot Dovy. If I have any query about Redux hope will get help. – partha Aug 16 '14 at 08:52
Best to post on the Redux issue tracker: https://github.com/ReduxFramework/redux-framework/issues. We don't always respond here. And if you wouldn't mind marking my response as the answer, I wouldn't mind the extra points. :P – Dovy Aug 16 '14 at 19:13

score 0 · Answer 2 · answered Feb 16 '15 at 19:35

<div class="header row">
    <div class="span12">
        <div class="navbar">
            <div class="navbar-inner">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <h1>
                <a class="brand" href="<?php echo home_url();?>"><?php bloginfo('title'); ?> - <?php bloginfo('description'); ?><?php echo $logo ?></a>
                </h1>
                <div class="nav-collapse collapse">
                    <?php
                    if (function_exists('wp_nav_menu')) {
                        wp_nav_menu(array('theme_location' => 'wpj-main-menu', 'menu_class' => 'nav pull-right', 'fallback_cb' => 'wpj_default_menu'));
                    }
                    else {
                        wpj_default_menu();
                    }
                    ?>                              

                </div>
            </div>
        </div>
    </div>
</div>

stylesheet file

.header a.brand {
    display: inline-block;
    text-indent: -9999px;
    width: 280px;
    height: 63px;
    padding: 30px 0;

}

// add this in functions.php

<?php    
    function theme_custom_options(){ 

        global $anida;
        $logo=$anida ['header_logo'] ['url']

    <style>

    .header a.brand {
        background: url(<?php $logo=$anida ['header_logo'] ['url'] ?>) 20px center no-repeat;
    }
    </style>
     <?php 
    }

    add_action('wp_head','theme_custom_options'); ?>

Redux framework: background logo setup with in wordpress

2 Answers2