Wordpress Developer Custom Background Options - php

I've been reading the WordPress codex on adding custom background options, like in this example
$defaults = array(
'default-color' => '',
'default-image' => '',
'default-repeat' => '',
'default-position-x' => '',
'default-attachment' => '',
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );
The generated output then looks exactly like this:
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #bdd96e; }
</style>
This won't work because of the complexity of my theme, i need to be able to change the above snippet so it will override the default background for .menu-wrapper tag, is there a way I can change the default CSS selector to target a different tag instead of body?

What is in the callback function _custom_background_cb? Is that part of core WP?
I'm completely guessing here but I think you'll want to define a function that is called to return the output you want. You'll need to adjust for admin-head-callback, & admin-preview-callback too.
Try something like this but you might need to do some research on the callback parameters.
$defaults = array(
// ...
'wp-head-callback' => 'my_custom_function',
// ...
);
add_theme_support( 'custom-background', $defaults );
function my_custom_function()
{
$html = "<style type="text/css" id="custom-background-css">";
$html += " #my-selector { background-color: #bdd96e; }";
$html += "</style>";
return $html;
}

Related

Why wp_editor is going outside the container?

I have searched a lot about it but didn't find any answer.I am using wp_editor on frontend but its printed outside the div element.
below is a screenshot
And below is my codes
wp_editor(
$content = '',
$editor_id = 'ec_frontend_editor',
$settings = array(
'wpautop' => false, // use wpautop?
'media_buttons' => true, // show insert/upload button(s)
'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
'tabindex' => '',
'editor_css' => '', // extra styles for both visual and HTML editors buttons,
'editor_class' => '', // add extra class(es) to the editor textarea
'teeny' => false, // output the minimal editor config used in Press This
'dfw' => true, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
)
)
it's been too late but it will be helpful for someone in future. I got same problem because of I am taking string:
$html = '';
$html .= wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
echo $html;
then I replaced my code with this code:
<div class="container">
wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
</div>

echo get_theme_mod('footer_background'); the code shows up instead of the value

I'm customizing my Customization options in a WordPress theme following a video from awfulmedia (http://www.youtube.com/watch?v=XloM1F5M2fU). It's very good, but I've got one hang up.
function martinStart_footer_customizer_register($wp_customize) {
$wp_customize->add_section('footer_styles', array(
'title' => __('Footer Styles', 'martinStart'),
'description' => 'Modify Footer Styles'
));
$wp_customize->add_setting('footer_background', array(
'default' => '#CCC',
));
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'footer_background_ctrl', array(
'label' => __('Footer Background Color', 'martinStart'),
'section' => 'footer_styles',
'settings' => 'footer_background'
) ));
}
function martinStart_footer_style() {
?>
<style type="text/css">
.site-footer {background-color: <$php echo get_theme_mod('footer_background'); ?>;}
</style>
<?php
}
add_action('wp_head', 'martinStart_footer_style');
add_action('customize_register', 'martinStart_footer_customizer_register');
So I use the Wordpress custom_color_control and the color change is saved in the wp_options table, and style declaration is added to the head.
But the value isn't added, it writes the php code! Can anyone see what I'm doing wrong?
php code most be surrounded by <?php code ?>, but the code in question begins with <$php. You need to replace the $ with a ?.

WYSIWYG editor generated by Wp_editor is disabled

Initial issue:
My client wanted an custom HTML rendering sidebar widget for their wordpress site. I created a simple one that allows them to choose the color (class switching) and gives them a textarea to put their HTML into. Now they have requested a basic WYSIWYG interface attached to it (CKEditor or TinyMCE) but I dont know how to add it to the textarea inside the widget code. Does anyone know how, have an example, or a place to see how it can work? Thanks!
EDIT (After use of wp_editor):
So I have my code to this point but the editor is disabled and not able to be used. Any ideas why?
<fieldset>
<label>Enter your HTML</label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => ',bold,italic,underline,|,link,unlink',
),
'quicktags' => false
);
$bodyID = $this->get_field_id('body');
$content = '';
wp_editor($content, $bodyID, $settings );
?>
</fieldset>
Use wp_editor function, your code will look something like this:
http://codex.wordpress.org/Function_Reference/wp_editor
<fieldset>
<label> Your label for the text area </label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
'bullist,blockquote,|,justifyleft,justifycenter' .
',justifyright,justifyfull,|,link,unlink,|' .
',spellchecker,wp_fullscreen,wp_adv ',
),
'quicktags' => false
);
wp_editor('initial content', 'id of textarea', $settings );
?>
</fieldset>
Note that if you want to put the content in the WP database from front end you should use in addition wp_insert_post function and a POST varible as a link.

Override Theme-Options.php file

I am having a difficult time removing the calling from my parents theme-options.php. My problem is this: My parent theme calls for the logo not from the header.php which I could easily replace but from the theme-options.php by placing the url path to the image like so require ( get_template_directory() . '/settings/theme-options.php' );
I want to "unrequire" this call in the child theme and add a function to call require ( get_stylesheet_directory() . '/theme-options.php' ); This way I can modify the options file and remove the call to the url. I have had a similar problem before and fixed it by using the unregister function but I am not sure on how to "unrequire" this call to the file.
Any help would be greatly appreciated.
After searching a little deeper there is a function that calls the default values like so :
function max_magazine_default_options() {
$options = array(
'logo_url' => get_template_directory_uri().'/images/logo.png',
'favicon_url' => '',
'rss_url' => '',
'show_slider' => 1,
'slider_category' => 0,
'show_carousel' => 1,
'carousel_category'=> 0,
'show_feat_cats' => 1,
'feat_cat1'=> 0,
'feat_cat2'=> 0,
'feat_cat3'=> 0,
'feat_cat4'=> 0,
'show_posts_list' => 1,
'show_author' => 1,
'show_page_comments' => 1,
'show_media_comments' => 1,
'ad468' => '<a href='.get_site_url().'><img src='.get_template_directory_uri().'/images/ad468.png /></a>',
'inline_css' => '',
'meta_desc' => '',
'stats_tracker' => '',
'google_verification' => '',
'bing_verification' => '',
);
return $options;
}
So im guessing I could remove this function and replace it with my own and alter the values?
The only way you would be able to do this without editing the parent is if they call require() within a function called by a hook such as init, setup_theme, etc. Then you could simply do:
remove_action( 'hook', 'their_function_name' );
And then you would have to copy/paste the function into your functions.php file, edit it, and then re-add it using the same hook:
add_action( 'hook', 'your_function_name' );
You may also have to make sure the priority (third argument) is correct on your function to make sure it properly overrides it.

Wordpress: add events inside TinyMCE iframe

I've added some div wrapper styles to Wordpress, but when I use them in the page, it is impossible to add content below them in the page. CSS:after works inside the divs to create a selectable area, but it doesn't work to create a selectable area after the div.
In my functions.php I have:
function my_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Box Two Columns',
'block' => 'div',
'classes' => 'twocolbox',
'wrapper' => true
),
array(
'title' => 'Image with Caption',
'block' => 'div',
'classes' => 'img_caption',
'wrapper' => true
),
array(
'title' => 'Gallery Horizontal',
'block' => 'div',
'classes' => 'scroller horizontal',
'wrapper' => true
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
add_editor_style();
Is there a way to use execCommand here to add some html after the div styles I defined? To add something like an empty paragraph tag afterwards with a clear float?
I tried:
tinyMCE.execCommand('mceInsertContent',false,'Hello world!!');"
MCE editor breaks then.
...
Tried this but it's too buggy:
In editor-styles.css:
#tinyMCE:after {
content: " ";
clear:both;
width: 4em; height:4em;
}
Note that you may need to clear cache AND shift-reload button to see any changes to editor-styles.css in Wordpress.
...
Still working on this. Found a thread:
To access tinymce iframe elements through jquery
I tried adding the code in this thread to my_mce_before_init, but it just broke.
....
Also tried loading a jQuery script, but the target paths wouldn't work on the TinyMCE iframe. None of these selectors work:
jQuery(document).ready(function($) {
$("#tinyMCE").find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("div").css("color","red");
$("#content_ifr").contents().find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("#content_ifr").contents().find("#tinymce p").css("color","red");
$("#wp-content-editor-container").find("textarea").css("color","red");
$("iframe").contents().find("p").css("color","red");
$('#content_ifr').load(function(){
$('#content_ifr').contents().find('p').css("color","red");
});
});
You can add html pseudo elements using the tinymce configuration option content_css.
There you can define after elements. Give it a try!
Update:
When initializing tinymce set the setup paramter to the following (inside tinyMCE.init({...})
...
theme: "advanced", // example param
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$("#content_ifr").contents().find("p").css("color","red");
// other approach
//$(ed.getBody()).find('p').css("color","red");
});
},
cleanup: true, // example param
...

Categories