-
Notifications
You must be signed in to change notification settings - Fork 34
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
racmanuel
wants to merge
19
commits into
WordPress:trunk
Choose a base branch
from
racmanuel:trunk
base: trunk
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
30ee8a4
Add composer installation to docs/welcome
racmanuel 9e08b75
Merge branch 'WordPress:trunk' into trunk
racmanuel 21d3d35
Merge branch 'trunk' into trunk
racmanuel 4399ef6
docs: update SCF installation guide with Composer integration, benefi…
racmanuel 47f588f
Merge branch 'trunk' into trunk
racmanuel 0f7aa76
Merge branch 'trunk' into trunk
racmanuel 4768c30
Merge branch 'trunk' into trunk
racmanuel 76eeef1
Merge branch 'trunk' into trunk
racmanuel 1ae28e5
Update docs/welcome/installation.md
racmanuel b5461fa
Update docs/welcome/installation.md
racmanuel e93e68f
Merge branch 'trunk' into trunk
racmanuel 3af11e8
Merge branch 'trunk' into trunk
racmanuel 0a7ba7a
Updates the documentation: Adds tutorials on creating post types, cus…
racmanuel 21f7572
Merge branch 'trunk' into trunk
racmanuel 2cb0781
Update first-custom-field.md
racmanuel ec3256b
Merge branch 'trunk' into trunk
racmanuel 680b952
Improve the documentation: update the guides on custom fields, post t…
racmanuel a6d56ea
Merge branch 'trunk' of https://github.com/racmanuel/secure-custom-fi…
racmanuel dd918d4
Update the section headers in the installation guide to improve the d…
racmanuel File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
racmanuel marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
**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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/) |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.