Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
manchumahara opened this issue Jun 8, 2018 · 3 comments
Open

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

manchumahara opened this issue Jun 8, 2018 · 3 comments

Comments

@manchumahara
Copy link
Contributor

manchumahara commented Jun 8, 2018

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();
		});
@pablo-sg-pacheco
Copy link

Great idea!
It's working on the most recent version?

@manchumahara
Copy link
Contributor Author

hi, this is not added in the core, I am just sharing my example code @pablo-sg-pacheco

@pablo-sg-pacheco
Copy link

ok, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants