Genesis Extender Front-End CSS Builder

left-sidebarSome tips for getting the most out of the Front-End CSS Builder

The Front-End CSS Builder is comprised of the following parts:

  1. Horizontal Navigation bar across the top
  2. Left Hand Side Bar
  3. Staging Area for Custom CSS (Middle of left sidebar)
  4. Custom CSS (Bottom of left sidebar)

The Horizontal Navigation is comprised of links for the elements you may want to style and some common CSS additions, such as border’s, shadows, backgrounds, etc



The Left Hand Sidebar helps you find the elements and their associated CSS tags for styling.  Specifically, the Element Selectors Button, when clicked, introduces the buttons across the page for the various elements of your website.  Click an element selector and the dropdown in the left hand column reflects the components of that element for styling.

The staging and Custom CSS Editor areas of the left sidebar are where you write your Custom CSS. Keep in mind that, while both will show your updates in real time, the Custom CSS Editor is where you MUST save your CSS in order for it to become active for all visitors.


  1. says

    Issue: My StudioPress Mobile Responsive theme (Executive) looks non-responsive on any mobile device (e.g., iPhone). Brought this issue to the StudioPress Forum. Moderator says that the issue is the Genesis Extender Plugin and not the theme. They have had several reports about this from their members, who use this plugin. Is there a remedy?


    • Eric Hamm says

      Hey Robert,

      Be sure to post all Genesis Extender support questions in our Support Forum where our support team will be happy to assist.

      And when you post your question be sure to be more specific as to exactly what’s no longer responsive and why you believe the Genesis Extender Plugin is responsible. I actually just tested this exact scenario, using the Executive Child Theme and Genesis Extender and none of the responsiveness of the Child Theme was affected by the Plugin. There aren’t even any styles added by Genesis Extender (other than any you might add yourself via Custom CSS) that could even affect the way the theme is responsive.

      Also, I would love to know where this StudioPress forum post is so I can check it out for myself and address it. As I said, I don’t believe this is even a Genesis Extender issue. And if it is then I’d like to get to the bottom of it and resolve it with the next update, but if it’s not I’d like to clear that up for any other users (and Genesis Support people) who are under the impression that it’s causing this issue.


      • says

        Hi Eric,
        I posted in the forum, as you suggested. Sorry about that, but just following the StudioPress instructions. :-)

        The thread in the StudioPress Forum that I submitted earlier is at: . I think you can find this by search for “Executive Mobile Responsive”, the tags I used for my post. The title of the post is “Executive Theme – Mobile Responsive?”.

        The issue may stem from not realizing what sort of custom CSS will mess up a Mobile Responsive Theme, if that is what has happened here. Perhaps custom CSS is not usually compatible with themes engineered to be mobile responsive. I am not sure of the type of mobile responsiveness Genesis uses (e.g., media queries, etc.).

  2. says

    Hi Eric,
    Heretofore, I have not been using the front-end CSS builder. I missed this video somehow explaining this excellent feature. :-( This is just awesome! BIG time saver for me. Huge compliment to my Firebug plugin! Very nice. I will recommend this to others going forward.


  3. Kate says

    If I understand this, turning off the plugin would turn “off” whatever Custom Css is causing responsiveness issues. So I have a question. Does the CSs reside in a plugin file? Why wouldn’t the CSs be on a child theme style sheet and still be there after turning off the plugin? I want to use this for a site but I want to make sure I understand where all this CSS goes when you write it in live CSS ( for Dynamik too) I thought, after building, I could remove the plugin….

    • Eric Hamm says

      Yes, currently Genesis Extender is setup in such a way that it needs to be active for the changes it makes to remain in effect. We are, however, considering a way to have your changes “stick” even after de-activating/removing the Plugin.

      The style, function and structure changes made by Genesis Extender are hard coded files that are placed in a /wp-content/uploads/genesis-extender/plugin/ folder created by the Plugin. This keeps things separate from both the Plugin and the Child Theme folders to prevent loss of “data” upon updating either the Plugin or Theme. And Dynamik works in a very similar way.


  4. Kate says

    By the way, have some truly impressive communication skills. Most developers….well, that is not what I see. Even though I am guessing you are 20 years younger than me, you are my comment forum email, dare I say ninja (sorry) communicator mentor! Mad skills.

    Yes, testimonial away….

    • jasonhobbsllc says

      Is this outside of the Breadcrumbs you control from Genesis –> Theme Settings and scrolling down to Breadcrumbs?

  5. says

    I REALLY wish I’d seen this plugin before I started our company site redesign! I’ve got it the way I want now, but think this plugin would be amazingly useful in the future. I also need to switch to HTML5. Would this plugin make it easier to switch? And more props for communication skills. I wholeheartedly agree! I was able to to follow this comment thread – and you didn’t shut down anyone, the way most do (especially on CodeCanyon). Thanks for that!

  6. Leonardo Picciani says

    Hi, I’d like to say that the plugin is great! But I also want to register an issue I had: the plugin does not work if the default media path is changed. I changed the default path from “wp-content/uploads” to “media” and a PHP error was displayed. When I changed back to the default path, everything came back to the normal.

    So, it will be a good idea to check the configuration in wp-config.php for this kind of thing.

    Anyway, congratulations for the very good work! And hit me if there is already any easy solution for the described scenario.

    Best regards,

    • Eric Hamm says

      Hey Leo,

      Thanks for the heads up, but I don’t believe that’s actually an issue as we’ve accounted for potential uploads path changes by using the wp_upload_dir WP function to make the path relative to whatever you have set for that file path.

      Most likely your issue occurred because I’m guessing you didn’t first de-activate Genesis Extender and THEN change the uploads directory location and then re-activate Extender. This will allow Extender to recreate all the files and folders in the new location. Otherwise you’re changing the path without allowing Extender to “re-associate” itself.

      So try that and let us know if you’re still having trouble.


      • Leonardo Picciani says

        Hey, Eric.

        Thank you very much for your response. I followed your instructions, but I got the error below:

        Warning: call_user_func_array() []: First argument is expected to be a valid callback, ‘genesis_extender_do_ez_home’ was given in /home/web/public_html/wp-includes/plugin.php on line 406

        Even deleting the plugin and installing again, I got this message. It only works if I restore the original uploads path.

        Could be a conflict with another plugin? Or is there any known issue associated with this message?

        Thanks in advance,

Leave a Reply

Your email address will not be published. Required fields are marked *