Title: Moving inputs/labels inline Last modified: August 22, 2016 --- # Moving inputs/labels inline * [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/) * I’m trying to have multiple fields inline and I’m having a very hard time doing that. Both the label and input div are separate parents elements. Is there a( n easy) way to do so? * [https://wordpress.org/plugins/wp-members/](https://wordpress.org/plugins/wp-members/) Viewing 11 replies - 1 through 11 (of 11 total) * Plugin Author [Chad Butler](https://wordpress.org/support/users/cbutlerjr/) * (@cbutlerjr) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332150) * I’m not 100% sure if you’re asking about just lining up field labels and inputs or putting multiple labels and inputs in a single line, but either way, the [wpmem_register_form_args filter](http://rocketgeek.com/plugins/wp-members/users-guide/filter-hooks/wpmem_register_form_args/) would allow you to change certain default tags (or get rid of them by passing in a blank value) or to give the row a wrapper around the whole row (although that would only work for single label/input – not multiple if that’s what you want). * Another possibility is filtering with [wpmem_register_form_rows](http://rocketgeek.com/plugins/wp-members/users-guide/filter-hooks/wpmem_register_form_rows/), which gets all of the fields as an array – if you are putting multiple fields together in a single line, I’d probably experiment with that to change the array and put the elements together that you want. * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332180) * I’m trying to get multiple fields together in a single line, so I think I have to use wpmem_register_form_rows. I’m a little confused on how to actually use it. * Do I have to create an array for each field I have? Where/how do I put elements together? * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332205) * Hey Chad, so do I have to create an array for each field I want or am I able to move & display elements inline (multiple fields on the same line) just by making arrays specifically for each element? * Plugin Author [Chad Butler](https://wordpress.org/support/users/cbutlerjr/) * (@cbutlerjr) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332208) * You don’t need to make arrays for the various elements so much as change the ones that come through the filter. * There are several filters during the form building process. The one I mentioned, wpmem_register_form_rows has all of the fields pieces (the other pieces being various default tags, the hidden fields, and the buttons). All of the fields that you have in the plugins fields tab will be passed to this filter as a multi- dimensional array. * If you have 10 fields in the fields tab, you are going to see an array of 11 fields (the ones you have in the fields tab plus username) where the array key is the option name from the fields tab (the meta key the field will be stored as). * Each of these elements is an array of pieces used for constructing the form. So the defaults you see in the documentation are an example of what you will see for each field: * ``` [option_name] => Array ( [order] => 1 [meta] => option_name [type] => text [value] => [row_before] => [label] => [field_before] =>
[field] => [field_after] =>
[row_after] => ) ``` * Order, meta, type, and value are there mainly as values to tell you things that you might need easily in programmatically manipulating the form, but changing them doesn’t really do anything. row_before & and row_after are wrappers if you need to insert some custom span or div. field_before & field_after are a wrapper for the input tag (mostly a legacy tag from when there was a CSS background color behind the form field). Label and field are the html for the label and field inupt tags. * Probably the best way to get a handle on what you have to work with is to add this function to your functions.php file to dump the array so you can see what’s in it: * ``` add_filter( 'wpmem_register_form_rows', function($rows){ echo '
';print_r();echo '
'; return $rows; }); ``` * Based on what you described, you need to manipulate the way things are put together in the array based on how you want the fields to display (since you want multiple fields on a row). * For example, if you just wanted to take the inputs for state and zip and put them on the same line as the city input tag (so it goes city state zip), using the default fields in the plugin’s fields, you could put together a filter like this: * ``` add_filter( 'wpmem_register_form_rows', function($rows){ // take the input tags from default state and zip fields // and put them into the same line as city $rows['city']['field'] = $rows['city']['field'] . $rows['thestate']['field'] . $rows['zip']['field']; // remove the state and zip array elements unset $rows['thestate']; unset $rows['zip']; return $rows; }); ``` * This would put the input tags for those fields with the city so they are altogether. * Obviously, you need to handle additional layout tags and/or CSS as well, but this should give some idea of how it works. * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332242) * Hmm is that the correct syntax? I get an error when I paste it into my functions. php file. * `Parse error: syntax error, unexpected T_FUNCTION` * Plugin Author [Chad Butler](https://wordpress.org/support/users/cbutlerjr/) * (@cbutlerjr) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332246) * I did forget some () with unset, but that wouldn’t throw the error you listed. * What I put up there uses anonymous functions for the hooks, so that error indicates you probably have PHP earlier than 5.3 which can’t use anonymous functions. * Here’s a re-do: * ``` add_filter( 'wpmem_register_form_rows', 'show_form_rows' ); function show_form_rows($rows) { echo '
';print_r($rows);echo '
'; return $rows; } ``` * and… * ``` add_filter( 'wpmem_register_form_rows', 'unset_form_rows' ); function unset_form_rows( $rows ) { // take the input tags from default state and zip fields // and put them into the same line as city $rows['city']['field'] = $rows['city']['field'] . $rows['thestate']['field'] . $rows['zip']['field']; // remove the state and zip array elements unset( $rows['thestate'] ); unset( $rows['zip'] ); return $rows; } ``` * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332268) * Okay so I’m able to make them inline now, but one more problem- the inputs you make inline lose their label field (eg- I put last name inline with first name and the last name label disappears). * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332270) * Okay, so the code will only add whatever field you list to the right of the equal member operator, so if you want the label you have to add that field. However when you make the label and input inline, the label doesn’t neatly appear above the input as it does by default, but instead to the left of the input. I can’t see a way to make it work correctly by default so to make it look nice you have to position elements relatively and move them yourself. Thanks a lot for the help and continued assistance, this really helped me out. * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332271) * Actually, one last thing. I’m a bit confused about adding a class to one of my fields, could you provide an example of how to do it correctly? This is what I have following your example, which throws an error obviously. * ``` add_filter( 'wpmem_register_form_rows', 'my_register_form_rows_filter', 10, 2 ); function my_register_form_rows_filter( $rows, $toggle ) { zip => array ( 'field_before' => '
' ) return $rows; } ``` * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332283) * Hey Chad, is my code above even close? * Thread Starter [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * (@navyspitfire) * [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332291) * Anyone have an idea? Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Moving inputs/labels inline’ is closed to new replies. * ![](https://ps.w.org/wp-members/assets/icon-256x256.png?rev=1226414) * [WP-Members Membership Plugin](https://wordpress.org/plugins/wp-members/) * [Frequently Asked Questions](https://wordpress.org/plugins/wp-members/#faq) * [Support Threads](https://wordpress.org/support/plugin/wp-members/) * [Active Topics](https://wordpress.org/support/plugin/wp-members/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wp-members/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wp-members/reviews/) ## Tags * [float](https://wordpress.org/support/topic-tag/float/) * 11 replies * 2 participants * Last reply from: [navyspitfire](https://wordpress.org/support/users/navyspitfire/) * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/moving-inputslabels-inline/#post-5332291) * Status: not resolved