I'm building a WordPress plugin that creates an admin menu and a public page accessible at a specific URL lets say www.mywordpress.com/invite-only
In the root directory, I have wp-react-kickoff.php file like this
<?php
/**
* Plugin Name: Batmobile Design
* Author: Batman
* Author URI:
* Version: 1.0.0
* Description: WordPress React KickOff.
* Text-Domain: wp-react-kickoff
*/
if( ! defined( 'ABSPATH' ) ) : exit(); endif; // No direct access allowed.
/**
* Define Plugins Contants
*/
define ( 'WPRK_PATH', trailingslashit( plugin_dir_path( __FILE__ ) ) );
define ( 'WPRK_URL', trailingslashit( plugins_url( '/', __FILE__ ) ) );
/**
* Loading Necessary Scripts
*/
add_action( 'admin_enqueue_scripts', 'sd_scripts' );
function sd_scripts() {
wp_enqueue_script( 'wp-react-kickoff', WPRK_URL . 'dist/bundle.js', [ 'jquery', 'wp-element' ], wp_rand(), true );
wp_localize_script( 'wp-react-kickoff', 'appLocalizer', [
'apiUrl' => home_url( '/wp-json' ),
'nonce' => wp_create_nonce( 'wp_rest' ),
] );
}
require_once WPRK_PATH . 'classes/class-create-admin-menu.php';
require_once WPRK_PATH . 'classes/class-create-settings-routes.php';
require_once WPRK_PATH . 'classes/class-public-page.php';
Then I have created a folder called classes where I have
class-create-admin-menu.php,
class-create-settings-routes.php,
class-public-page.php,
wprk-public-page-template.php.
Code to create admin page looks like this
<?php
/**
* This file will create admin menu page.
*/
class WPRK_Create_Admin_Page {
public function __construct() {
add_action( 'admin_menu', [ $this, 'create_admin_menu' ] );
}
public function create_admin_menu() {
$capability = 'manage_options';
$slug = 'wprk-settings';
add_menu_page(
__( 'WP React KickOff', 'wp-react-kickoff' ),
__( 'WP React KickOff', 'wp-react-kickoff' ),
$capability,
$slug,
[ $this, 'menu_page_template' ],
'dashicons-buddicons-replies'
);
}
public function menu_page_template() {
echo '<div class="wrap"><div id="wprk-admin-app"></div></div>';
}
}
new WPRK_Create_Admin_Page();
class-create-settings-routes.php looks like this
<?php
/**
* This file will create Custom Rest API End Points.
*/
class WP_React_Settings_Rest_Route {
public function __construct() {
add_action( 'rest_api_init', [ $this, 'create_rest_routes' ] );
}
public function create_rest_routes() {
register_rest_route( 'wprk/v1', '/settings', [
'methods' => 'GET',
'callback' => [ $this, 'get_settings' ],
'permission_callback' => [ $this, 'get_settings_permission' ]
] );
register_rest_route( 'wprk/v1', '/settings', [
'methods' => 'POST',
'callback' => [ $this, 'save_settings' ],
'permission_callback' => [ $this, 'save_settings_permission' ]
] );
}
public function get_settings() {
$firstname = get_option( 'wprk_settings_firstname' );
$lastname = get_option( 'wprk_settings_lastname' );
$email = get_option( 'wprk_settings_email' );
$response = [
'firstname' => $firstname,
'lastname' => $lastname,
'email' => $email
];
return rest_ensure_response( $response );
}
public function get_settings_permission() {
return true;
}
public function save_settings( $req ) {
$firstname = sanitize_text_field( $req['firstname'] );
$lastname = sanitize_text_field( $req['lastname'] );
$email = sanitize_text_field( $req['email'] );
update_option( 'wprk_settings_firstname', $firstname );
update_option( 'wprk_settings_lastname', $lastname );
update_option( 'wprk_settings_email', $email );
return rest_ensure_response( 'success' );
}
public function save_settings_permission() {
return current_user_can( 'publish_posts' );
}
}
new WP_React_Settings_Rest_Route();
The code specific to create Public page looks like this
function wprk_create_public_page() {
$page = [
'post_type' => 'page',
'post_title' => 'WP React KickOff Public Page',
'post_content' => 'asasasas',
'post_status' => 'publish',
'post_author' => 1,
];
$page_id = wp_insert_post( $page );
update_post_meta( $page_id, '_wp_page_template', 'wprk-public-page-template.php' );
}
register_activation_hook( __FILE__, 'wprk_create_public_page' );
And In the ReactFolder, I have App.js, both Settings (This is for admin menu, it is working properly) and Public Page rendered like this
import React from 'react';
import PublicPage from './components/PublicPage';
import Settings from './components/Settings';
function App() {
return(
<React.Fragment>
<Settings />
<PublicPage />
</React.Fragment>
)
}
export default App;
And for testing, let the Public page, look like this
import axios from 'axios';
const apiUrl = appLocalizer.apiUrl;
const nonce = appLocalizer.nonce;
import React from 'react';
function PublicPage(props) {
return (
<div>
<h1>hello world asasa</h1>
</div>
);
}
export default PublicPage;
Currently, both the admin page and public page is coming one below the other. I want the Public page to come at a specific URL that users can visit and not just the admins.
You do not need a function to create a page and insert it into database each time you call it. Instead, create two pages in wp-admin:
Give them slug names, in root of your theme directory create templates for these pages. Like, if the admin page has slug react-admin, create a file page-react-admin.php, put the code for the page in there, do it for both pages. Then you can either restrict the admin page via wp-admin, or, use construction like this:
if ( current_user_can( 'manage_options' ) ) {
//the actual code for the page goes there
}
else {
//display a message that you need to log in
}
Check the WordPress guidelines for developing themes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.