Yes, the options for referring to custom code pages that access WP resources is very limited because of the many ways WP folders can be configured. A directly referenced code page needs to include wp-load.php in order to access WP resources, but the code page cannot know where that file resides in relative terms for any given installation.
There are actually only 3 ways to load the WP environment for custom code, 2 involve going through either admin-ajax.php or admin-post.php to access a custom coded action callback that does the heavy lifting. The concepts involved are a little hard to grasp for novice WP coders.
Easier to understand is creating custom page templates. By virtue of being a page, the WP environment is automatically available. The quirky thing is you cannot directly reference the template on a form by filename. You must first create a page post type based on the template in order to establish a page title slug which is used to reference the page and it’s underlying template. There is typically no need to provide any content unless the template is expecting it. Just provide a title and publish. Then use the permalink as the form’s action attribute.
If setup correctly, there should be no need to ever alter the template or create derivative versions, nor need to save various page post types based on that template, though certain data storage schemes may make use of saved page post types to store data.
The template can also contain it’s related form, so everything is contained in one file. If the request is GET, the form is displayed. It submits by POST to itself. If the request is POST, the form is not displayed, rather the form values are processed, data is queried, and the results output, all by the one template.
Here is a simplistic example of a page template (in “pseudocode” so I don’t have to worry about syntax ?? )
<?php
/* Template Name: Simple Example */
get_header();
if ( 'GET' == request_method()) {
echo '<form action="" method="POST">'.show_dropdown-submit().'</form>';
}else{ // POST request
switch $_POST['dropdown_value'] {
case 1:
echo '<img src="/wp-content/uploads/selection-1.jpg" />';
break;
case 2:
echo '<img src="/wp-content/uploads/selection-2.jpg" />';
break;
else:
echo 'Invalid Selection';
}
}
get_footer()
Save this page in your child theme folder. Create a page based on this template, providing just the title: My Example, which results in a permalink of example.com/my-example/. This link can be included in the nav menu or as a sidebar link or whatever.
When one clicks on the link, they are presented with a drop down form and submit button, all styled by the theme including header and footer. The user picks from the dropdown and clicks the submit button. An image corresponding to the selection is displayed on the next page, also styled by the theme. Of course additional HTML containers are required to effectively style the page according to the theme. These can be easily copied from related theme templates.
