Wordpress - Customizing CSS Filters - php

I'm running Wordpress 4.1 with the TinyMCE editor. In the TinyMCE editor, I've enabled the Advanced Lists plugin, which allows customizing the list style type of list items (ex. <li style="list-style-type: lower-alpha">).
When I submit a post with a modified list style, the list-style-type declaration gets stripped out, but other CSS declarations are just fine (ex. text-align).
Looking at the Wordpress source, the CSS is being filtered by the safecss_filter_attr() function in kses.php. In safecss_filter_attr() I can see an array of CSS declarations. If I add list-style-type to that array, I can then save my post, and list-style-type is no longer filtered out.
However, editing the Wordpress source isn't maintainable, as it'll eventually be overwritten when Wordpress is upgraded. So, my question is this: How do I prevent Wordpress from filtering out the list-style-type CSS declaration in a maintainable fashion?

That array you are editing is actually being passed as a parameter to the 'safe_style_css' filter. The return value of 'safe_style_css' is being stored in $allowed_attr. (Line 1482 in kses.php)
So in your functions.php, write a function that looks something like this.
function my_css_allow($allowed_attr) {
if (!is_array($allowed_attr)) {
$allowed_attr = array();
}
$allowed_attr[] = 'list-style-type';
return $allowed_attr;
}
add_filter('safe_style_css','my_css_allow');
I've not tested that but it looks like it should work.
HTH,
=C=

Related

How to override WooCommerce shortcode's output?

I'm working on a Wordpress theme, where I want to change the generated markup of the [product_category] WooCommerce shortcode. I browsed through the templates directory in the plugin, but can't find the file related to this particular shortcode.
So my question is, which files I have to copy to my template and modify to change the HTML outcome of [product_category]? (CSS modifications are already done, but I need to display a very different HTML markup, and I don't want to hack around with JS).
Also it would be better not to rewrite the whole function with a hook, but change the original HTML a bit (for example, set the background color based on a custom meta field).
Esiest way :)
add_shortcode('test','test_show_shortcode');
function test_show_shortcode( $atts ) {
echo do_shortcode('[products limit="100" columns="..." category="..."]');
}
[test]

Archive.php Category.php or Taxonomy.php - Which is correct for my situation?

I'm using Genesis framework and I have this page (http://staging.seedcreativeacademy.co.uk/short-courses/) showing the categories of my custom post type short_courses. I have changed the category name to course_type, by creating a new custom taxonomy.
This is how I want it to work so far (styling needs sorting out admittedly!) Im also using CPT UI plugin.
Now, when I click through to a category, is displays each 'Course in a nice masonry block as you will see here: http://staging.seedcreativeacademy.co.uk/course_type/digital-marketing/
However, I dont want this pages to look like this and I've tried adding custom template for the following:
Archive-short_courses.php & taxonomy-short_courses.php
Archive-course_type.php & taxonomy-course_type.php
But it doesnt seem to alter the layout at all...
Once I pass this hurdle I will want to alter the single.php page for these short courses, but I thought I would start with this first.
Im not sure if genesis blocks this and sets a site wide default? I know if sets a site wide default for the archive settings but I cant find anything about a template, plus i dont know if I shoujld be searching for tutorials on archive.php pages, category.php pager or taxonomy.php pages...
Can someone help me clarify things please?
course_type is a term name, not taxonomy name.
So, these are correct for your case:
category-course_type.php (category-{slug}.php is correct format. So check if course_type is correct slug of that category)
single-short_courses.php
Just in case, try reload permalinks via Settings->permalinks->save after making these changes.
Looks like your theme or some plugin is adding masnory class to body tag, which then is styled by your child theme. You need to filter that class out of your body tag and then might styling goes to non-masonary styling.
Add following code to your taxonomy-course_type.php file, and also make sure you have genesis(); call as the last thing in the template.
add_filter('body_class', 'remove_body_class', 20, 2);
function remove_body_class($wp_classes)
{
foreach($wp_classes as $key => $value)
{
if ($value == 'masonry') unset($wp_classes[$key]);
}
return $wp_classes;
}
Above could should be in custom taxonomy template, which also have genesis(); as last line.

Where is this stylesheet being loaded from?

I am having a problem with a site I am developing with wordpress.
It happened after upgrading to the latest version (4.7)
Anyway. Go to the site www.scientized.com (just dummy content for now), and go the source. At around line 124 you see the tag <style type="text/css" id="wp-custom-css"> and then after some css is loaded.
The thing is, is that this some of my old css code from way early. To make life easier and to isolate the problem I have delete all css in my child themes style.css as well as the custom css in the customizer, and delete jetpack just to be sure. Yet this css is being loaded from somewhere. I have file explored the crap out of my site trying to find where this is located, but couldn't find anything.
I have found that in the wp-includes/theme.php there is this function:
function wp_custom_css_cb() {
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) : ?>
<style type="text/css" id="wp-custom-css">
<?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div > span` is not interpreted properly. ?>
</style>
<?php endif;
}
so this wp_get_customer_css() function is calling the old css from somewhere -- I tried to follow the functions back to see where - but my php is not that good and got lost. Does anyone know where this is being loaded from?
I think I need to know where the JetPack custom css location is. I have read it is generated dynamically -- so I am not sure how to go about the problem.
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
The Additional CSS content is stored in wp_posts database table as a separate record. It's post_type is set to custom_css. To find which post is assigned to the field, you need to look in the option theme_mods_{your theme's slug}.
For example, here is the one from my test Sandbox site which is running the Genesis Sample theme. The post ID is 31, per the key custom_css_post_id.
How do I check my site?
You can go directly into your database via phpMyAdmin and look in the wp_options table. Or...you can do this:
add_action( 'init', 'check_custom_css_post_id_theme_mod' );
function check_custom_css_post_id_theme_mod() {
var_dump( get_theme_mods() );
}
The above code will display the theme mods for your current theme. Note the one that is keyed as 'custom_css_post_id'. That one holds the ID to the post for the CSS.
How to Remove It
To remove a theme mod, you use remove_theme_mod( 'custom_css_post_id' );. See codex for the documentation on this construct. It will remove the binding between the Additional CSS. How? It deletes the sub-option.
Note, it does not delete the post record, meaning you'll have an orphaned record in wp_posts.
The wp-custom-css is loaded from custom css & js

Drupal 7: Modifying menu title

I would like to know how I can modify the menu title within the template.php of the theme I am using.
So far, I have been able to modify both the UL and LI elements by using hooks: THEME-NAME_menu_tree__MENU-NAME and THEME-NAME_menu_link__MENU-NAME respectively. However, I cannot access the menu title form either of those (or at least that's what I think). I have tried to use the THEME-NAME_menu__MENU-NAME hook, but it seems that the function is simply being ignored.
Thank you for your time.
Your menu is generated within a block. You should be able to change the subject / title by preprocessing the block. For example, change all subjects of blocks and wrap a <span> around it.
function MYTHEME_preprocess_block(&$variables) {
$block = $variables['block'];
$block->subject = sprintf('<span>%s</span>', $block->subject);
}

displaying a Drupal view without a page template around it

I would like to display a Drupal view without the page template that normally surrounds it - I want just the plain HTML content of the view's nodes.
This view would be included in another, non-Drupal site.
I expect to have to do this with a number of views, so a solution that lets me set these up rapidly and easily would be the best - I'd prefer not to have to create a .tpl.php file every time I need to include a view somewhere.
I was looking for a way to pull node data via ajax and came up with the following solution for Drupal 6. After implementing the changes below, if you add ajax=1 in the URL (e.g. mysite.com/node/1?ajax=1), you'll get just the content and no page layout.
in the template.php file for your theme:
function phptemplate_preprocess_page(&$vars) {
if ( isset($_GET['ajax']) && $_GET['ajax'] == 1 ) {
$vars['template_file'] = 'page-ajax';
}
}
then create page-ajax.tpl.php in your theme directory with this content:
<?php print $content; ?>
Based on the answer of Ufonion Labs I was able to completely remove all the HTML output around the page content in Drupal 7 by implementing both hook_preprocess_page and hook_preprocess_html in my themes template.php, like this:
function MY_THEME_preprocess_page(&$variables) {
if (isset($_GET['response_type']) && $_GET['response_type'] == 'embed') {
$variables['theme_hook_suggestions'][] = 'page__embed';
}
}
function MY_THEME_preprocess_html(&$variables) {
if (isset($_GET['response_type']) && $_GET['response_type'] == 'embed') {
$variables['theme_hook_suggestions'][] = 'html__embed';
}
}
Then I added two templates to my theme: html--embed.tpl.php:
<?php print $page; ?>
and page--embed.tpl.php:
<?php print render($page['content']); ?>
Now when I open a node page, such as http://example.com/node/3, I see the complete page as usual, but when I add the response_type parameter, such as http://example.com/node/3?response_type=embed, I only get the <div> with the page contents so it can be embedded in another page.
I know this question has already been answered, but I wanted to add my own solution which uses elements of Philadelphia Web Design's (PWD) answer and uses hook_theme_registry_alter, as suggested by Owen. Using this solution, you can load the template directly from a custom module.
First, I added raw.tpl.php to a newly created 'templates' folder inside my module. The contents of raw.tpl.php are identical to PWD's page-ajax.tpl.php:
<?php print $content; ?>
Next, I implemented hook_preprocess_page in my module in the same fashion as PWD (except that I modified the $_GET parameter and updated the template file reference:
function MY_MODULE_NAME_preprocess_page(&$vars) {
if ( isset($_GET['raw']) && $_GET['raw'] == 1 ) {
$vars['template_file'] = 'raw';
}
}
Finally, I implemented hook_theme_registry_alter to add my module's 'templates' directory to the theme registry (based on http://drupal.org/node/1105922#comment-4265700):
function MY_MODULE_NAME_theme_registry_alter(&$theme_registry) {
$modulepath = drupal_get_path('module','MY_MODULE_NAME');
array_unshift($theme_registry['page']['theme paths'], $modulepath.'/templates');
}
Now, when I add ?raw=1 to the view's URL path, it will use the specified template inside my module.
For others who may hit this page, if you're just working with standard callbacks (not necessarily views), this is easy. In your callback function, instead of returning the code to render within the page, use the 'print' function.
For example:
function mymodule_do_ajax($node)
{
$rval = <<<RVAL
<table>
<th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</th>
<tr>
<td>Cool</td>
<td>Cool</td>
<td>Cool</td>
</tr>
</table>
RVAL;
//return $rval; Nope! Will render via the templating engine.
print $rval; //Much better. No wrapper.
}
Cheers!
Another way to do it which I find very handy is to add a menu item with a page callback function that doesn't return a string:
Example:
/**
* Implementation of hook_menu.
*/
function test_menu(){
$items['test'] = array (
/* [...] */
'page callback' => 'test_callback',
/* [...] */
);
return $items;
}
function test_callback() {
// echo or print whatever you want
// embed views if you want
// DO NOT RETURN A STRING
return TRUE;
}
-- Update
It would be much better to use exit(); instead of return TRUE; (see comment).
Hey, here's yet another way of doing it:
1) Download and install Views Bonus Pack (http://drupal.org/project/views_bonus)
2) Create a Views display "Feed" and use style "XML" (or something you think fits your needs better).
3) If you're not satisfied with the standard XML output, you can change it by adjusting the template for the view. Check the "theme" settings to get suggestions for alternative template names for this specific view (so you'll still have the default XML output left for future use).
Good luck!
//Johan Falk, NodeOne, Sweden
Based on answer of Philadelphia Web Design (thanks) and some googling (http://drupal.org/node/957250) here is what worked for me in Drupal 7 to get chosen pages displayed without the template:
function pixture_reloaded_preprocess_page(&$vars)
{
if ( isset($_GET['vlozeno']) && $_GET['vlozeno'] == 1 ) {
$vars['theme_hook_suggestions'][] = 'page__vlozeno';
}
}
instead of phptemplate, in D7 there has to be the name_of_your_theme in the name of the function. Also, I had to put two underscores __ in the php variable with the file name, but the actual template file name needs two dashes --
content of page--vlozeno.tpl.php :
<?php print render($page['content']); ?>
The output, however, still has got a lot of wrapping and theme's CSS references. Not sure how to output totally unthemed data...
Assuming you're in Drupal 6, the easiest way to do this is to put a phptemplate_views_view_unformatted_VIEWNAME call in template.php (assumes your view is unformatted - if it's something else, a list say, use the appropriate theme function). Theme the view results in this theme call then, instead of returning the results as you normally would, print them and return NULL. This will output the HTML directly.
PS - make sure to clear your cache (at /admin/settings/performance) to see this work.
there are probably a number of ways around this, however, the "easiest" may be just setting your own custom theme, and having the page.tpl.php just be empty, or some random divs
// page.tpl.php
<div id="page"><?php print $content ?></div>
this method would basically just allow node.tpl.php to show (or any of drupal's form views, etc...) and would be an easy way to avoid modifying core, or having to alter the theme registry to avoid displaying page.tpl.php in the first place.
edit: see comments
ok i played around with views a bit, it looks like it takes over and constructs it's own "node.tpl.php" (in a sense) for display within "page.tpl.php". on first glance, my gut feeling would be to hook into theme_registry_alter().
when you're looking at a views page, you have access to piles of information here, as well as the page.tpl.php paths/files. as such i would do something like:
function modulejustforalteration_theme_registry_alter(&$variables) {
if (isset($variables['views_ui_list_views']) ) {
// not sure if that's the best index to test for "views" but i imagine it'll work
// as well as others
$variables['page']['template'] = 'override_page';
}
}
this should allow you to use a "override_page.tpl.php" template in your current theme in which you can remove anything you want (as my first answer above).
a few things:
as i said, not sure if views_ui_list_views is always available to check against, but it sounds like it should be set if we're looking at a view
you can alter the theme paths of the page array if you prefer (to change the location of where drupal will look for page.tpl.php, instead of renaming it altogether)
there doesn't appear to be any identifiers for this specific view, so this method might be an "all views will be stripped" approach. if you need to strip the page.tpl.php for a specific view only, perhaps hooking into template_preprocess_page() might be a better idea.
I like the Drupal module. BUt, here's another way.
copy page.tpl.php in your theme folder to a new file called page-VIEWNAME.tpl.php, where VIEWNAME is the machine-readible name of the view.
Then edit page-VIEWNAME.tpl.php to suit.
There is also http://drupal.org/project/pagearray which is a general solution...
Also, #Scott Evernden's solution is a cross site scripting (XSS) security hole. Don't do that. Read the documentation on drupal.org about how to Handle Text in a Secure Fashion http://drupal.org/node/28984
A simple way to display content of a special content-type you wish to display without all the stuff of the page.tpl.php:
Add the following snippet to your template.php file:
function mytheme_preprocess_page(&$vars) {
if ($vars['node'] && arg(2) != 'edit') {
$vars['template_files'][] = 'page-nodetype-'. $vars['node']->type;
}
}
Add a page-nodetype-examplecontenttype.tpl.php to your theme, like your page.tpl.php but without the stuff you don't want to display and with print $content in the body.
If I understand your question, you want to have nodes which contain all the HTML for a page, from DOCTYPE to </HTML>. What I would do is create a content type for those nodes -- "fullhtml" as its machine-readable name -- and then create a node template for it called node-fullhtml.tpl.php. You can't just dump the node's contents, as they've been HTML-sanitized. node.fullhtml.tpl.php would literally be just this:
echo htmlspecialchars_decode($content);
Then you'll need a way to override the standard page.tpl.php. I think what you could do is at the top of your page.tpl.php check the $node's content type, and bail out if it's fullhtml. Or, set a global variable in node-fullhtml.tpl.php that page.tpl.php would check for.
I'm no Drupal expert, but that's how I'd do it. I'm talking off the cuff, so watch for devils in the details.
I see you have already gone and made yourself a module, so this may no longer help, but it is fairly easy to get a view to expose an rss feed, which might be an easier way of getting at the content, especially if you want to include it on a different site.
On D7 you can use menu_execute_active_handler
$build = menu_execute_active_handler('user', FALSE);
return render($build);
jeroen's answer was what did for me after playing with it. I have a Drupal 7 site.
First of all make sure you replace MY_THEME with your theme name. Yes it is obvious but most newbies miss this.
I actually already had a function MY_THEME_preprocess_page(&$variables) {. Do not recreate the function then but add this code at the end of the function before you close it with }.
if (isset($_GET['response_type']) && $_GET['response_type'] == 'embed') {
$variables['theme_hook_suggestions'][] = 'page__embed';
}
My function used $vars not $variables, so I had to update that as well. Again obvious if you think look for it.
My first answered allowed me to only display the node when I called it up in a web browser. However the ultimate goal of this is to embed the drupal node in an 3rd party site using iframe.
Since the release of Drupal Core 7.50 iframe is by default blocked to prevent Clickjacking
To get only the node to successfully embed in a 3rd party site you also need to override the x-frame default setting. Everything started working after I added the following in template.php
function MY_THEME_page_alter($page) {
if (isset($_GET['response_type']) && $_GET['response_type'] == 'embed') {
header_remove('X-Frame-Options');
}
}

Categories