Wordpress container question

You cannot break content area in WordPress this way. Server doesnt know where in the text to make a break. You can only use Themler to add text/html in 2 of those 3 blue areas.

What you can do is: Install ACF plugin and make 2 additional HTML TinyMce fields. Now you will have 3 and users will fill text in all 3.

If those in orange (headers) need to be filled with text by User best is to make a Repeatable field with ACF with all in all 2 fields. One simple text area field for header, ot text input field, second TinyMce field. User can repeat it 3 times if needed.

When finished reload button in Themler and style blocks as needed. Before that add code to display ACF fields via CMS Code block. Best for headers is one row wirh one columne, full background width.
This way you will have styling options in Themler.

If you dont need User input in orange headers you can use 2 additional post editors via functions.php and display them in CMS Code block:

/* Second Post Editor TinyMCE Editor */
class SubContentEditor {


    public $meta_key = 'subcontent';
    public $meta_label = 'Right Side'; // Headline above editor
    public $post_type = array( 'page' ); // The post type in which the editor should display
    public $wpautop = true; // Automatically create paragraphs?


    function __construct() {
        add_action( 'edit_form_after_editor', array( &$this, 'edit_form_after_editor' ) );
        add_action( 'save_post', array( &$this, 'save_post' ) );
        add_action( 'init', array( &$this, 'init' ) );
    }


    public function init() {
        $this->meta_key = apply_filters( 'roman-sce-meta_key', $this->meta_key );
        $this->post_type = apply_filters( 'roman-sce-post_type', $this->post_type );
        $this->meta_label = apply_filters( 'roman-sce-meta_label', $this->meta_label );
        $this->wpautop = apply_filters( 'roman-sce-wpautop', $this->wpautop );
    }


    public function edit_form_after_editor() {
        if ( !is_admin() ) { return; }


        if ( in_array( get_post_type( $GLOBALS['post'] ), $this->post_type ) ) { return; }


        $value = $this->get_the_subcontent();


        $sc_arg = array(
            'textarea_rows' => apply_filters( 'roman-sce-row', 10 ),
            'wpautop' => $this->wpautop,
            'media_buttons' => apply_filters( 'roman-sce-media_buttons', true ),
            'tinymce' => apply_filters( 'roman-sce-tinymce', true ),
        );


        echo '<h3 class="subcontentLabel" style="margin-top:15px;">' . $this->meta_label . '</h3>';
        wp_editor( $value, 'subcontent', $sc_arg );


    }


    public function save_post( $post_id ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return $post_id;
        }
        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return $post_id;
        }


        if ( isset ( $_POST[ $this->meta_key ] ) ) {
            return update_post_meta( $post_id, $this->meta_key, $_POST[ $this->meta_key ] );
        }
        delete_post_meta( $post_id, $this->meta_key );


        return $post_id;
    }


    public function get_the_subcontent() {
        global $post;
        $subcontent = do_shortcode(get_post_meta( $post->ID, $this->meta_key, true ));
        if ( $this->wpautop == true ) {
            return wpautop( $subcontent );
        } else {
            return $subcontent;
        }
    }


}
$romanSCE = new SubContentEditor();


function get_the_subcontent() {
    global $romanSCE;
    return $romanSCE->get_the_subcontent();
}


/** 
  * use get_the_subcontent() where you want the content of the
  * second editor to display, just like the_content
  */
function the_subcontent() {
    echo get_the_subcontent();
}

Code for CMS Code block:

<?php echo get_the_subcontent(); ?>

Just change name of the function, duplicate it, adapt echo code accordinly and use third post editor field.

Hi Stagger,

Thank you. But, I might not be clear enough. It was not quite what I was looking for.

I solved it for now by making a custom bd-layoutcontainer-xyz with the following style sheet
@media (max-width: 749px) {
.bd-layoutcontainer-xyz {
margin-left: -10px;
margin-right: -10px;
padding-left:10px;
padding-right:10px;
}
}

@media (min-width: 750px) {
.bd-layoutcontainer-vakapart {
margin-left: -50%;
margin-right: -50%;
}
}

With this container and style I can place again a container-inner in this container to align the text with the page width.

But I suspect that the bootstrap framework already has something like this in it. Basically that is my question. Is there something already in bootstrap for this?

Regards
Jurjen

Can you give a screenshot with content inside all those blocks ?
And do you add content with Themler or via WP backend ?

And do you talk about Post/Page view or Blog/Archive listing ? Try to explain it a bit better.

This in picture is very simple in Themler, but I dont know what do you want. You did not explain what goes inside. Post Title, Text control code, empty just color, etc..

Orange:

• New row control.
• Delete all columns except one.
• Row width = Full background

• Column align option = center, or not, depends of content.

• If you need some content inside add new control after wish inside this one column.

Blue:

• New row, one column.
• Width = Sheet width
• Add new control inside for content after wish, CMS Code, HTML, Text, widget, etc..

It is all, judging by picture.

Why do you use responsive queries now ?

Hi Stagger,

I solved my issue with what you described above for the frontpage I needed to created.

But....

If you make a wordpress design with a page width design. You cannot uses layout-inner in your HTML within your post. So you have to custome code it I think.

However I solved my issue by making blocks and set the row width or container width.

Regards and thanks
Jurjen