How to Add a Static Page to the Reading Settings for a Custom Post Type
As a WordPress developer, you may find the need to add a dedicated static page for a custom post type within your website. This can be useful for creating a centralized hub or landing page for your custom content, improving the user experience and organization of your site.
One of the best ways to achieve this is by adding a custom field to the WordPress Reading Settings page, allowing you to easily select the desired static page. In this blog post, we'll walk through the step-by-step process of implementing this functionality.
Understanding the Problem
By default, the WordPress Reading Settings page allows you to choose between displaying your latest posts or a static page as the homepage. However, it doesn't provide an easy way to set a static page specifically for a custom post type.
This can be problematic if you want to have a dedicated landing page for your custom content, as users may have to navigate through multiple layers to find the content they're looking for.
The Solution: Adding a Custom Field to the Reading Settings
Fortunately, WordPress provides a flexible way to extend the Reading Settings page and add custom fields. In this example, we'll be adding a new "Projects page" field that will allow you to select a static page to be used for your custom "Projects" post type.
Here's the code to achieve this:
/**
* Adds a custom field: "Projects page"; on the "Settings > Reading" page.
*/
add_action('admin_init', function() {
$id = 'page_for_projects';
add_settings_field($id, 'Projects page:', 'settings_field_page_for_projects', 'reading', 'default', array(
'label_for' => 'field-' . $id, // A unique ID for the field. Optional.
'class' => 'row-' . $id, // A unique class for the TR. Optional.
));
});
/**
* Renders the custom "Projects page" field.
*
* @param array $args
*/
function settings_field_page_for_projects($args) {
$id = 'page_for_projects';
wp_dropdown_pages(array(
'name' => $id,
'show_option_none' => '— Select —',
'option_none_value' => '0',
'selected' => get_option($id),
));
}
/**
* Adds page_for_projects to the white-listed options, which are automatically
* updated by WordPress.
*
* @param array $options
*/
add_filter('whitelist_options', function($options) {
$options['reading'][] = 'page_for_projects';
return $options;
});
Let's break down the code:
-
The add_action('admin_init', ...)
function adds a new custom field to the Reading Settings page. The add_settings_field()
function is used to create the field, and the settings_field_page_for_projects()
function is responsible for rendering the field.
-
The settings_field_page_for_projects()
function uses the wp_dropdown_pages()
function to create a dropdown list of all the pages on your WordPress site. This allows the user to select the desired static page for the "Projects" post type.
-
The add_filter('whitelist_options', ...)
function adds the page_for_projects
option to the WordPress whitelist, ensuring that the selected value is automatically saved and updated when the Reading Settings are saved.
With this code in place, you'll see a new "Projects page" field appear on the Reading Settings page, allowing you to easily select the static page that should be used for your "Projects" post type.
Highlighting the Selected Page
To provide a visual cue for the selected "Projects" page, you can also add the following code to your functions.php file:
/**
* Filters the post states on the "Pages" edit page. Displays "Projects Page"
* after the post/page title, if the current page is the Projects static page.
*
* @param array $states
* @param WP_Post $post
*/
add_filter('display_post_states', function($states, $post) {
if (intval(get_option('page_for_projects')) === $post->ID) {
$states['page_for_projects'] = __('Projects Page');
}
return $states;
}, 10, 2);
This code adds a "Projects Page" label to the selected page in the WordPress admin, making it easier to identify the dedicated static page for the "Projects" post type.
Moving the "Projects Page" Field Position (Optional)
If you need or prefer to move the "Projects page" field to a different position within the Reading Settings page, you can use JavaScript or jQuery to achieve this. Here's an example:
(function($) {
$(document).ready(function() {
// Move the "Projects page" field below the "Posts page" field
var $projectsPageField = $('tr.row-page_for_projects');
$projectsPageField.insertAfter('tr.row-page_for_posts');
});
})(jQuery);
This code uses jQuery to select the "Projects page" field row and insert it after the "Posts page" field row, effectively moving the custom field to the desired location.
Conclusion
By adding a custom field to the WordPress Reading Settings page, you can easily select a dedicated static page for your custom post type. This can greatly improve the organization and user experience of your website, allowing visitors to quickly access the content they're looking for.
The code provided in this article demonstrates how to implement this functionality, and the optional steps show how you can further enhance the user experience by highlighting the selected page and positioning the custom field as desired.
If you're looking to gain deeper insights into your website's user behavior and conversion optimization, be sure to check out Flowpoint.ai. Flowpoint's powerful analytics and AI-driven recommendations can help you identify and fix technical errors that may be impacting your website's performance.
Happy coding!
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.