Wordpress container question

jurjen
115 Posts
jurjen posted this 16 August 2015

Hello Themler community.

I am stuck. I am using Wordpress and created a template with a sheet that is not set to full width.

On a page or a post I would like to be able to have full-page-width or full-page-background headers for certain text blocks I put on the post.

So in the attached example I have a template where page or post content is displayed within the blue area.

The designer made headers for blocks on the content that are full page width. Like the orange blocks.

Is there a way I can set a container within a container to full page width with bootstrap?

Tried a lot of things. But I am not able to get it right.

Thanks in advance.
Jurjen

Hello Themler community. I am stuck. I am using Wordpress and created a template with a sheet that is not set to full width. On a page or a post I would like to be able to have full-page-width or full-page-background headers for certain text blocks I put on the post. So in the attached example I have a template where page or post content is displayed within the blue area. The designer made headers for blocks on the content that are full page width. Like the orange blocks. Is there a way I can set a container within a container to full page width with bootstrap? Tried a lot of things. But I am not able to get it right. Thanks in advance. Jurjen
Vote to pay developers attention to this features or issue.
9 Comments
Order By: Standard | Newest
Stagger Lee
1840 Posts
Stagger Lee posted this 16 August 2015

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.

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.
Stagger Lee
1840 Posts
Stagger Lee posted this 16 August 2015

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 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.

Last edited 16 August 2015 by Stagger Lee

Stagger Lee
1840 Posts
Stagger Lee posted this 16 August 2015

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(); ?>

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(); ?>
Stagger Lee
1840 Posts
Stagger Lee posted this 16 August 2015

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

Just change name of the function, duplicate it, adapt echo code accordinly and use third post editor field.
jurjen
115 Posts
jurjen posted this 16 August 2015

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

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
Stagger Lee
1840 Posts
Stagger Lee posted this 16 August 2015

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

Can you give a screenshot with content inside all those blocks ? And do you add content with Themler or via WP backend ?
Stagger Lee
1840 Posts
Stagger Lee posted this 16 August 2015

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

And do you talk about Post/Page view or Blog/Archive listing ? Try to explain it a bit better.
Stagger Lee
1840 Posts
Stagger Lee posted this 16 August 2015

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 ?

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 ?

Last edited 16 August 2015 by Stagger Lee

jurjen
115 Posts
jurjen posted this 18 August 2015

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

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
You must log in or register to leave comments