Embedding Login Forms in Theme Files

Overview

Instead of using shortcodes in page content, you can embed login forms directly into your theme's PHP template files. This is useful for custom headers, footers, sidebars, or specialized page templates.

---

Why Embed in Theme Files?

Use Cases

---

Basic PHP Function

Display Login Form

Function:

<?php attributes_login_form(); ?>

With parameters:

<?php
attributes_login_form(array(
    'redirect' => '/dashboard/',
    'label_submit' => 'Sign In'
));
?>

---

Function Parameters

Available Arguments

All shortcode parameters work as function arguments:

<?php
$args = array(
    'redirect' => '/member-dashboard/',
    'redirect_on_logout' => '/goodbye/',
    'form_id' => 'header_login',
    'label_username' => 'Email Address',
    'label_password' => 'Your Password',
    'label_remember' => 'Keep me logged in',
    'label_submit' => 'Login Now',
    'label_lost_password' => 'Forgot password?',
    'value_remember' => 'true'
);

attributes_login_form($args);
?>

---

Common Implementation Examples

Example 1: Custom Page Template

File: page-login.php (in your theme folder)

<?php
/**
 * Template Name: Custom Login Page
 */
get_header(); ?>

<div className="custom-login-page">
    <div className="login-container">
        <div className="login-welcome">
            <h1>Welcome to <?php bloginfo('name'); ?></h1>
            <p>Login to access your account</p>

        <div className="login-form-container">
            <?php
            attributes_login_form(array(
                'redirect' => home_url('/dashboard/'),
                'label_submit' => 'Access Your Account'
            ));
            ?>

        <div className="login-help">
            <p>Need help? <a href="<?php echo home_url('/support/'); ?>">Contact Support</a></p>

<?php get_footer(); ?>

Create the template:

1. Save above code as page-login.php in your theme
2. Create new page in WordPress
3. Select "Custom Login Page" template
4. Publish page

---

Example 2: Header Navigation

File: header.php (in your theme)

<nav className="main-navigation">

- <a href="<?php echo home_url('/'); ?>">Home</a>
- <a href="<?php echo home_url('/about/'); ?>">About</a>
- <a href="<?php echo home_url('/contact/'); ?>">Contact</a>

</nav>

<?php if (!is_user_logged_in()) : ?>
<div id="header-login-dropdown" style="display:none;">
    <?php
    attributes_login_form(array(
        'redirect' => home_url('/dashboard/'),
        'form_id' => 'header_login'
    ));
    ?>

<?php endif; ?>

Add JavaScript to toggle dropdown:

<script>
jQuery(document).ready(function($) {
    $('#header-login-toggle').click(function(e) {
        e.preventDefault();
        $('#header-login-dropdown').slideToggle();
    });
});
</script>

---

Example 3: Sidebar Widget Area

File: sidebar.php or widget area

<?php if (!is_user_logged_in()) : ?>
<div className="widget login-widget">
    <h3 className="widget-title">Member Login</h3>
    <?php
    attributes_login_form(array(
        'redirect' => home_url('/member-area/'),
        'form_id' => 'sidebar_login',
        'label_username' => 'Email',
        'label_password' => 'Password',
        'label_submit' => 'Login'
    ));
    ?>

<?php else : ?>
<div className="widget user-info-widget">
    <h3 className="widget-title">Welcome Back</h3>
    <p>Hello, <?php echo wp_get_current_user()->display_name; ?>!</p>
    <p><a href="<?php echo home_url('/dashboard/'); ?>">My Dashboard</a></p>
    <p><a href="<?php echo wp_logout_url(home_url()); ?>">Logout</a></p>

<?php endif; ?>

---

Example 4: Popup Modal Login

File: footer.php (in your theme)

<div id="login-modal" className="modal" style="display:none;">
    <div className="modal-overlay"></div>
    <div className="modal-content">
        <span className="modal-close">&times;</span>
        <h2>Login to Your Account</h2>
        <?php
        attributes_login_form(array(
            'redirect' => home_url('/dashboard/'),
            'form_id' => 'modal_login'
        ));
        ?>

<script>
jQuery(document).ready(function($) {
    // Open modal
    $('.open-login-modal').click(function(e) {
        e.preventDefault();
        $('#login-modal').fadeIn();
    });

    // Close modal
    $('.modal-close, .modal-overlay').click(function() {
        $('#login-modal').fadeOut();
    });
});
</script>

Add trigger button anywhere:

<a href="#" className="open-login-modal">Login</a>

---

Example 5: Footer Quick Login

File: footer.php

<footer className="site-footer">
    <div className="footer-content">
        <div className="footer-left">
            <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>

        <?php if (!is_user_logged_in()) : ?>
        <div className="footer-login">
            <h4>Quick Login</h4>
            <?php
            attributes_login_form(array(
                'redirect' => home_url('/dashboard/'),
                'form_id' => 'footer_login',
                'label_submit' => 'Go'
            ));
            ?>

        <?php endif; ?>

        <div className="footer-right">
            <nav className="footer-menu">
                <?php wp_nav_menu(array('theme_location' => 'footer')); ?>
            </nav>

</footer>

---

Conditional Display Logic

Show Form to Logged-Out Users Only

<?php if (!is_user_logged_in()) : ?>
    <?php attributes_login_form(); ?>
<?php else : ?>
    <p>You are already logged in! <a href="<?php echo home_url('/dashboard/'); ?>">Go to Dashboard</a></p>
<?php endif; ?>

---

Show Different Forms Based on Role

<?php
if (!is_user_logged_in()) {
    // Show login form
    attributes_login_form();
} elseif (current_user_can('manage_options')) {
    // Administrator
    echo '<p>Welcome Admin! <a href="/wp-admin/">Admin Dashboard</a></p>';
} elseif (current_user_can('edit_posts')) {
    // Editor or Author
    echo '<p>Welcome! <a href="/wp-admin/edit.php">Manage Posts</a></p>';
} else {
    // Subscriber
    echo '<p>Welcome! <a href="/member-dashboard/">Member Dashboard</a></p>';
}
?>

---

Show Form on Specific Pages Only

<?php if (is_page('restricted-content')) : ?>
    <?php if (!is_user_logged_in()) : ?>
        <div className="login-required">
            <h3>Login Required</h3>
            <p>Please login to view this content.</p>
            <?php attributes_login_form(array('redirect' => get_permalink())); ?>

    <?php endif; ?>
<?php endif; ?>

---

WordPress Functions to Use With Forms

Useful User Functions

Check if user is logged in:

<?php if (is_user_logged_in()) { } ?>

Get current user info:

<?php
$current_user = wp_get_current_user();
echo $current_user->display_name; // User's display name
echo $current_user->user_email; // User's email
?>

Check user capabilities:

<?php
if (current_user_can('manage_options')) {
    // User is administrator
}
?>

Logout URL:

<?php echo wp_logout_url(home_url()); ?>

Profile edit URL:

<?php echo admin_url('profile.php'); ?>

---

Styling Embedded Forms

Add Custom CSS

Target forms by ID:

/* Header login form */
#header_login.attributes-login-form {
    padding: 10px;
    background: #f0f0f0;
}

/* Sidebar login form */
#sidebar_login.attributes-login-form {
    font-size: 14px;
}

/* Footer login form */
#footer_login.attributes-login-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#footer_login.attributes-login-form input[type="text"],
#footer_login.attributes-login-form input[type="password"] {
    flex: 1;
}

---

Best Practices

---

Troubleshooting

Function Not Found Error

Safe implementation:

<?php
if (function_exists('attributes_login_form')) {
    attributes_login_form();
} else {
    echo '<p>Login form not available. Please install Attributes User Access.</p>';
}
?>

---

Form Not Displaying

---

CSS Conflicts

---

Pro Tips

---

articleRelated articles

• Template Customization Guide
• CSS Styling for Login Forms
• Creating Custom Login Pages
• Shortcode Examples and Use Cases