Skip to content

Updates the documentation: Adds tutorials on creating post types, custom fields, taxonomies, and options pages, and improves guidance on the relationship between post types, taxonomies, and custom fields. #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 19 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 166 additions & 0 deletions docs/tutorials/first-custom-field.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
# Creating Your First Custom Field

A beginner-friendly guide to adding custom fields using Secure Custom Fields (SCF).

**What is a custom field?**

Custom fields let you add structured data to your content. With SCF, you can attach fields like text inputs, selects, image uploads, and more to your posts, pages, or custom post types.

## Prerequisites

- SCF installed and activated
- A post type (default or custom) where you'll attach your fields
- Administrator access to WordPress

You can learn more about WordPress basics here:

- [Theme Basics](https://developer.wordpress.org/themes/basics/)
- [Plugin Basics](https://developer.wordpress.org/plugins/plugin-basics/)

## 1. Access the Admin Panel

- Go to **SCF → Field Groups** in your WordPress admin menu.
- Click **"Add New"** to create a new group of fields.

## 2. Basic Configuration

### Field Group Title

Give your field group a descriptive name, like `Movie Details` or `Product Specs`.

### Location Rules

Choose where this group should appear. For example:

- Post type is equal to `Movie`
- Page template is `Product Page`

This ensures your fields appear only where you need them.

**Note:** This fine-grained control allows you to define SCF fields once and reuse them across different post types, templates, or components.

### Active

Make sure the field group is set to **Active** so it appears in the editor.

**Note:** Some features require the field group to be **enabled** and **exposed via the REST API**. To future-proof your configuration, we recommend setting **Show in REST** to `true` when creating your field groups.

## 3. Adding Fields

To start building your custom field group, click the **"Add Field"** button.

Each field requires at least a few basic settings to work correctly. All other options are optional and can be used to improve the user experience in the editor.

---

### Minimum Required Settings

In the **General** tab, you must define the following:

- **Field Type**
Specifies what kind of data the field will store (e.g., Text, Image, Number, Select).

- **Field Label**
The human-readable name shown in the editor (e.g., “Movie Title”).

- **Field Name**
A unique identifier used in the code (lowercase, no spaces; underscores or dashes allowed).

#### 📌 Example: Movie Fields

Let’s say you want to create a group of fields for movie entries. Here's how you could configure it:

| Field Label | Field Name | Field Type | Description |
|------------------|------------------|------------|------------------------------------------|
| Movie Title | `movie_title` | Text | Stores the name of the movie |
| Director | `director` | Text | Stores the name of the director |
| Release Year | `release_year` | Number | Stores the year the movie was released |
| Poster Image | `poster` | Image | Upload an image file for the movie poster |

> 💡 These fields would be added one by one using the **Add Field** button, and each configured in the field editor panel.

---

## General Settings

Defines the field behavior and how it is stored:

- **Field Type**
What kind of input this field accepts (text, image, number, etc.).

- **Field Label**
The label shown to the user in the WordPress editor.

- **Field Name**
The code-safe name used to retrieve the value in your templates or plugins.

- **Default Value**
A pre-filled value shown if no value is entered.

---

## Validation Settings

Used to restrict and control the kind of data that can be entered:

- **Required**
Makes the field mandatory.

- **Minimum / Maximum Values**
For numeric or character-based fields. Useful for fields like `release_year`.

- **Allowed Characters / Pattern**
Use a regular expression to restrict input format (e.g., only digits).

- **Custom Validation Message**
Message shown if validation fails (e.g., “Please enter a valid year”).

---

## Presentation Settings

Controls the visual appearance of the field in the editor:

- **Placeholder Text**
Example text shown inside the field input.

- **Instructions**
Helper text shown below the field to guide users.

- **Wrapper Attributes**
Custom HTML attributes like class or ID for styling or JavaScript.

- **Hide Label**
Option to hide the field label (not recommended unless styled separately).

---

## Conditional Logic

Used to show or hide fields based on the value of other fields:

- **Enable Conditions**
Activate conditional display rules for this field.

- **Condition Rules**
Example: only show the “Director” field if “Content Type” equals “Movie”.

---

> ⚠️ **Note:** Some settings may not be available for all field types. The options shown will adapt depending on the field you're configuring.

---

### Final Step

Repeat this process to add as many fields as needed to your group. Once ready, you can assign this field group to a post type and start entering content!

## For Developers

While Secure Custom Fields makes it easier to manage and display custom fields with a user-friendly interface, WordPress also includes native support for custom fields that can be managed programmatically using functions like `get_post_meta()` and `add_post_meta()`.

You can learn more about WordPress native custom fields here:

👉 [WordPress Native Custom Fields](https://developer.wordpress.org/plugins/metadata/custom-fields/)

To access custom field values in your theme or plugin, use SCF functions you can learn more about SCF’s developer API in their official documentation.
121 changes: 121 additions & 0 deletions docs/tutorials/first-options-page.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
# Creating Your First Options Page

A step-by-step guide to building a global settings page using Secure Custom Fields (SCF).

---

## What is an options page?

An **options page** is a custom admin screen where you can store **site-wide settings** that are not tied to individual posts, pages, or taxonomies. These values are ideal for:

- Contact details (phone, email, address)
- Social media links
- Global theme settings (colors, toggles, logos)
- Custom footer messages
- Business hours

---

## How are these options related to themes?

Options pages let you **manage shared values** that appear across the theme — without editing code each time a change is needed.

### Example: Company Phone Number

Suppose you want to display the company’s phone number in both the header and footer:

1. Create an options page named `theme_options`.
2. Add a text field called `phone_number`.
3. Retrieve it in your classic theme like this:

```php
<?php
$phone_number = get_option('phone_number');
echo $phone_number;
?>
```

> This approach works with **Classic Themes** (non-block themes) where PHP templates are used for rendering.

## Prerequisites

- SCF (Secure Custom Fields) installed and activated
- Administrator access to WordPress
- Basic understanding of WordPress admin

You can learn more about WordPress basics here:

- [Theme Basics](https://developer.wordpress.org/themes/basics/)
- [Plugin Basics](https://developer.wordpress.org/plugins/plugin-basics/)

## 1. Access the Admin Panel

- Go to **Secure Custom Fields → Options Pages** in your WordPress admin sidebar.
- Click **"Add New"** to create your options page.

## 2. Basic Configuration

Set up the following fields to define the behavior and placement of your options page:

### Basic Settings Panel

- **Page Title**: The title displayed at the top of the options page (e.g., `Site Settings`).
- **Menu Slug**: A unique identifier for the page URL (e.g., `site-settings`).
- **Parent Page**: Choose `No Parent` to create a standalone page or select a parent if it should appear as a submenu item.
- **Advanced Configuration**: Enable to access additional options.

### Advanced Settings Panel

#### Visibility

- **Menu Title**: Label that appears in the WordPress admin menu.
- **Menu Icon**: Choose an icon from Dashicons or upload a custom SVG or URL.
- **Menu Position**: Controls the position of the item in the admin sidebar.
- **Redirect to Child Page**: If enabled, this page redirects to its first child page automatically.

#### Description

- **Description**: A short description to help explain the purpose of this options page.

#### Labels

- **Update Button Label**: Text shown on the submit button (e.g., `Update Settings`).
- **Updated Message**: Message displayed after saving the options.

#### Permissions

- **Capability**: Required capability to view/edit this page (default is `edit_posts`).

#### Data Storage

- **Storage Location**: Choose whether to store the data in the options table (default) or bind it to a specific post, user, or term.
- **Custom Storage**: Use a specific post ID (e.g., `123`) or context string (e.g., `user_1`).
- **Autoload Options**: Enable to automatically load these values when WordPress initializes — useful for performance.

Click **Save** to create the options page. Once saved, you can start adding custom fields as needed.

## 3. Adding Fields

Add fields just like you would for any post type or taxonomy.

### Common Fields to Add

- `company_name` — Company name (text)
- `support_email` — Support contact email (email)
- `emergency_alert_message` — Site-wide notice (textarea)
- `global_logo` — Logo image (image upload)

Each of these fields will be accessible from any page or template.

## For Developers

Options pages provide a clean way to centralize configuration. In more advanced implementations, you can:

- Register multiple options pages for different sections (e.g., Branding, API Keys)
- Use `get_option()` if working outside the SCF context
- Integrate with theme customizers or other plugin logic

Secure Custom Fields simplifies this process, but WordPress also offers a native way to register and manage options pages through the **Settings API**. This allows full control over settings registration, sanitization, and display via code.

👉 Learn more about the WordPress Settings API:
[https://developer.wordpress.org/plugins/settings/settings-api/](https://developer.wordpress.org/plugins/settings/settings-api/)
Loading
Loading