[FIXED] How to only style the text inside a p tag

Issue

<div>
<p style="font-size=40px;">
<b>Hello there, welcome</b>
<br/>
To this website
</p>
<p>Some other text</p>

How do I only grab the text inside the first p tag ("To This Website")? I can't give it an class or ID, because it's done with visual composer in wordpress and I can also not style it in wordpress, but I only need to style that part.

Solution

Maybe something like this?

http://codepen.io/anon/pen/YGpvxE

snippet Example below

    p:first-child {
      color: red !important; /** Use important only in very rare situations **/
    }
    
    p b {
      color: initial;
    }

 <div>
    <p>
    <b>Hello there, welcome</b>
    <br/>
    To this website
    </p>
    <p>Some other text</p>
    </div>

EDIT: To override the inline styling you can use !important in your css.

Answered By - mtch9

Answer Checked By - Senaida (PHPFixing Volunteer)

Read More

[FIXED] How to remove the built-in theme Visual Composer module and install the plugin instead?

Issue

There is a site on wordpress with theme which is built in the module designer WPBakery Visual Composer. There is a problem with it - some elements have conflict with new version of wordpress, because it is quite outdated. Question: how to undock a built-in designer of the subject and set the Visual Composer plugin. Here is a code for the call in the theme's functions.php designer:

if (!class_exists('WPBakeryVisualComposerAbstract')) {
  $dir = dirname(__FILE__) . '/wpbakery/';
  $composer_settings = Array(
      'APP_ROOT'      => $dir . '/js_composer',
      'WP_ROOT'       => dirname( dirname( dirname( dirname($dir ) ) ) ). '/',
      'APP_DIR'       => basename( $dir ) . '/js_composer/',
      'CONFIG'        => $dir . '/js_composer/config/',
      'ASSETS_DIR'    => 'assets/',
      'COMPOSER'      => $dir . '/js_composer/composer/',
      'COMPOSER_LIB'  => $dir . '/js_composer/composer/lib/',
      'SHORTCODES_LIB'  => $dir . '/js_composer/composer/lib/shortcodes/',
      'USER_DIR_NAME'  => 'extendvc/vc_templates', /* Path relative to your current theme, where VC should look for new shortcode templates */

      //for which content types Visual Composer should be enabled by default
      'default_post_types' => Array('page','post','portfolio_page')
  );
  require_once locate_template('/wpbakery/js_composer/js_composer.php');
  $wpVC_setup->init($composer_settings);
}

// Initialising Shortcodes
if (class_exists('WPBakeryVisualComposerAbstract')) {
  require_once locate_template('/extendvc/extend-vc.php');
}

If I comment these lines and try to install the plugin of Visual Composer, I get the following error:

Fatal error: Cannot redeclare wpb_getImageBySize() (previously declared in /home/likemedi/public_html/wp-content/themes/subway/wpbakery‌​/js_composer/compose‌​r/lib/helpers.php:15‌​) in /home/likemedi/public_html/wp-content/plugins/js_composer/in‌​clude/helpers/helper‌​s.php on line 114

Solution

Try renaming the plugin under wp-content > themes > plugins >.

Just rename the plugin , and reload the admin page.

Answered By - lazy rabbit

Answer Checked By - Terry (PHPFixing Volunteer)

Read More

[FIXED] How can I make a full width and height image inside a column with text, overlay and rounded corners in visual composer?

Issue

I know that questions like this aren't welcomed here but I'm struggling a long time to find a solution for making an image with overlay and rounded corners and a text inside it in visual composer. I'm pretty sure that this example was actually made in visual composer but I can figure out what element or combination of elements it was used here. Please help me. Thanks.

Please note that this is not a full width row but a 1/2 column.

Solution

To add an background image to your column - edit you column, and go into the tab "design options", here you can set the background image.

To add padding to your text box inside - Do the same and add padding.

To get the round corners - add an extra css class and style that in style.css with border-radius

Answered By - Stender

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to get all custom post types in wordpress?

Issue

I am trying to make a shortcode for Visual Composer. I have to get all the custom post types as dropdown. I am using the get_post_types() function, but it returns an empty array.

Here is my code:

 /*Post type shortcode*/
 add_action( 'vc_before_init', 'post_type_shortcode');
function post_type_shortcode(){
$args = array( 'public' => true, '_builtin' => false );
$output = 'names'; //'names'; // names or objects, note names is the default
$operator = 'and'; // 'and' or 'or'
$custom_post_types = get_post_types( $args, $output, $operator );
vc_map( array(
    "name" => __( "Display Post Type", "saue" ),
    "description" => "Display post type",
    "base" => "display_post_type",
    "class" => "",
    "category" => __( "Saue Theme", "saue"),
    "params" => array(
        array(
            "type"          => "dropdown",
                    //"holder"        => "div",
            "heading"       => __( "Post Type", "saue" ),
            "admin_label" => true,
            "param_name"    => "post_type",
            "value"         => $custom_post_types,
            ),
        )
    ) );

}

I have also tried to get it in the functions.php but result is same.

I also used add_action('init',"function_name');, it works within the hook but not outside of the hook.

Can any one help me please?

Solution

Try with admin_init hook, which runs after init:

/*Post type shortcode*/
add_action( 'admin_init', 'post_type_shortcode');
function post_type_shortcode(){
$args = array( 'public' => true, '_builtin' => false );
$output = 'names'; //'names'; // names or objects, note names is the default
$operator = 'and'; // 'and' or 'or'
$custom_post_types = get_post_types( $args, $output, $operator );
vc_map( array(
    "name" => __( "Display Post Type", "saue" ),
    "description" => "Display post type",
    "base" => "display_post_type",
    "class" => "",
    "category" => __( "Saue Theme", "saue"),
    "params" => array(
        array(
            "type"          => "dropdown",
                    //"holder"        => "div",
            "heading"       => __( "Post Type", "saue" ),
            "admin_label" => true,
            "param_name"    => "post_type",
            "value"         => $custom_post_types,
            ),
        )
    ) );

}

Answered By - Hasan Shahriar

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] How to select and attach event handler to visual composer element using jQuery?

Issue

I have a task to generate option using ajax in visual composer element, but when I try to select the element and attach an event using jQuery.. I can't trigger the event. Below is the jQuery script that I used to select the visual composer element.

jQuery('.post_id').on('change', function(){ console.log('Changed'); });

OR

jQuery(document).on('change', '.post-id', function(){ console.log('Change'); })

This is the screenshot of the visual composer element that I want to select using jQuery.

Thanks.

Solution

replace '.post_id' to '[name=post_id]'

Answered By - diavolic

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] What is causing images to skew left on my WP page?

Issue

I'm making a website on WP, and I'm using Visual Composer. No blog, just pages. For some reason any images I put on the page skew left. When I load the page, initially the image is in the right place. But then immediately as the page loads they are pushed left. Even if they're inside of a row, as seen here:

The image is inside the same row as the text, yet the text is correctly aligned, and the image is skewed. I put a border around the picture and you can see it even skews from the border.

I'm using the page inspector to try and figure out what in the stylesheet could be causing this, but I've already disabled/changed max-width. The margin-left for some reason says -150 and I can't change it, the inspector keeps saying that even though I've changed to 0 it both on the Stylesheet Editor and in Customize -> Additional CSS.

Any idea what could be causing this?

Solution

I have no idea why, but it turns out that the solution was to get rid of the Jetpack plugin. It was causing issues with images and sliders. Everything's back to normal.

Answered By - GeleiaDeMocoto

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How to display custom shortcode single image in visual composer in wordpress?

Issue

I am trying to display custom fileds created by me in visual composer by using custom short codes. This custom short codes run fine when i am working with heading and text area_html ,but now i want to add single image in this sort code,but in result i am not getting image,it displays alt attribute and in back-end side i am showing my single image that stores in custom shortcode field. here i am including my code.

1) code for creating custom shortcode

vc_map( array(
    'name' => __( 'trionn_header' ),
    'base' => 'trionn_header',
    'category' => ( 'trionn code' ),
    'params' => array(
                "type" => "attach_image",
            "holder" => "img",
            "class" => "",
            "heading" => __( "Hintergrundbild", "my-text-domain" ),
            "param_name" => "image_url",
            "value" => __( "", "my-text-domain" ),
            "description" => __( lade eins hoch", "my-text-domain" )
        )
) );

2) code in separate function-name file

<?php
/* Ordered List shortcode */
if (!function_exists('trionn_header')) {
    function trionn_header($atts, $content) {
           $atts = shortcode_atts(
            array(
                'image_url' => ''
            ), $atts, 'trionn_header'
        );

        $imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 

        $html = '<img src="' . $imageSrc[0] .'" alt="' . $atts['title'] . '"/>';
        return $html;
        }

    add_shortcode('trionn_header', 'trionn_header');
}

Solution

I found solution for your question,try this in your code

In param tag write this array after main param attribute:

array(
                "type" => "attach_image",
                "heading" => "Image",
                "param_name" => "image",
                'admin_label' => true
            )

paste below code in your function_name file:

<?php
// Trionn header custom code // 
if (!function_exists('trionn_header')) {

    function trionn_header($atts, $content = null) {
        $args = array(
            'title' => __( 'This is the custom shortcode' ),
            'title_color' => '#000000',
            'content' => 'your discrption here',
            "image"             => "",
        );

        extract(shortcode_atts($args, $atts));

        //init variables
        $html               = "";
        $image_classes      = "";
        $image_src          = $image;

        if (is_numeric($image)) {
            $image_src = wp_get_attachment_url($image);
        }


        // generate output for heading and discription
        $html = '<h1 class="trionn header ' . $atts['style']. '" style="color: ' . $atts['title_color'] . '">'. $atts['title'] . '</h1>'.   "<div class=content>" . $content . "</div>";

        // generate output for single image
        $html .= "<img itemprop='image' class='{$image_classes}' src='{$image_src}' alt='' style='{$images_styles}' />";

        return $html;
    }
    add_shortcode('trionn_header', 'trionn_header');
}

Enjoy, thank me later

Answered By - Avi

Answer Checked By - Marie Seifert (PHPFixing Admin)

Read More

[FIXED] How can I use custom widget in Visual Composer or conversion it to Visual Composer Element?

Issue

Visual Composer only show wordpress's widgets. And custom made widget not showing in Visual Composer. I want to know how can I use custom widget in Visual Composer or conversion it to Visual Composer Element? Or how can I add element for Visual Composer by myself

Solution

http://www.wpelixir.com/how-to-create-new-element-in-visual-composer/ Here is the URL for add the new block of custom code into visual composer block area, this will help you for creating a new element.

Answered By - maulik

Answer Checked By - David Marino (PHPFixing Volunteer)

Read More

[FIXED] How to set multi default value in type checkbox Visual Composer shortcode?

Issue

I have code multi checkbox here:

array(
        "type"        => "checkbox",
        "heading"     => esc_html__( 'Theme Data', 'my-theme' ),
        "param_name"  => "pr_name",
        "admin_label" => true,
        "value"       => array(
            esc_html__( 'Department', 'my-theme' ) => 'department',
            esc_html__( 'Salarry', 'my-theme' ) => 'salarry',
            esc_html__( 'Address', 'my-theme' ) => 'address',
            esc_html__( 'Degree', 'my-theme' ) => 'degree',
            esc_html__( 'Work time', 'my-theme' ) => 'time',
            esc_html__( 'End time', 'my-theme' ) => 'enddate'
        ),
        'std' => array('department', 'salarry'),
    );

Yes, this code not working. How to checked value default is: department and salarry ?

Where is wrong? Please help me.

Solution

you can just use 'department,salarry' as the value of the 'std' key.

'std' => 'department,salarry',

Answered By - Wesley - Synio

Answer Checked By - Marilyn (PHPFixing Volunteer)

Read More

[FIXED] How to show new custom meta box in visual composer in front end

Issue

i have create a custom meta box for visual composer and its working fine i admin section

add_action( 'vc_before_init', 'custome_team_section_createWithVC' );


function custome_team_section_createWithVC() {
   vc_map( array(
      "name" => esc_html__( "Custome Team Box", "custome" ),
      "base" => "team_box",
      "category" => "Custome",
      "params" => array( 

        array(
            'type' => 'attach_image',
            'heading' => esc_html__( 'Member Image', 'custome' ),
            'param_name' => 'image_url',
            'description' => esc_html__( 'Add Member Image', 'custome' ),
        ),  

        array(
            "type" => "textfield",
            "heading" => esc_html__("Name", "custome"),
            "param_name" => "name",
            "description" => esc_html__("Add member name.", "custome"),
        "adm    in_label" => true,
        ),    

        array(
            "type" => "textfield",
            "heading" => esc_html__("Job", "custome"),
            "param_name" => "position",
            "description" => esc_html__("Add member position.", "custome"),
        ),

        array(
            "type" => "textarea",
            "heading" => esc_html__("About Member", "custome"),
            "param_name" => "contentm",
            "description" => esc_html__("Add content about the member.", "custome"),
        ),

        array(
            'type' => 'param_group',
            'heading' => esc_html__( 'Social', 'custome' ),
            'param_name' => 'social',
            'value' => urlencode( json_encode( array(
                array(
                    'title' => esc_html__( 'facebook', 'custome' )
                ),
            ) ) ),
            'group' => 'Social',
            'params' => array(
                array(
                    'type' => 'vc_link',
                    'heading' => esc_html__( 'URL (Link)', 'custome' ),
                    'param_name' => 'link',
                    'description' => esc_html__( 'Add a url for social box.', 'custome' ),
                ),  

                array(
                    'type' => 'iconpicker',
                    'heading' => esc_html__( 'Icon', 'custome' ),
                    'param_name' => 'icon_fontawesome',
                    'value' => 'fa fa-info-circle',
                    'settings' => array(
                        'emptyIcon' => false, // default true, display an "EMPTY" icon?
                        'iconsPerPage' => 200, // default 100, how many icons per/page to display
                    ),
                    'description' => esc_html__( 'Select icon from library.', 'custome' ),
                    'admin_label' => true,
                ),

            )
        ),

      ),
   ) );
}

but i dont know how it will show the content in front end i am using the default wordpress theme twenty seventeen and when i check front end after create the page with this meta box its showing the default short codes as showwn in image

what code i have to use in either functions.php or page.php so that it show the custom meta box in front end correctly

Thanks

Solution

Please do not call this a 'custom meta box', that's something else, read here.

You are adding your custom shortcode to the WPBakery Page Builder (formerly Visual Composer) with vc_map(), but you forget to register the shortcode. That's why you're seeing the shortcode on the frontend. The Page Builder is basicly a giant shortcode generator.

The base in the vc_map() function, is used for the shortcode name.

In your case it's team_box.

Add the shortcode like this:

add_shortcode( 'team_box', 'team_box_callback' );
function team_box_callback( $atts ) {
  extract( shortcode_atts( array(
    'image_url' => 'image_url',
    'name' => 'name',
    // add your other field param_name here
  ), $atts ) );

  $your_html_shortcode_output = 'u can now use the shortcode attributes like normal params, like this: ' . $name;

  return $your_html_shortcode_output;
}

You can find more information about vc_map() here.

Regards, Bjorn

Answered By - Bjorn

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] How to align all items between them (images, titles, texts, buttons) in differents div's row with CSS?

Issue

I know this topic has already get an answer here, but there is a little difference in my case.

You have to know that unfortunately I can't edit the HTML because I use Visual Composer for WordPress that generate its own HTML. I can only add classes or IDs on HTML tags via Visual Composer in the WordPress backoffice. It will be so long to edit the HTML of every Visual Composer blocks (with the WordPress text mode). So I have to find another efficient way to do it.

So, to align all the items between them I tried many solutions:

I first tried to use a min-height on the parent div that is set to a relative position, then I put the buttons at absolute position with a bottom of 0. It worked for the buttons alignment but I want it to be automatic and managed by itself in case when there is more text content and I don't want to change several times the min-height in several responsive modes.

So I tried the FlexBox solution of the link I shared above. This solution works when we have only an image, a text and a button, but in my case I have a title between each of the images and text contents, so it means we can have a title on 1 line or 2 lines or more... The problem with that is a misalignment of the titles between themselves and the "Lorem Ipsum" texts as well.

How can I manage it?

Thank you for the help.

I provided the code snippets to see my issue:

.sameblockheight, .wpb_wrapper {
  display: flex;
  flex-direction: column;
}

.vc_column-inner {
  flex-grow: 1;
  display: flex;
}

.wpb_wrapper {
  flex-grow: 1;
  justify-content: space-between;
}

.subrow {
  display: flex;
}

.subrow > div {
  width: 200px;
}

.vc_column-inner {
  padding: 6% 8%;
}

.button-blue {
  text-align: center;
}

.alignnone {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div class="subrow">

 <div class="sameblockheight grid-col-3">
	 <div class="vc_column-inner vc_custom_1530896965169">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 1 line</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner ">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 2 lines ...............................</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896977260">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
				<a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896983086">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

</div>

Solution

The only solution i can think of with only CSS is to add a min-height to your titles h5. For example i added min-height:40px and now, all the h5 are equal in height. You can set a bigger/smaller one.

The downsize is that if a title is larger that the min-height you set you have that problem again.

One fullproof solution would be to add a little javascript/jQuery to make the h5 equal in height without setting a 'hardcoded' min-height.

If you want/can use javaScript/jQuery let me know and i'll make a solution with that. If not, and you want to use only CSS, the below solution is the only one that i can think of.

h5 {
 min-height:40px;
 margin-top:0;
}


.sameblockheight, .wpb_wrapper {
  display: flex;
  flex-direction: column;
}

.vc_column-inner {
  flex-grow: 1;
  display: flex;
}

.wpb_wrapper {
  flex-grow: 1;
  justify-content: space-between;
}

.subrow {
  display: flex;
}

.subrow > div {
  width: 200px;
}

.vc_column-inner {
  padding: 6% 8%;
}

.button-blue {
  text-align: center;
}

.alignnone {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div class="subrow">

 <div class="sameblockheight grid-col-3">
	 <div class="vc_column-inner vc_custom_1530896965169">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 1 line</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner ">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 2 lines ...............................</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896977260">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
				<a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896983086">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

</div>

Answered By - Mihai T

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] How to create a new element in visualcomposer.io API ( visual composer) (not a wpbakery)

Issue

How to explore this API https://visualcomposer.io/docs/api/

I have installed this plugin https://github.com/VisualComposer/vcwb-demo-element-example-plugin. But when I am trying to add any new attribute into setting.json it not reflect in the UI.

Solution

You have to add this attribute's key to the object - 'editFormTab1'. For example, there is an attribute - 'metaCustomId' and it has been added to the list in object - 'editFormTab1'.

Answered By - Jānis Konutis

Answer Checked By - Senaida (PHPFixing Volunteer)

Read More

[FIXED] How do I center a column with a max-width of 1280px inside a full width row with visual composer + css

Issue

I'm building a site with wordpress, and i need to center a row with a max-width: 1280 that lives inside a full width row. This is the site link: http://creativa.co/selva/ and i'm trying to put the yellow row above the "6 Reasons why Colombia" row https://prnt.sc/meclxb

Solution

Have you tried this on the div with the max-width?

margin-left: auto;
margin-right: auto;

Also, in your case, the yellow block has some div before it, that is taking some space. You will need to hide it or remove it to make it work.

Answered By - dabishan

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How to create page in backend via WPBakery

Issue

I'm developing a plugin that creates pages for admin menu in backend via WPBakery. But when I look at generated page there is only shortcodes. How can I make plugins shortcodes execute in backend.

I've tried to use echo do_shortcode( '$content' ) but it does not work. I probably should work with plugins classes but do not know how.

I want to make a page with page builder for admin menu and execute all shortcodes that creates rows columns message boxes etc.

Any help would be appreciated.

Solution

Before using do_shortcode, add WPBMap::addAllMappedShortcodes(); function, this function loads all elements, and then do_shortcode should work fine.

Answered By - Павел Иванов

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How can I render Nested elements on Visual Composer (WPBakery) for wordpress?

Issue

I'm trying to do some custom elements for Visual Composer plugin (WP-Bakery) for wordpress.

I have no problem with simple custom elements, but I'm trying to do some nested elements (a parent containing some child elements). I have no problems creating child elements, and if I create them alome, they are shown on wordpress, but when I try to create parent element, I can see setting elements without problem, but it's no rendered.

I think the problem is the render function (html) on parent class, but I can't get solve it.

PARENT CLASS

    <?php

class vcInfoCardContainer extends WPBakeryShortCodesContainer {

    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_infocardcontainer_mapping' ) );
        add_shortcode( 'vc_infocard', array( $this, 'vc_infocardcontainer_html' ) );
    }

    // Element Mapping
    public function vc_infocardcontainer_mapping() {

        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }

        // Map the block with vc_map()
        vc_map(
        array(
            'name' => __('VC Info Card Container', 'ex5_vc_elements'),
            'base' => 'vc_infocardcontainer',
            'description' => __('Info Card Container for VC', 'ex5_vc_elements'),
            'category' => __('Ex5 Elements', 'ex5_vc_elements'),
            'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
            'as_parent' => array('only' => 'vc_infocard'),
            'is_container' => true,
            'js_view' => 'VcColumnView',
            'params' => array(

              array(
                    'type' => 'textfield',
                    'heading' => __('Button text','ex5_vc_elements'),
                    'param_name' => 'button_text',
                    'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
                    'group' => 'Button',
                )
            ),
        ));
    }

    //render
    public function vc_infocard_html( $atts, $content = null ) {

        // Params extraction
        extract(
            shortcode_atts(
                array(
                ),
                $atts
            )
        );

        $html = '<div class="ex5-vc-info-card-container">' . do_shortcode($content) . '</div>';

        return $html;

    }

}

new vcInfoCardContainer();

CHILD CLASS

<?php

class vcInfoCard extends WPBakeryShortCode {

    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_infocard_mapping' ) );
        add_shortcode( 'vc_infocard', array( $this, 'vc_infocard_html' ) );
    }

    // Element Mapping
    public function vc_infocard_mapping() {

        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }

        // Map the block with vc_map()
        vc_map(
        array(
            'name' => __('VC Info Card', 'ex5_vc_elements'),
            'base' => 'vc_infocard',
            'description' => __('Info Card for VC', 'ex5_vc_elements'),
            'category' => __('Ex5 Elements', 'ex5_vc_elements'),
            'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
            'as_child' => array('only' => 'vc_infocardcontainer'),
            'params' => array(
                array(
                    'type' => 'attach_image',
                    'heading' => __( 'Main image', 'ex5_vc_elements' ),
                    'param_name' => 'image',
                    'group' => 'Images',
                ),
                array(
                    'type' => 'attach_image',
                    'heading' => __( 'Icon', 'ex5_vc_elements' ),
                    'param_name' => 'icon',
                    'group' => 'Images',
                ),
                array(
                    'type' => 'colorpicker',
                    'heading' => __( 'Icon background color', 'ex5_vc_elements' ),
                    'param_name' => 'icon_background_color',
                    'value' => __( '#000000', 'ex5_vc_elements' ),
                    'group' => 'Images',
                    ),
                array(
                    'type' => 'textfield',
                    'heading' => __('Title','ex5_vc_elements'),
                    'param_name' => 'Title',
                    'group' => 'Texts',
                ),

                array(
                    'type' => 'textfield',
                    'heading' => __( 'Text', 'ex5_vc_elements' ),
                    'param_name' => 'text',
                    'group' => 'Texts',
                ),
                array(
                    'type' => 'checkbox',
                    'class' => 'one-third',
                    'heading' => __( 'Show link button', 'ex5_vc_elements' ),
                    'param_name' => 'show_button',
                    'value' => 'show',
                    'description' => __( 'Indicates if link button is shown)', 'ex5_vc_elements' ),
                    'group' => 'Button',
                ),
              array(
                    'type' => 'textfield',
                    'heading' => __('Button text','ex5_vc_elements'),
                    'param_name' => 'button_text',
                    'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
                    'group' => 'Button',
                ),
                array(
                    'type' => 'vc_link',
                    'heading' => __( 'Button link', 'ex5_vc_elements' ),
                    'param_name' => 'button_link',
                    'group' => 'Button',
                ),
            ),
        ));
    }

    //render
    public function vc_infocard_html( $atts ) {

        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'image'                 => '',
                    'icon'                  => '',
                    'icon_background_color' => '#000000',
                    'title'                 => '',
                    'text'                  => '',
                    'show_button'           => '',
                    'button_text'           => 'Más info',
                    'button_link'           => '',
                ),
                $atts
            )
        );
        if (empty($button_text)) $button_text = __( 'Más info', 'ex5_vc_elements' );

        if ($show_button === 'true') {
            if (!empty($button_link)) {
                $button = '<div class="ex5-vcic-button">
                            <a href="'. $button_link .'" target="_self" class="ex5-vcic-link" title="' . $button_text . '">
                                <span class="ex5-vcic-button-text">' . $button_text . '</span>
                            </a>
                        </div>';
            } else {
                $button = '<div class="ex5-vcic-button">
                            <span class="ex5-vcic-button-text">' . $button_text . '</span>
                        </div>';
            }
        } else {
            $button = '';
        }

        $image = wp_get_attachment_image_src($image);
        $icon = wp_get_attachment_image_src($icon);

        //vc_build_link(
        $html = '
            <div class="ex5-vc-infocard">
                <div class="ex5-vcic-content">
                    <div class="ex5-vcic-image">
                        <span>
                            <img src="' .  $image[0] . '" title="history_inner_14" alt="http://oxigeno.">
                        </span>
                    </div>
                    <div class="ex5-vcic-icon" style="background-color: ' . $icon_background_color . '">
                        <img src="' . $icon[0] . '" />
                    </div>
                    <header class="ex5-vcic-headline">
                        <h3>' . $title . '</h3>
                    </header>
                    <div class="ex5-vcic-text">
                        <p>' . $text . '</p>
                    </div>' .
                    $button
                . '</div>
                </div>';

        return $html;

    }

}

new vcInfoCard();

Solution

I had solved it. The shortcode call was wrong because it had the wrong function name too.

    public function vc_infocard_html( $atts, $content = null ) {

must be

    public function vc_infocardcontainer_html( $atts, $content = null ) {

Answered By - Elena Martín Castillo

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

Read More

[FIXED] How to make four boxes in two rows without any gaps in visual composer WordPress?

Issue

I want to make four boxes in two rows. There will be no padding/gap between two rows. Entire section will be stretched.

Example of the boxes is as below :

How to gain this ? Please help. Thanks in advance.

Solution

You can do this by adding CUSTOM HTML module in VC, and then using flex

html, body {
  height: 100%;
  margin: 0;
}
.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 0px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box { margin: 0px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }

<div class="grid2x2">
  <div class="box box1"><div>one</div></div>
  <div class="box box2"><div>two</div></div>
  <div class="box box3"><div>three</div></div>
  <div class="box box4"><div>four</div></div>
</div>

Answered By - Andrey

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] How to remove this warning" Warning: array_shift() expects parameter 1 to be array, null given in ..." from the top of my website?

Issue

I am using Visual Composer plugin in Wordpress. I was trying to change the header's bg color. The appearance>customize didn't work, so I installed a plugin named "Simple Custom CSS". I added the CSS to this plugin, then the header is ok but I get this Warning on the top of the website :

Warning: array_shift() expects parameter 1 to be array, null given in /home/dejpaad/public_html/wp-content/themes/businext/myfuncations.php on line 411

http://dejpaad.com/

This is the line the warning is talking about:

/**
Allow customers to access wp-admin
*/
global $current_user; 
$user_roles = $current_user->roles;
$user_role = array_shift($user_roles);
if($user_role == "stgh_client") {
    add_filter( 'woocommerce_prevent_admin_access', '__return_false' );
}

Solution

$user_roles = $current_user->roles;
if (is_array($user_roles) && array_shift($user_roles) == "stgh_client") {
    add_filter( 'woocommerce_prevent_admin_access', '__return_false' );
}

Answered By - user10767914

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to remove this warning" Warning: array_shift() expects parameter 1 to be array, null given in ..." from the top of my website?

Issue

I am using Visual Composer plugin in Wordpress. I was trying to change the header's bg color. The appearance>customize didn't work, so I installed a plugin named "Simple Custom CSS". I added the CSS to this plugin, then the header is ok but I get this Warning on the top of the website :

Warning: array_shift() expects parameter 1 to be array, null given in /home/dejpaad/public_html/wp-content/themes/businext/myfuncations.php on line 411

http://dejpaad.com/

This is the line the warning is talking about:

/**
Allow customers to access wp-admin
*/
global $current_user; 
$user_roles = $current_user->roles;
$user_role = array_shift($user_roles);
if($user_role == "stgh_client") {
    add_filter( 'woocommerce_prevent_admin_access', '__return_false' );
}

Solution

$user_roles = $current_user->roles;
if (is_array($user_roles) && array_shift($user_roles) == "stgh_client") {
    add_filter( 'woocommerce_prevent_admin_access', '__return_false' );
}

Answered By - user10767914

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to eliminate the bullets in MailChimp ul

Issue

I'm using either VC or WPBakery on various sites where I have embedded a MailChimp sign-up form. On all of the sites blue bullets appear underneath the checkboxes. MailChimp support has no idea why. I've tried many variations of CSS to get rid of them to no avail, including:

list-style:none !important;
list-style-type:none !important;

This doesn't work. Here's one site (the simplest VC site with no extraneous coding): http://livingbythestream.com

Solution

It is because of a :before on all of your fields. You can use the solution of Johannes above, or you could hide the :before completely since it is not being used anymore.

I have tested the code below on your website and seems to be working great:

#mc_embed_signup .mc-field-group.input-group ul li:before {
    display: none;
}

If thats not enough, you can use the !important to overwrite other existing css:

#mc_embed_signup .mc-field-group.input-group ul li:before {
    display: none !important;
}

Answered By - Bart Roelofs

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] How to strip all visual composer shortcode/tags from wordpress's post_content fetched with custom query

Issue

I am working on a web-service(API) where i am fetching result WP_query() function and parse that in JSON format. which will further use in android application. The problem is the post_content i am getting with query is composed by visual composer and the whole content is in form of such tags like

[VC_ROW][/VC_ROW][VC_COLUMN]some text[/VC_COLUMN] etc.

I want to remove/strip all these shortcode from the content and retrieve only plain text from it. Is there any visual composer function through which i can achieve this thing

<?php
require('../../../wp-load.php');
require_once(ABSPATH . 'wp-includes/functions.php');
require_once(ABSPATH . 'wp-includes/shortcodes.php');
header('Content-Type: application/json');

$post_name = $_REQUEST['page'];

if($post_name!=''){
    if($post_name=='services') {

    $args = array(
        'post_parent' => $page['services']['id'],
        'post_type'   => 'page', 
        'post_status' => 'published' 
    ); 
    $posts = get_children($args);
    foreach($posts as $po){
        $services_array[] = array('id'=>$po->ID,'title'=>$po->post_title,'image'=>get_post_meta($po->ID, 'webservice_page_image',true),'description'=>preg_replace("~(?:\[/?)[^/\]]+/?\]~s", '', $po->post_content));
    }

    $post = array(
        'status'=>'ok', 
        'services'=>$services_array
    );
    echo json_encode($post);
}
}
?>

Solution

Here, you can try and easily add some short codes in array that you needs and also you can remove all shortcodes via below code.

$the_content = '[VC_ROW][VC_COLUMN]some text1[/VC_COLUMN] etc.[/VC_ROW][VC_COLUMN_INNTER width="1/3"][/VC_COLUMN_INNTER]';

$shortcode_tags = array('VC_COLUMN_INNTER');
$values = array_values( $shortcode_tags );
$exclude_codes  = implode( '|', $values );

// strip all shortcodes but keep content
// $the_content = preg_replace("~(?:\[/?)[^/\]]+/?\]~s", '', $the_content);

// strip all shortcodes except $exclude_codes and keep all content
$the_content = preg_replace( "~(?:\[/?)(?!(?:$exclude_codes))[^/\]]+/?\]~s", '', $the_content );
echo $the_content;

you want to remain some shortcodes you can't use strip_shortcodes() for that.

Answered By - Rahul K

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More