Genesis as a user-friendly CMS

[briansteeleca]

I'm fairly new to GenesisWP and have a question about best practices for widget areas on the home page. Assuming that we're using Genesis as a content management system so that clients can update a site themselves, I think it's best to keep the content separate from the HTML markup. When I look at Parallax Pro sample setup, I'm seeing HTML markup added to text widgets (e.g. http://my.studiopress.com/setup/parallax-pro/#How_to_Configure_the_Home_Section_4_Widget_Area). While this is fine for developers who understand the code (that's how I did my own site), I don't think it would be very user-friendly for non-technical users who need to update content but don't understand HTML code.

I see that Genesis includes Featured Posts and Featured Page widgets, and I'm wondering if they can be used in conjunction with a custom page template to accomplish the same thing instead of using raw HTML in a text widget.

What are your thoughts are on this issue, and do you have any suggestions or best practices for creating sites that make updating content user-friendly?

Thanks.

http://www.briansteele.ca

[Lauren @ OnceCoupled]

Those widgets can definitely be used - you just need to make sure you have the appropriate styles for when they are. Take care of that, and you'll have an easier system in place for your clients to handle their own updates. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[briansteeleca]

Thanks for the reply, Lauren, those widgets sound like a good start then. I'd like to take the Parallax Pro example above and figure out a way to make it editable in a way that doesn't expose markup to the user. I'm thinking custom fields may be the way to go.

I'll take a crack at it next week, but if anyone else would like to share their strategies, I'd be very interested in hearing them. 🙂

[uwitness]

I've had similar issues to the one you suggest, Brian - I've built a few sites recently where the users wanted to update their own homepage, but were quite inexperienced with WordPress. Even after some training, I was aware that they might confused by seeing HTML in a widget they were editing.

On the first of the sites, I used the Featured Page and Featured Post widgets to output the contents of special Pages I created for them, hidden from search engines and with titles like 'HOMEPAGE TOP PANEL' etc. That worked pretty well because they had the standard Page editing interface they were already familiar with - though as Lauren suggest above, you need to style the appropriate CSS for the text that ends up getting shown on the homepage.

Another option is the route I took more recently, where the user was a bit more comfortable inside WordPress, but still would have been uncomfortable finding HTML in a widget they were supposed to be editing. Discovered a plugin called called Black Studio TinyMCE Widget, which adds the standard text editing visual interface to a widget, but allows you to enter any essential code too. It's not ideal, because if you have a lot of essential code at the start of the widget, I found it pushed down the text content even in the visual view, but if it's a fairly simple widget it works fine.

[briansteeleca]

Thanks for sharing your strategies uwitness, that's exactly what I'm looking for.

I like the idea of the user being able to use the Visual editor, so those widgets with special pages sounds like a good approach.

In the past, I've found myself popping into the Text tab to add some wrappers and classes for styling, but I'm always concerned they may inadvertently get stripped out by someone using the visual editor since they aren't visible. Maybe shortcodes can solve that problem?

I have tried the Black Studio Widget, but don't have a lot of experience with it. It looks good, but it's interesting to hear that it pushed down your content. Someone on the forum just had a problem with a large gap on their site content and it turned out to be a bunch of <p>&nbsp;</p> that were generated from TinyMCE Widget (or maybe they had hit return a bunch of times without noticing). Either way, it sounds like it may be something to watch out for.

[uwitness]

It's a bit of a kludgey workaround, but in the case of the widget where I was using the Black Studio plugin but the 'hidden' code in the visual editor view was pushing down the content, I used a custom widget and basically added a big note in uppercase to the widget text, saying "Don't delete the apparently blank line!" Yes, it's a bit of a tedious workaround and, of course, it does depend on your client reading instructions, but so far - touch wood - it seems to be working.

I think it also depends on how complex your homepage is. One route I have considered with less experienced users, if it's quite a complex homepage, is creating a custom post type, with their own section on the WordPress menu called "HOMEPAGE" or similar, so they can update all their relevant homepage widgets using that.

Let us know what you decide to do - interested in your choice!

[briansteeleca]

Ha, that's interesting - it sounds like it gets the message across though.

I like the idea of a custom post type so that it's all in one place if that's possible. Using the Parallax Pro demo home page as an example, the page is fairly simple, so the Featured Post widget with a Homepage Section category should work for most sections. (I suppose the posts can be under Posts or in a Homepage Section custom post type to keep it separate from a blog.)

But the pricing table section seems to be an exception - I'm thinking it may need its own custom post type (Pricing Table) with custom fields for the title and features for each plan. I can update front_page.php to output the pricing table markup if it exists, and it can be slotted into the appropriate Home Section widget with the Genesis Sandbox Featured Content Widget.

It's not exactly all in one place because they'll have to use two separate post types for the homepage: Homepage Section and Pricing Table, but I think that should be fairly easy to understand, and there's no HTML for the user to contend with.

Does that make sense, or am I overcomplicating it?

[briansteeleca]

I'm hoping someone can help me with this:

In the Parallax Pro demo, I'd like to display the Pricing Table as a custom post type (with custom fields) rather than HTML markup in a text widget, but I can't figure out how to make it work.

This is what I tried: in front-page.php, create a custom loop, loop through the posts, and if the post type is plan, store the markup for the pricing table in a variable called $pricing_table_markup.

Then, modify the genesis_widget_area like so:

genesis_widget_area( 'home-section-1', array(
	'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
	'after'  => $pricing_table_markup . '</div></div>',
) );

(Repeat for all 5 home-sections...)

This doesn't work because there's no relationship between the condition in my custom loop ( if ( get_post_type( $post ) == 'plan') {...} ) and the genesis_widget_areas. Because $pricing_table_markup gets populated once in the loop, it shows up in every section as you can see here:

http://parallaxpro.briansteele.ca/

I only want to output the pricing table code in the widget area that's set to display the custom post type plan. Can someone point me in the right direction?

[Author]

Posts