Customize Your Member Profile Pages

Full Control

The editable_user_meta shortcode is a powerful tool that allows users to view and edit their profile information directly from the front end of your WordPress site. By configuring various attributes, you can customize the display and functionality of user meta fields to suit your site’s needs.

  • Select and customize member profile pages with simple shortcode elements

  • Utilize CSS to fully control and personalize the appearance

  • Set Inline or Modal Elements

Meta Mixer WP simplifies directory creation, offering flexibility and design freedom. Elevate your user experience with a directory that's both functional and engaging.

Default Shortcode Example

[editable_user_meta
meta_key="your_meta_key"
type="field_type"
default_content="Default Content"
default_image_id="123"
link_text="Click Here"
icon="icon-class"
modal="true"]

Understanding the Shortcode Attributes

Profile Templates Simplified

The editable_user_meta shortcode is a versatile tool designed to display a dynamic and customizable element for front end profile data input and admin level page layouts. Inject the shortcode into any part of your page layout and change that page into a dynamic profile page template.

Attributes and Their Roles

meta_key (required): The specific user meta key you wish to display and edit. This corresponds to the field in the user’s profile.

type (optional): Defines the type of field to render. Supported types include:

  • text: A standard text field.
  • richtext: A rich text editor for formatted content.
  • image: Displays an image with an option to upload or change.
  • icon_link: A link accompanied by an icon, suitable for social media or external links.
  • profile_button: A button linking to the user’s profile.
  • profile_link: A hyperlink to the user’s profile.
  • default_content (optional): The content displayed if the user has not set a value for the specified meta_key.
  • default_image_id (optional): The attachment ID of the default image to display when no user-specific image is available.
  • link_text (optional): The text for links or buttons, applicable to types like icon_link, profile_button, and profile_link.
  • icon (optional): Specifies the CSS class for an icon, particularly useful for icon_link types.

modal (optional): Determines whether editing occurs within a modal window. Accepts true or false. Default is false.

Short Code Examples

    Editable Text Field

    Renders a rich text editor for the user’s bio, displaying “Tell us about yourself.” if no bio is set.

    [editable_user_meta meta_key="user_bio" type="richtext" default_content="Tell us about yourself."]

    Profile Image Upload

    Displays the user’s profile picture with an option to upload or change it. If no image is set, the image with ID 456 is shown.

    [editable_user_meta meta_key="profile_picture" type="image" default_image_id="456"]

    Social Media Link with Icon

    Shows a link labeled “Follow me on Twitter” with the Twitter icon, directing to the user’s Twitter profile.

    [editable_user_meta meta_key="twitter_handle" type="icon_link" link_text="Follow me on Twitter" icon="fa-brands fa-twitter"]