Insert HTML Input to a themes template file?
My question is this:
Currently with my code, I can have whatever I've set in my custom settings page appear on
the end of every post using, of course, a WordPress filter.
The only thing is, I don't want what I input to go anywhere within a post. What I am trying to
achieve, is to have my input injected into the current themes home.php template file, within a <div></div> tag that's contained within that template file. The <div> in question has an ID attached, which is <div id="category-inner">, so is there any way use it's ID to target it in my plugin?
I've successfully managed to do it, by editing the actual home.php template file and inserting a bit of php directly there to show the user input, but that totally goes against what I'm trying to do, which is to not have to edit the source code of the template file and only have to use my plugin to insert the users inputted text in that specific location (the <div> mentioned above).
My plugin is only ever going to be adding user input in one place on the site, and it will never change. And the place it will always go in, is where I mentioned above.
Below is my plugin code:
<?php
/*/
Plugin Name: Custom Text Adder
Plugin URI: N/A
Description: Demonstrates how rubbish I am at pretty much everything I want to do
Version: 101
Author: JD
Author URI: N/A
/*/
// insert custom plugin settings menu
add_action('admin_menu', 'custom_create_menu');
add_filter('the_content', 'customhead_the_content');
function customhead_the_content($content) {
$output = $content;
$output .= '<div id="category-inner">';
$output .= get_option('post_text');
$output .= '</div>';
return $output;
}
// Add Font-Size to WYSIWYG Editor
function wp_editor_fontsize_filter( $options ) {
array_shift( $options );
array_unshift( $options, 'fontsizeselect');
array_unshift( $options, 'formatselect');
return $options;
}
add_filter('mce_buttons_2', 'wp_editor_fontsize_filter');
// Create Custom Menu
function custom_create_menu() {
//create new top-level menu
add_menu_page('Custom Plugin Settings', 'Custom Settings', 'administrator', __FILE__, 'custom_settings_page',plugins_url('/img/icon.png', __FILE__));
//call register settings function
add_action( 'admin_init', 'register_mysettings' );
}
// Register our settings
function register_mysettings() {
register_setting( 'custom-settings-group', 'new_option_name' );
register_setting( 'custom-settings-group', 'some_other_option' );
register_setting( 'custom-settings-group', 'option_etc' );
register_setting( 'custom-settings-group', 'font_size' );
register_setting( 'custom-settings-group', 'post_text' );
}
function custom_settings_page() {
?>
<!-- Custom Settings Page Container -->
<div class="wrap">
<h2>Custom Text</h2>
<form method="post" action="options.php">
<?php settings_fields( 'custom-settings-group' ); ?>
<table class="form-table">
<?php /* Bring the editor onto the page */
wp_editor( '', 'post_text', $settings = array() );
// 4.
// Custom buttons for the editor.
// This is a list separated with a comma after each feature
// eg. link, unlink, bold, ...
$settings = array(
'textarea_name' => 'post_text',
'media_buttons' => true,
'tinymce' => array(
'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
'bullist,blockquote,|,justifyleft,justifycenter' .
',justifyright,justifyfull,|,link,unlink,|' .
',spellchecker,wp_fullscreen,wp_adv'
)
);
submit_button( 'Save everything', 'primary', 'submit' ); ?>
</table>
</form>
</div>
<?php }; ?>
Here is the screenshot which will be able to explain this in the most concise way possible:
http://i.imgur.com/hiEjEsA.jpg
Again, any and all help is hugely appreciated and will hopefully stop my brain from hurting!
You all rock,
Casey. :)
I'm not sure if you want this to be a pure PHP solution, but since you have the ID of the div you could target it with jQuery and insert the text into the div on page load (or form submit) with something like this:
$(document).ready(function() {
var userText = $('#input-id').val();
$('#category-inner').html(userText);
})
Related
I'm creating my first wordpress plugin to show some dashboard data on the wp-admin-page, however only my php code is recognized when I edited my plugin, any html markup I write is omitted.
I want to make my plugin using HTML+bootstrap for the Front-end but make some calculations using PHP but I don't understand how I can do this.
In my first attempt, I could only echo html markup:
<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );
function test_plugin_setup_menu(){
add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init(){
echo "<h1> Hello World! </h1>";
}
?>/*THIS OUTPUT ON MY WP ADMIN PAGE AS EXPECTED WITH A HELLO WORLD
However I need to write a lot of HTML markup with Bootstrap and only use PHP in some areas but any HTML code I write after my ?> doesn't get show on the page.
Second approach: I referred to my HTML file with PHP
<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );
function test_plugin_setup_menu(){
add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init(){
$file = file_get_contents('index.html', FILE_USE_INCLUDE_PATH);
if($file == false)
{
echo 'file not found';
}
else
{
echo $file;
}
}
?>
This last attempt indeed shown all my HTML login with my bootstrap styled perfectly on the wp-admin-page but i cant use the PHP logic or DB connections I need on this HTML file..
My question is: how can I use my HTML markup in my PHP plugin simultaneously?
Extra info
I'm very new to PHP and Wordpress so I don't know what am I doing wrong in my code so HTML tags cant be show on the page unless I referred them to an external file.
Any help is greatly appreciated.
Another alternative would be to include your php file. Here's the idea:
add_action( 'admin_menu', 'test_plugin_setup_menu' );
function test_plugin_setup_menu() {
add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init() {
ob_start();
include_once 'file-that-i-want-to-include.php';
echo ob_get_clean();
}
Then of course in your file-that-i-want-to-include.php. Just create your page like you normally do:
<?php
include_once 'mydatabaseconnction.php';
// ... and so on php codes of sorts
?>
<div class="container">
<div class="row">
<div class="col">
my contents whatever
</div>
</div>
</div>
In addition, you can just load bootstrap in that specific admin settings page if you'd like:
add_action('admin_enqueue_scripts', function() {
if (get_current_screen()->id === 'toplevel_page_test-plugin') { // the prefix is "toplevel_page_"
$css_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.css'); // just change the path going to your css and js
$js_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.js');
wp_enqueue_style('latest-bootstrap-css', $css_path, [], '4.5.0');
wp_enqueue_script('latest-bootstrap-js', $js_path, [], '4.5.0');
}
});
I try to develop a plugin which includes a file from a template. At this moment my code view is like this:
/* Add a query var for template select, and and endpoint that sets that query var */
add_action( 'init', 'wpse22543_rewrite_system' );
function wpse22543_rewrite_system() {
global $wp, $wp_rewrite;
$wp->add_query_var( 'template' );
add_rewrite_endpoint( 'kalkulator_leasingowy', EP_ROOT );
$wp_rewrite->add_rule( '^/kalkulator_leasingowy/?$',
'index.php?template=kalkulator_leasingowy', 'bottom' );
$wp_rewrite->flush_rules();
}
/* Handle template redirect according the template being queried. */
add_action( 'template_redirect', 'wpse22543_select_template' );
function wpse22543_select_template() {
global $wp;
$template = $wp->query_vars;
if ( array_key_exists( 'template', $template ) &&
'kalkulator_leasingowy' == $template['template'] ) {
global $wp_query;
$wp_query->set( 'is_404', false );
include( get_stylesheet_directory().'/kalkulator_leasingowy.php' );
exit;
}
}
function prefix_movie_rewrite_rule() {
add_rewrite_rule( 'kalkulator_leasingowy', 'index.php?template=kalkulator_leasingowy', 'top' );
}
add_action( 'init', 'prefix_movie_rewrite_rule' );
This code runs very fine and includes the template file, but my template (header.php and footer.php) by default uses a Visual Composer and when I use this code on a page, view this:
Visual Composer works good on all pages without a /kalkulator_leasingowy.
How I can include a VC into /kalkulator_leasingowy as well?
File kalkulator_leasingowy.php
<?php
get_header();
?>
<div class="main-wrapper">
<div class="container ">
<div class="row">
</div>
</div>
</div>
<?php get_footer(); ?>
I'm not really understanding where you are trying to render custom Visual Composer code since your template file doesn't have any in it.
But based on your edit, it looks like you might actually want to be using a child theme. These make it very easy to add new template files to the parent theme without editing any of the parent's code and eliminate the need for most of your complex code.
If perhaps you are injecting the Visual Composer code from somewhere else, make sure you are applying the content filters rather than just inserting or echoing to the front end.
$content = '<div id="my_custom_content">[vc shortcode contents here]</div>';
echo apply_filters('the_content', $content);
This will make sure the end content is filtered and rendered appropriately. You might read this related answer for more information.
I'm just getting into plugin development in Wordpress. Right now I have a function that a I pass as a filter to the 'tiny_mce_before_init' with specific variables to change the buttons, add custom styling and other similar things.
I'm in the process of building a an Options Page which I would like to control the variables passed to the tinyMCE function, that way the user can select which buttons to display as well as add a custom stylesheet to the editor.
At this point, my function to edit the tiny mce works great! and the options page is also saving data, checkboxes and everything else I need.
My only issue is I'm not understanding how to pass the variables stored in the "options.php" to the current tinyMCE function. This is the current function in my functions.php file:
function my_format_TinyMCE( $in ) {
//styles for the editor to provide better visual representation.
$in['content_css'] = get_template_directory_uri() . "/build/styles/tiny-mce-editor.css";
$in['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 2=h2";
$in['toolbar1'] = 'formatselect,bold,italic,underline,superscript,bullist,numlist,alignleft,aligncenter,alignright,link,unlink,spellchecker';
$in['toolbar2'] = '';
$in['toolbar3'] = '';
$in['toolbar4'] = '';
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
I don't want to convolute the post by adding all the code of my Options Page, but I might need some direction on how to approach on passing variables as the value of the $in[]. As mentioned before, the variables would be created in an Options Page and saved, updating the tiny mce function.
I've researched a lot and I can't find any direct information on this -- as usual, I'm not looking for somebody to do my code but maybe to push me in the right direction.
Thanks!
EDIT NEW CODE
add_action('admin_menu', 'my_cool_plugin_create_menu');
function my_cool_plugin_create_menu() {
add_menu_page('My Cool Plugin Settings', 'Cool Settings', 'administrator', __FILE__, 'my_cool_plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );
add_action( 'admin_init', 'register_my_cool_plugin_settings' );
}
function register_my_cool_plugin_settings() {
//register our settings
register_setting( 'my-cool-plugin-settings-group', 'new_option_name' );
}
function my_cool_plugin_settings_page() {
?>
<div class="wrap">
<h2>Your Plugin Name</h2>
<form method="post" action="options.php">
<?php settings_fields( 'my-cool-plugin-settings-group' ); ?>
<?php do_settings_sections( 'my-cool-plugin-settings-group' ); ?>
<table class="form-table">
<tr valign="top">
<th scope="row">New Option Name</th>
<td><input type="text" name="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /></td>
</tr>
<?php submit_button(); ?>
</form>
</div>
<?php }
function my_format_TinyMCE( $in ) {
$toolbar = get_option('new_option_name');
//styles for the editor to provide better visual representation.
$in['content_css'] = get_template_directory_uri() . "/build/styles/tiny-mce-editor.css";
$in['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 2=h2";
$in['toolbar1'] = $toolbar;
$in['toolbar2'] = '';
$in['toolbar3'] = '';
$in['toolbar4'] = '';
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
?>
I'm still having difficulty accessing the stored variables and using them in the function. Any ideas?
On your options page, you can save options with update_option. Then, in your my_format_TinyMCE function, you can access them with get_option.
I have custom post type named soto_property in which I have added three wp_editor as post meta, using this code -
wp_editor( htmlspecialchars_decode($valueeee1),
'propertyEditor1',
$settings = array('textarea_name'=>'detail',
'editor_class'=>'propertyEditor')
);
wp_editor( htmlspecialchars_decode($valueeee2),
'propertyEditor2',
$settings = array('textarea_name'=>'features',
'editor_class'=>'propertyEditor')
);
wp_editor( htmlspecialchars_decode($valueeee3),
'propertyEditor3',
$settings = array('textarea_name'=>'text_to_pdf',
'editor_class'=>'propertyEditor')
);
Now I have installed qtranslate plugin to make my site Multilingual. This plugin automaticaly add Language tab in its default content editor. I want to add these languages tabs in my custom editor also, so it can save content in defined languages.
How can I do this.? Please help me.
add_filter('soto_property','qtrans_convertURL');
I guess you need to define translatable strings. Check this page in codex for more details.
Updated code should look like this:
$settings = array('textarea_name'=>__('detail', 'your-text-domain'),
'editor_class'=>'propertyEditor')
If it won't work for you, try the following trick.
Here's a code snippet from the last link:
if ( is_admin() && function_exists("qtrans_getSortedLanguages") ) {
add_action('admin_menu', 'enable_qTranslate_Meta');
}
function enable_qTranslate_Meta() {
global $qtransMETA;
$post_types = get_post_types();
/* post and page types are already processed by the plugin */
$disabled_types = array( 'post', 'page', 'attachment', 'revision', 'nav_menu_item' );
$enabled_types = array_diff( $post_types, $disabled_types );
if ( $enabled_types ) {
foreach( $enabled_types as $enabled_type ) {
add_meta_box(
'qtrans_meta_meta_box', //HTML id
__('Multilingual META', 'qtranslate-meta'), //title
array(&$qtransMETA, 'meta_box_generate'), //callback
$enabled_type, //type
'normal', //context - normal, advanced, side
'high' //priority - high, low
);
}
}
}
Solved!
I have used qranslate-x plugin which makes my custom wp_editor translatable on my custom post type page.
I'm having issues getting my field to save using WordPresses setting API
I have 1 option page, with 1 section and 1 field. So it's pretty straight forward. Everything appearing/rendering fine, but I can't save the fields.
class LocalSEOAdmin {
var $slug = 'local_seo_settings';
var $name = "Local SEO";
public function __construct(){
// When WP calls admin_menu, call $this->admin_settings
if ( is_admin() ) {
add_action('admin_menu', array( &$this, 'add_options_page' ) ); // on admin_menu call $this->init_admin_menu
add_action( 'admin_init', array( &$this, 'add_setting_fields' ) );
}
}
public function add_options_page(){
add_options_page(
$this->name, // Page title
$this->name, // Menu Title
'manage_options', // Role
$this->slug, // Menu slug
array( &$this, 'local_seo_admin_menu_callback' ) // Callback to render the option page
);
}
public function local_seo_admin_menu_callback(){
?>
<div class='wrap'>
<h1><?php echo $this->name ?> Options</h1>
<form method='post' action='options.php'>
<?php
settings_fields( 'address_settings_section' );
do_settings_sections( $this->slug );
submit_button();
?>
</form>
</div>
<?php
}
public function add_setting_fields(){
add_settings_section(
'address_settings_section', // ID used to identify this section and with which to register options
'Address Options', // Title to be displayed on the administration page
array( &$this, '_render_address_options'), // Callback used to render the description of the section
$this->slug // Page on which to add this section of options
);
add_settings_field(
'address_line_1', // ID used to identify the field throughout the theme
'Address Line 1', // The label to the left of the option interface element
array( &$this, '_render_address_line_1'), // The name of the function responsible for rendering the option interface
$this->slug, // The page on which this option will be displayed
'address_settings_section', // The name of the section to which this field belongs
array( // The array of arguments to pass to the callback. In this case, just a description.
__( 'Activate this setting to display the header.', 'sandbox' ),
)
);
register_setting(
'address_settings_section',
'address_settings_section'
);
}
public function _render_address_options(){
echo '<p>Add you address</p>';
}
public function _render_address_line_1(){
$option = get_option( 'address_line_1' );
$html = '<input type="text" id="address_line_1" name="address_line_1" value="' . $option . '" />';
echo $html;
}
}
new LocalSEOAdmin;
I'm not sure what's going on, but I feel I've mixed up the required fields someone. The fields are showing in WordPress and when I hit update the "setting saved." messages comes up, but nothing gets saved.
there is just a little problem when you register your setting.
base on register_setting, the second parameter, is $option_name so you must put send name of you inputs
register_setting(
'address_settings_section',
'address_line_1'
);
and now it's worked.
you can find more about creating options pages in wordpress site.
In register_setting()
First paramerter is your option group name &
Second parameter is option name which is given in add_settings_field() , in your case is should be address_line_1 not address_settings_section
Finally
register_setting(
'address_settings_section',
'address_line_1'
)