Open Registration (Part 2) — Customize Login Screen

Ringkasan

Video ini melanjutkan setup open registration dengan memperbarui link Login/Sign Up di header dan kustomisasi tampilan halaman login WordPress agar terlihat sesuai brand website (bukan branding WordPress default).

---

1. Update Link Login & Sign Up di Header

File: header.php

<!-- Login button -->
<a href="<?php echo esc_url(wp_login_url()); ?>" class="btn btn--small btn--orange float-left push-right">
  Log In
</a>

<!-- Sign Up button (lebih bersih dari versi sebelumnya) -->
<a href="<?php echo esc_url(wp_registration_url()); ?>" class="btn btn--small btn--orange float-left">
  Sign Up
</a>

Fungsi	Penjelasan
wp_login_url()	URL halaman login WordPress
wp_registration_url()	URL halaman registrasi WordPress

---

2. Mengubah Link Logo di Login Screen

Secara default, logo di halaman login mengarah ke wordpress.org. Ubah agar mengarah ke homepage kita.

File: functions.php

// Customize login screen
add_filter('login_headerurl', 'ourHeaderUrl');

function ourHeaderUrl() {
  return esc_url(site_url('/'));
}

Filter Hook	Penjelasan
login_headerurl	Mengubah URL tujuan saat logo di halaman login diklik

---

3. Mengubah Title Text di Login Screen

Sejak Juni 2020, title di halaman login menampilkan "Powered by WordPress" — bukan nama situs.

File: functions.php

add_filter('login_headertitle', 'ourLoginTitle');

function ourLoginTitle() {
  return get_bloginfo('name');
}

Fungsi	Penjelasan
get_bloginfo('name')	Mengambil nama situs dari database (Settings → General → Site Title)

---

4. Load Custom CSS di Halaman Login

Secara default, WordPress tidak memuat CSS theme di halaman login. Kita harus menambahkannya secara eksplisit.

File: functions.php

add_action('login_enqueue_scripts', 'ourLoginCSS');

function ourLoginCSS() {
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
  wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
}

Penjelasan:

Action Hook	Penjelasan
login_enqueue_scripts	Hook khusus untuk memuat CSS/JS di halaman login

Kode wp_enqueue_style() di sini sama persis dengan yang ada di fungsi university_files() — cukup copy 4 baris CSS.

---

5. Kustomisasi Visual Login Screen

Logo di halaman login bukan file gambar — melainkan CSS background-image. Untuk mengubahnya:

Cara Inspeksi:

1. Right-click logo → Inspect
2. Lihat selector CSS: #login h1 a
3. WordPress menggunakan background-image untuk menampilkan logo

Cara Kustomisasi:

Tulis CSS yang meng-override selector WordPress di file CSS theme kamu.

Contoh CSS Override (di file theme):

/* File: css/modules/_login.css */

/* Override WordPress default login styling */
#login h1 a {
  background-image: url(../../images/your-logo.png); /* atau kosongkan */
  /* styling custom lainnya */
}

/* Override button colors */
.wp-core-ui .button-primary {
  background: #your-brand-color;
  border-color: #your-brand-color;
}

Referensi styling lengkap ada di: css/modules/_login.css di theme folder.

---

6. Ringkasan Semua Kustomisasi Login

File: functions.php (bagian login)

// ===== Customize Login Screen =====

// Ubah URL logo
add_filter('login_headerurl', 'ourHeaderUrl');
function ourHeaderUrl() {
  return esc_url(site_url('/'));
}

// Ubah title text
add_filter('login_headertitle', 'ourLoginTitle');
function ourLoginTitle() {
  return get_bloginfo('name');
}

// Load custom CSS
add_action('login_enqueue_scripts', 'ourLoginCSS');
function ourLoginCSS() {
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
  wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
}

---

Sebelum & Sesudah

SEBELUM:                          SESUDAH:
┌──────────────────┐              ┌──────────────────┐
│   [WP Logo]      │              │   [Custom Logo]  │
│   → wordpress.org│              │   → homepage     │
│                  │              │                  │
│ "Powered by WP"  │              │ "Fictional Univ" │
│                  │              │                  │
│ [Default blue    │              │ [Custom branded  │
│  styling]        │              │  styling]        │
└──────────────────┘              └──────────────────┘