YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar paul.lemmens asked

[Tutorial] Adding new widget/module positions to Yootheme Pro

There was one thing missing in Yootheme Pro, more widget/module positions.

I figured out how to do this, but this means changing Yootheme Pro core files! As I could not find another way to do this...

First file: config.php

Around line 25-33 you can see the code below

'positions' => [

        'toolbar-left' => 'Toolbar Left',  
        'toolbar-right' => 'Toolbar Right',  
        'navbar' => 'Navbar',  
        'header' => 'Header',  
        'top' => 'Top',  
        'sidebar' => 'Sidebar',  
        'bottom' => 'Bottom',  
        'mobile' => 'Mobile',

],

Change it to

'positions' => [

        'toolbar-left' => 'Toolbar Left',  
        'toolbar-right' => 'Toolbar Right',  
        'navbar' => 'Navbar',  
        'header' => 'Header',  
        'top' => 'Top',  
        'topb' => 'Top B',  
        'topc' => 'Top C',  
        'topd' => 'Top D',  
        'tope' => 'Top E',  
        'maintop' => 'Main Top',  
        'mainbottom' => 'Main Bottom',  
        'sidebar' => 'Sidebar',  
        'bottom' => 'Bottom',  
        'bottomb' => 'Bottom B',  
        'bottomc' => 'Bottom C',  
        'bottomd' => 'Bottom D',  
        'bottome' => 'Bottom E',  
        'mobile' => 'Mobile',

],

When saving the config.php file, the positions should show up now in the widget menu or module menu. This just defines the position but won't make it show up on your site just yet.

So open your layout file, in Wordpress that's header.php and footer.php (as I can't access the Joomla files, this part is for Wordpress users only)

Find this line around line 67

<?= get_view('section', ['name' => 'top']) ?>

and change it to this

<?= get_view('section', ['name' => 'top']) ?>

<?= get_view('section', ['name' => 'topb']) ?>

<?= get_view('section', ['name' => 'topc']) ?>

<?= get_view('section', ['name' => 'topd']) ?>

<?= get_view('section', ['name' => 'tope']) ?>

Find this around line 95

<?php if ($site['breadcrumbs']) : ?>

and add this line BEFORE the line above

<?= get_view('section', ['name' => 'maintop']) ?>

In footer.php find this around line 13

    <?php if (!$theme->get('builder')) : ?>

and add this line after the line above

<?= get_view('section', ['name' => 'mainbottom']) ?>

The last part is changing this

<?= get_view('section', ['name' => 'bottom']) ?>

to this

<?= get_view('section', ['name' => 'bottom']) ?>  

<?= get_view('section', ['name' => 'bottomb']) ?>  

<?= get_view('section', ['name' => 'bottomc']) ?>  

<?= get_view('section', ['name' => 'bottomd']) ?>  

<?= get_view('section', ['name' => 'bottome']) ?>

This makes the widgets show up on your website in Yootheme Pro.

For the final part, the styling

Layout

Open the file config/layout.php and add the widget positions to the menu so this

            'site' => 'Site',  
            'header' => 'Header',  
            'mobile' => 'Mobile',  
            'top' => 'Top',  
            'sidebar' => 'Sidebar',  
            'bottom' => 'Bottom',  
            'footer' => 'Footer',  
            'system-blog' => 'Blog',  
            'system-post' => 'Post',  
            'woocommere' => 'WooCommerce',

becomes this

            'site' => 'Site',  
            'header' => 'Header',  
            'mobile' => 'Mobile',  
            'top' => 'Top',  
            'topb' => 'Top B',  
            'topc' => 'Top C',  
            'topd' => 'Top D',  
            'tope' => 'Top E',  
            'maintop' => 'Maintop',  
            'mainbottom' => 'Mainbottom',  
            'sidebar' => 'Sidebar',  
            'bottom' => 'Bottom',  
            'bottomb' => 'Bottom B',  
            'bottomc' => 'Bottom C',  
            'bottomd' => 'Bottom D',  
            'bottome' => 'Bottom E',  
            'footer' => 'Footer',  
            'system-blog' => 'Blog',  
            'system-post' => 'Post',  
            'woocommere' => 'WooCommerce',

and for each module positions added, add this block and change 'top' into other widget positions

    'top-media' => [  
        'title' => 'Image/Video',  
        'width' => 400,  
        'fields' => [

            'top.image_dimension' => [

                'type' => 'grid',  
                'description' => 'Set the width and height in pixels (e.g. 600). Setting just one value preserves the original proportions. The image will be resized and cropped automatically.',  
                'fields' => [

                    'top.image_width' => [  
                        'label' => 'Width',  
                        'width' => '1-2',  
                        'attrs' => [  
                            'placeholder' => 'auto',  
                            'lazy' => true,  
                        ],  
                    ],

                    'top.image_height' => [  
                        'label' => 'Height',  
                        'width' => '1-2',  
                        'attrs' => [  
                            'placeholder' => 'auto',  
                            'lazy' => true,  
                        ],  
                    ],

                ],  
                'show' => 'top.style == "image"',

            ],

            'top.image_size' => [  
                'label' => 'Image Size',  
                'description' => 'Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color.',  
                'type' => 'select',  
                'options' => [  
                    'Auto' => '',  
                    'Cover' => 'cover',  
                    'Contain' => 'contain',  
                ],  
                'show' => 'top.style == "image"',  
            ],

            'top.image_position' => [  
                'label' => 'Image Position',  
                'description' => 'Set the initial background position, relative to the section layer.',  
                'type' => 'select',  
                'default' => '',  
                'options' => [  
                    'Top Left' => 'top-left',  
                    'Top Center' => 'top-center',  
                    'Top Right' => 'top-right',  
                    'Center Left' => 'center-left',  
                    'Center Center' => '',  
                    'Center Right' => 'center-right',  
                    'Bottom Left' => 'bottom-left',  
                    'Bottom Center' => 'bottom-center',  
                    'Bottom Right' => 'bottom-right',  
                ],  
                'show' => 'top.style == "image"',  
            ],

            'top.image_fixed' => [  
                'label' => 'Image Attachment',  
                'text' => 'Fix the background with regard to the viewport.',  
                'type' => 'checkbox',  
                'show' => 'top.style == "image"',  
            ],

            'top.image_visibility' => [  
                'label' => 'Visibility',  
                'description' => 'Display the image only on this device width and larger.',  
                'type' => 'select',  
                'default' => '',  
                'options' => [  
                    'Always' => '',  
                    'Small (Phone)' => 's',  
                    'Medium (Tablet)' => 'm',  
                    'Large (Desktop)' => 'l',  
                    'X-Large (Large Screens)' => 'xl',  
                ],  
                'show' => 'top.style == "image"',  
            ],

            'top.video_dimension' => [

                'type' => 'grid',  
                'description' => 'Set the video dimensions.',  
                'fields' => [

                    'video_width' => [  
                        'label' => 'Width',  
                        'default' => '',  
                        'width' => '1-2',  
                     ],

                    'video_height' => [  
                        'label' => 'Height',  
                        'default' => '',  
                        'width' => '1-2',  
                    ],

                ],  
                'show' => 'top.style == "video"',

            ],

            'top.media_background' => [  
                'label' => 'Background Color',  
                'description' => 'Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn\'t cover the whole section.',  
                'type' => 'color',  
            ],

            'top.media_blend_mode' => [  
                'label' => 'Blend Mode',  
                'description' => 'Determine how the image or video will blend with the background color.',  
                'type' => 'select',  
                'default' => '',  
                'options' => [  
                    'Normal' => '',  
                    'Multiply' => 'multiply',  
                    'Screen' => 'screen',  
                    'Overlay' => 'overlay',  
                    'Darken' => 'darken',  
                    'Lighten' => 'lighten',  
                    'Color-dodge' => 'color-dodge',  
                    'Color-burn' => 'color-burn',  
                    'Hard-light' => 'hard-light',  
                    'Soft-light' => 'soft-light',  
                    'Difference' => 'difference',  
                    'Exclusion' => 'exclusion',  
                    'Hue' => 'hue',  
                    'Saturation' => 'saturation',  
                    'Color' => 'color',  
                    'Luminosity' => 'luminosity',  
                ],  
            ],

            'top.media_overlay' => [  
                'label' => 'Overlay Color',  
                'description' => 'Set an additional transparent overlay to soften the image or video.',  
                'type' => 'color',  
            ],

        ],  
    ],

To add support for the widget styling in these widget positions, open config/modules.php and add the module positions in these lines.

'show' => '$match(position, "(top|bottom|sidebar)")',

becomes

'show' => '$match(position, "(top|topb|topc|topd|tope|maintop|mainbottom|bottom|bottomb|bottomc|bottomd|bottome|sidebar)")',

Did I miss something or do you have the answer to add this without changing core files, please enlighten me!

Thanks!

  • Tutorial
  • YOOtheme Pro

Edited

10 Answers

14

Avatar sascha Yootheme answered

IMPORTANT UPDATE

We just released the builder module with YOOtheme Pro 1.7 which lets you dynamically create sections with module positions on the fly. Therefore, it's not recommended to add new positions like described in this tutorial. Instead use the new builder module.

Here is a discussion thread with detailed solutions and we also created a comprehensive documentation for the builder module.

Edited

9

Avatar bruntt answered

Why not just give us the standard module positions from a basic warp 7 template without forcing us to hack your software?

3

Avatar maggus86 answered

I figured out how to do this, but this means changing Yootheme Pro core files! As I could not find another way to do this...

First of all, thank you for this great tutorial!

@staff: It would be great if could use all this as a child theme override so that YOOtheme core files won't be touched :-)

2

Avatar mary.weeks answered

Like everyone else I'm very disappointed because this functionality is not there and it literally makes PRO unusable for me. But why do we need positions back?

Why not build in the ability to use the drag and drop builder to build as many templates as we need and that then can be assigned to pages? And then also add the ability to build elements that can be built in the builder saved as an "element," "widget" or whatever you want to call it, and then inserted into the templates. The insert code for the elements would include the ability to assign them to menu items, tags or categories, and then they will appear on those pages as assigned.

1

Avatar kahani answered

Agree with everyone here. Building the homepage and handcrafted pages is easier with yoothemepro, but taking away many of the global positions we were used to and their global styling has made building sites with lots of dynamic pages tedious.

Edited

0

Avatar geeksonthebeach answered

This is exactly what I need, but for Joomla.

Are there tutorials out there or instructions on which files to edit for Joomla?

Basing this on your statement here: "So open your layout file, in Wordpress that's header.php and footer.php (as I can't access the Joomla files, this part is for Wordpress users only)"

Thanks,

M

0

Avatar paul.lemmens answered

Hi geeksonthebeach,

I think it's the index.php out the top of my head, correct me if I am wrong though.

It's probably the same line or a similar line for placing the positions in your theme. Perhaps Yootheme can help us out answering your question :)

Good luck!

0

Avatar bytekultur answered

Yes, overrides for the index.php and the config.php (in a child theme) would be great

0

Avatar andras.mihaly.nagy answered

Perfect would be to have the possibility to define in the layout own desired positions for the whole site (sidebars, headerpositions, footer etc.)

0

Avatar michael.salla.64 answered

I vote to have this implemented soon as can to the core. I've curious to know what pro wasn't just add to 7 so we could have the best of all that yootheme is about and becoming.

Know someone who can answer? Share a link to this question via email or twitter.