Skip to content

[Tips] Creating a single col(colspan 2) subheading field #101

Open
@manchumahara

Description

@manchumahara

Sometimes I need to create sub heading or heading field for showing some separator.
subheading_example

I am trying to write we can achieve that. The way wordpress renders the setting api it creates tabular format, fields labels in one col and field in 2nd col, we need to create a col with 2 col width or 'colspan' needs 2.

new field type: subheading

how to declare field

               array(
                    'name'        => 'This is my heading here',
                    'desc'        => __( 'This is heading description' ),
                    'type'        => 'subheading'
                ),

now , in the setting class you need to add the field definition method

                       /**
			 * Displays a  2 colspan subheading field for a settings field
			 *
			 * @param array $args settings field args
			 */
			function callback_subheading( $args ) {

				$html = '<h3 class="setting_subheading">'.$args['name'].'</h3>';
				$html .= $this->get_field_description( $args );

				echo $html;
			}

we are almost done, now in the setting api in javascript code area put some js code like below

              //make the subheading single row
		$('.setting_subheading').each(function (index, element) {		
			var $element = $(element);
			var $element_parent = $element.parent('td');
			$element_parent.attr('colspan', 2);
			$element_parent.prev('th').remove();
		});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions