No announcement yet.

HOW TO: WYSIWYG editor for full-width rows (Genesis-friendly version)

  • Filter
  • Time
  • Show
Clear All
new posts

  • HOW TO: WYSIWYG editor for full-width rows (Genesis-friendly version)

    This is the updated, more Genesis-friendly version of my original post about a system whereby any number of full-width rows can be added via the Wordpress admin sidebar using a Custom Post Type and Custom Page Template.

    So instead of using widgets, you can use the standard Wordpress page editor (TinyMCE) to create each row.
    This also works with plugin shortcodes and page builders like Visual Composer.

    Then a page with the Genesis Rows template selected will loop through, and display the rows.

    (If you still need widgets, there are plugins which allow you to use widgets in pages, such as Widgets on Pages, or Widgetize Pages Light.
    I haven't tried them, but they are highly rated.)

    Styling is kept to an absolute minimum, but basic instructions for coloring the rows and tweaking the content in CSS are included.

    Setup Instructions

    Go to Dynamik Settings - General Settings - Custom Post Types
    Check ✓ Include Theme In-Post Options With All Custom Post Types

    Ok here comes the code:
    In Dynamik Custom - Functions make sure Affect Admin ✓ is checked, then paste in the following:

    PHP Code:
     // Register Rows Custom Post Type
    function register_rows() {

    $labels = array(
    'name'                => _x'Rows''Post Type General Name''text_domain' ),
    'singular_name'       => _x'Row''Post Type Singular Name''text_domain' ),
    'menu_name'           => __'Rows''text_domain' ),
    'parent_item_colon'   => __'Parent Row:''text_domain' ),
    'all_items'           => __'All Rows''text_domain' ),
    'view_item'           => __'View Row''text_domain' ),
    'add_new_item'        => __'Add New Row''text_domain' ),
    'add_new'             => __'Add New Row''text_domain' ),
    'edit_item'           => __'Edit Row''text_domain' ),
    'update_item'         => __'Update Row''text_domain' ),
    'search_items'        => __'Search Row''text_domain' ),
    'not_found'           => __'Not found''text_domain' ),
    'not_found_in_trash'  => __'Not found in Trash''text_domain' ),
    $args = array(
    'label'               => __'row''text_domain' ),
    'description'         => __'Row Sections''text_domain' ),
    'labels'              => $labels,
    'supports'            => array( 'title''editor''excerpt''author''thumbnail''comments''trackbacks''revisions''custom-fields''post-formats''genesis-seo''genesis-cpt-archives-settings',),
    'taxonomies'          => array( 'category''post_tag' ),
    'hierarchical'        => false,
    'public'              => true,
    'show_ui'             => true,
    'show_in_menu'        => true,
    'show_in_nav_menus'   => true,
    'show_in_admin_bar'   => true,
    'menu_position'       => 5,
    'menu_icon'           => 'dashicons-editor-justify',
    'can_export'          => true,
    'has_archive'         => true,
    'exclude_from_search' => false,
    'publicly_queryable'  => true,
    'capability_type'     => 'page',
    'meta_query'             => array(
    'key'       => 'row_bg_color',
    'type'      => 'NUMERIC',
    register_post_type'row'$args );


    // Hook into the 'init' action

    You don't have to Save Changes now, but old habits..

    Go to Dynamik Custom - Templates, create a new page template:
    File Name: genesis_rows
    Template Name: Genesis Rows
    Choose Page Template from the dropdown
    Paste in the following:

    PHP Code:
    // Force full width content layout setting
    add_filter'genesis_pre_get_option_site_layout''__genesis_return_full_width_content' );

    remove_action'genesis_loop''genesis_do_loop' );
    add_action'genesis_loop''rows_do_loop' );

    // Outputs a custom loop
    function rows_do_loop() {

    //* Remove the entry meta in the entry header
    remove_action'genesis_entry_header''genesis_post_info'12 );
    //* Remove the post meta function
    remove_action'genesis_entry_footer''genesis_post_meta' );
    $include genesis_get_option'blog_cat' );
    $exclude genesis_get_option'blog_cat_exclude' ) ? explode','str_replace' '''genesis_get_option'blog_cat_exclude' ) ) ) : '';
    $query_args wp_parse_args(
    genesis_get_custom_field'query_args' ),
    'cat'              => $include,
    'category__not_in' => $exclude,
    'showposts'        => genesis_get_option'blog_cat_num' ),
    'paged'            => $paged,
    'post_type'      => array( 'row' ),
    genesis_custom_loop$query_args );

    The Dynamik Custom - CSS
    Paste this in:

    .page-template-my-templatesgenesis_rows-php .site-inner,
    .page-template-my-templatesgenesis_rows-php .content-sidebar-wrap,
    .page-template-my-templatesgenesis_rows-php .content {
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    .page-template-my-templatesgenesis_rows-php .content .entry {
    padding: 20px 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    .page-template-my-templatesgenesis_rows-php .content-sidebar-wrap,
    .page-template-my-templatesgenesis_rows-php .site-header .genesis-nav-menu {
    .page-template-my-templatesgenesis_rows-php .content .entry .entry-content,
    .page-template-my-templatesgenesis_rows-php .content .entry .entry-title {
    padding: 0 15px;
    margin: 0 auto;
    max-width: 1140px;

    Reload the wp-admin area page, or click on a wp-admin sidebar item like Dashboard..

    Ready to create Rows

    So now you have a Rows item in the Wordpress sidebar. Create as many rows as you like.

    The order of the rows is determined by Date Published.
    By way of a tip, you could create rows in reverse order, starting with the bottom row.
    Or you can edit the date for each row afterwards to change the order.

    OR.. much easier.. simply use this plugin - Post Types Order (thanks for suggesting, Hermie) - to make the order Drag-and-Drop.

    Styling Rows
    To target each Row in CSS, set a custom CSS class using the Genesis Custom Post Class (in Layout Settings)

    When targeting these classes in Dynamik Custom - CSS, prefix the class with .content eg.
    .content .row-even {
    background-color: #2894B1;

    This updated Genesis-friendly version receives it's styling from Dynamik Design settings for content and headings.
    But you may not necessarily want the same styling for your rows as you have for your inner pages

    So style the headings differently in Dynamik Custom - CSS using the selector:
    .page-template-my-templatesgenesis_rows-php .content .entry-title a

    ..and the content using:
    .page-template-my-templatesgenesis_rows-php .entry-content p

    If you want to style different Rows containing pages uniquely, set a Custom Body Class (in Layout Settings) on the containing page and use that instead of:

    So lets create the containing page now..
    Create a normal page and choose Genesis Rows as the template:

    You could set this page as your home page in Wordpress - Settings - Reading.

    Good luck!
    Last edited by simbasounds; 06-10-2014, 08:23 AM. Reason: Added Post Types Order suggestion from Hermie

  • #2
    Creating different Rows Pages using categories

    If you'd like to have several pages with different rows, decide on a category name to identify the different row container pages.
    Assign that category to each of the individual Rows, while editing them.

    We need to determine the ID of the category. Go to Rows - Categories

    Find the category name and click on it. Another page will load..

    Find the category ID in the URL eg. ..&tag_ID=3

    Now go to your container page (using the Genesis Rows template), which you want to use for that category.
    In Custom Fields, set the Name as query_args, and the Value to cat=[the category ID we got from the URL] eg.

    Use commas for multiple categories eg. cat=3,5
    Use a minus sign to exclude categories eg. cat=-5

    Repeat these steps for each unique page of rows..
    Last edited by simbasounds; 06-03-2014, 03:03 PM.


    • moondogsit
      moondogsit commented
      Editing a comment
      This is awesome... but I can't get specific rows to display on custom pages. I entered query_arg and the category ID correctly into the custom field. I followed your tutorial and doubled checked all the code. No idea why it isn't working.

    • simbasounds
      simbasounds commented
      Editing a comment
      query_arg or query_args (with an 's' on the end) ?

    • moondogsit
      moondogsit commented
      Editing a comment
      I tried both. query_arg and query_args
      Neither work. No idea why. If I figure it out I'll let you know what was wrong.

  • #3
    Share: I didn´t want the post info to show up in the rows, so I added this to the template (after "Remove the post meta" snippet, for example):

    PHP Code:
    //* Remove the entry meta in the entry header (requires HTML5 theme support)
    remove_action'genesis_entry_header''genesis_post_info'12 ); 


    • simbasounds
      simbasounds commented
      Editing a comment
      Good one thanks SiGa
      It was lurking at the bottom of my complete Custom Functions, so I forgot to add it to the template. Updating now..

  • #4
    Thanks guys and gals. Amazing. I shall understand it all in a couple or three months, I hope.


    • simbasounds
      simbasounds commented
      Editing a comment
      Yeah, my original intention was to a) make creating Rows easier, and b) 'hijack' the creation of html tags and css ids and classes so it could easily be integrated with existing parallax systems like VertiToy / DynaToy or Sridhar's One-Pager. This version with Genesis html and css doesn't achieve the latter goal as it stands. It doesn't have parallax scrolling or animation added to it yet (easy to do full-width color and images, though). So the next step would be for me or someone else to adapt one of those existing systems to this one (preferably using a Row's featured image as parallax background).

    • SiGa
      SiGa commented
      Editing a comment
      I put my try to a playground, here:
      For a few rows, you can well do the pseudo-parallax with CSS (and add a bit JS like in "Parallax" to have "real" parallax - though I´m not really convinced with that). It came into my mind it might also be possible to use ACF (or other custom) fields to add the background whenever needed... but for the moment it isn´t more than a thought. I also stumbled over this:

    • simbasounds
      simbasounds commented
      Editing a comment
      ah yes.. backstretch.js
      Will certainly add that when i'm done with my current workload.
      Looking forward to building onto this Rows project..

  • #5
    Installed the newest code today. So far so good. Categories works perfectly, so do custom classes. I decided to go this route instead of a EZ Home page but both would have worked.
    I start adding content tomorrow.

    Thanks again guys. I'm very excited to work on this for my site upgrade. I'll let you know what I learn along the way.


    • #6

      "The order of the rows is determined by Date Published.
      By way of a tip, you could create rows in reverse order, starting with the bottom row.
      Or you can edit the date for each row afterwards to change the order."

      You could also try "Post Types Order" plugin to order rows with drag & drop.
      Zigzagpress also uses this in combination with CPT to create row-based designs.
      Last edited by hermie; 06-10-2014, 07:58 AM.


      • simbasounds
        simbasounds commented
        Editing a comment
        I had thought of suggesting Post-Types-Order or similar, but at the time I had been looking for a native Wordpress or Genesis solution I could code into the system. But drag-and-drop definitely beats using numbered ordering. I'll add the suggestion to the post. Thanks Hermie.

    • #7
      Update: Some success with Set Featured Image version, not there yet

      I succeeded in building a version where Row backgrounds can be set using Set Featured Image for each Row, and applied with jQuery backstretch. Thanks for suggesting, SiGa. (a tricky feat* - see below).

      It worked beautifully, but the problem is that Backstretch is more suitable for mobile. On computer screens it over-stretches the images. Now I understand why Sridhar Katakam implements it conditionally with the Mobble plugin for mobile detection, so it switches between backstretch for mobile and a simple background image for computer screens.

      So when I get some free time, I'll be aiming for a build which can still implement Set Featured Image, and then also maybe add a parallax feature, say with a Dynamik label.
      In the meantime if anyone feels up to forking this with the above functionality, here's the current modified template, and the modified backstretch-set.js. As it stands I wouldn't recommend using it on a production site due to the backstretch overstretch issue.

      * To Set Featured Image with backstretch for multiple items on a page: in the template I encoded a JSON object containing ALL Row featured image data (if set), build a corresponding JSON object for Row IDs, then decode the JSON objects as arrays in JavaScript, loop through IDs and Row image data, re-apply using backstretch.


      • #8
        Simon, not sure and not tested yet, but this looks to me like it could be adapted to address rows with a certain class added maybe:


        • #9
          Yes, that's the idea : ) Nice tutorial, thanks SiGa..

          Except I'm still not sure if it'll work for multiple items.
          A little snowed-under to look at it properly right now..

          But I've also been reconsidering the whole thing.
          A problem with this system is that it doesn't play nicely with Yoast which reads page content, not template content, to do SEO analysis.

          I've half come to the conclusion that the best way to do full-width WYSIWYG rows is actually to simply use a normal page with HTML in the content area.
          Then use a body class to target it in CSS to force it full-width.

          Some of my clients still like this system for the ability to re-order rows.
          And they've gotten used to copy-pasting everything from the front end into the container page content area for Yoast : )


          • #10
            Some of my clients still like this system for the ability to re-order rows.
            This - and not being restricted to a certain number of rows. And using WYSIWYG and query_args. And not bother that much that Wordpress editor will destroy too much HTML accidently (if you use one page for the whole content). But that´s me and my reasons I still like your solution quite much.

            The tutorial is quite new and when I saw it, I instantly though of this. I surely plan to try it as soon as I get hold of some spare time.


            • simbasounds
              simbasounds commented
              Editing a comment
              Glad peeps out there have been finding it useful
              Yes, keep us posted about backstretch if / when you have time, SiGa.

          • #11
            Have you seen this?

            Advanced Custom Fields for full width rows (optional columns) with faux backstretch.

            Would this improve the Yoast/SEO issue for template content?


            • simbasounds
              simbasounds commented
              Editing a comment
              I'm intrigued.. will look at it when I'm not so busy. Thanks Kellylise : )

              Without watching the video my understanding is Yoast only reads the post / page content, not hooked content, like Genesis hooks or custom fields for SEO analysis.
              On my long to-do list for when I have time is asking Yoast if there's a hack available because I'm sure they get asked this a lot.
              Or, failing that, looking at hacking it myself.. pretty far down the list, though..

          • #12
            I have an idea: why don't you turn this feature into a plugin for us non-coders?


            • simbasounds
              simbasounds commented
              Editing a comment
              Time. Busy busy busy on jobs and trying to improve my own JavaScript / jQuery coding skills in my spare time.
              (by the same token I could suggest: 1. Learning to code 2. Writing a plugin)

              But I have considered it. Certainly the logical step, and not difficult in the form as it stands here in this tutorial. But then extra considerations come up:

              1. Currently it requires another plugin to sort the rows. Seems strange to make a plugin that requires another plugin. So I'd have to effectively fork Post Types Order plugin and include it in mine, which is legal according to WP licensing, so it's achievable I guess.

              2. In it's current form it requires the user to tweak the code. With a plugin you could have an interface. But time, and point number 4.

              3. There's much room for improvement. Ok, it does seem people are happy with it, but then..

              4. Plugins (or any packaged solution) increase the level of expectation to add features and give tech support.
              This is a biggie. I've been there, done that, and holding-off doing any plugins or packaged solutions for this reason. Maybe in the future again..

              Since this is a copy-paste solution I do consider it to be a non-coder solution, with the added bonus that non-coders can see what goes where and at some point, why and how. It's a free "leg-up" to another level of Dynamik geekdom
              Last edited by simbasounds; 10-18-2014, 07:13 AM.

          • #13
            This is great - thank you. I added this to my Rows Page Template so I could set my blog to show excerpts without affecting this.

            add_filter( 'genesis_pre_get_option_content_archive', 'dynamik_format_content' );
            add_filter( 'genesis_pre_get_option_content_archive_limit', 'dynamik_content_limit' );

            function dynamik_format_content() {
            return 'full';
            function dynamik_content_limit() {
            return '0';

            I'm not sure if it was actually necessary.


            • #14
              I created similar system for custom sidebar content, using CPT-onomies plugin. The custom post become a Taxonomy for pages.

              I have a client that I built a rather large site with 100+ pages of content.

              He wanted a system where-by he could include a number of forms and other custom content on each page (sidebar).
              Using this system he can include any standard HTML content including things like Gravity Forms shortcodes on the sidebar.

              About the only limitation is custom ordering sidebar content. This is not a huge limitation as there's generally only one or two custom items on any given page.

              What I really like about Dynamik, is this type of custom programming can easily be incorporated in a site without resorting to fancy FTP access.


              • #15
                Confession: I use Ultimate Addons for Visual Composer now.
                It's truly da bomb..
                Last edited by simbasounds; 12-14-2014, 07:20 AM.