• Skip to primary navigation
  • Skip to main content

RocketGeek

Home of WP-Members, The Original WordPress Membership Plugin

  • WordPress Plugins
    • WP-Members
      • FAQs
      • Quick Start
      • Documentation
      • Extensions
    • Advanced Options
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Download Protect
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Invite Codes
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • MailChimp Integration
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • PayPal Subscriptions
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Salesforce Web-to-Lead
    • Security
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Text Editor
      • Purchase the Plugin
      • Get the Pro Bundle
    • User List
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • User Tracking
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Memberships for WooCommerce
    • WordPass
  • Blog
    • Basics
    • Tips and Tricks
    • Filters
    • Actions
    • Code Snippets
    • Shortcodes
    • Design
    • Release Announcements
  • Store
    • Cart
    • Checkout
  • Contact
  • Log In
  • Show Search
Hide Search
Home » Design » Customizing form CSS: Login widget with inline inputs

Customizing form CSS: Login widget with inline inputs

Chad Butler · Jan 13, 2015 ·

This post is an example of manipulating the WP-Members login widget to display inline (inputs on a single line).

Since the involves some HTML changes and some specific CSS, please consider this an example.  You will get your best results if you first try to reproduce the example as given.  While you might get part way there just dropping the example into your own site, if you are running 20 different plugins and a highly customized theme, you probably won’t get the same results out of the gate.  This example is not intended to be a one-size-fits-all solution because with the amount of variable pieces, that’s not realistic.  It is intended to be an example of specific filter hooks available in the plugin for you to be able to learn how customize the HTML output to fit your specific need.

Here is an image of what we will create with this example:

3

This article is only available to WP-Members Support Subscribers. If you have an existing subscription, please login below. If you do not have a current support subscription, you can purchase a support subscription here.

Already a Member? Log In Here
   
Forgot password? Click here to reset

To gain full access to WP-Members premium content, a current support subscription is required. You can purchase an annual support subscription for as little as $59, which provides you with access to priority support, a customer support forum, access to code snippets, and more.

Why wait? Choose your subscription option here.

[
Why join?]

Design css, design, forms, layout, str_replace, tips, wpmem_sb_login_args, wpmem_sidebar_form, wpmem_widget_title, wp_head, __return_empty_string

Ready to get started?

Join Today!

© 2025 · butlerblog.com · RocketGeek is built using WordPress, WP-Members, and the Genesis Framework

  • butlerblog.com
  • WP-Members Support Subscription
  • Terms of Service
  • Privacy Policy
  • Refund Policy