Using Custom Bootstrap and WordPress Theme I need to add/import a class called class="img-responsive" to all images which are added/uploaded through Editor Gallery or Feature Images. Can you please le t me know how I can do this grammatically in function.php?
Thanks
wordpress php function
function add_responsive_class($content){
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
foreach ($imgs as $img) {
$img->setAttribute('class','img-responsive');
}
$html = $document->saveHTML();
return $html;
}
add_filter ('the_content', 'add_responsive_class');
or You can use jquery code on the header.php file of your theme.
<script>
$(document).ready(function() {
$("img").addClass("img-responsive")
});
</script>
Related
Trying to figure out why this doesn't work. The rest of the page loads just fine but where the menu items would be expected it just says "HtmlOutput" - no buttons, no links, nothing but text. Nothing in the mBar div displays - just text ("HtmlOutput"). I've also tried printing and force printing the scriplet in the menuBar.html file with no luck.
Code.gs
function doGet(e) {
var html = HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(file, appData) {
var component = HtmlService.createTemplateFromFile(file);
component.data = appData;
return component.evaluate();
}
index.html
<div id="mainContent" class="w3-hide">
<!-- Menu Bar -->
<?= include('menuBar', oUser)?>
</div>
menuBar.html
<div class="mBar">
Select Period
<? if (data.isAdmin == true) { ?>
Manage Periods
Manage Users
<? } ?>
</div>
include function should return type string, so change it this way:
function include(file, appData) {
var component = HtmlService.createTemplateFromFile(file);
component.data = appData;
return component.evaluate().getContent();
}
edit:
Also you need to use force-printing scriptlets to avoid escaping of your included html code (note "!" symbol):
<?!= include('menuBar', oUser)?>
If I am on a page and click the respective link in the navigation bar, how can I prevent the link from reloading the page (i.e. do nothing) when I am currently at that location? I still want the link to function, but only do nothing when I am already on that page.
This is by far not the "best" way to do it I'm sure, but can be accomplished with Javascript/JQuery as I've done in the past when required in a mobile web application.
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
if(urlRegExp.test(this.href.replace(/\/$/,''))) {
$(this).click(function(event) {
event.preventDefault();
});
}
});
If PHP is an option you could try something like this:
\\Run this at top of page
<?php
function getPageName()
{
$filename = $_SERVER["SCRIPT_NAME"];
$breakfile = Explode('/', $filename);
$pfile = $breakfile[count($breakfile) - 1];
return $pfile;
}
?>
\\Modify HTML links to something like this
<?php if(getPageName() == 'FILENAME.html'){ ?>
\\Nav Link Here
<a href="#" >NAV TITLE</a>
<?php }else{ ?>
<a href="FILENAME.html" >NAV TITLE</a>
<?php } ?>
I am creating a simple onclick event for a button. It's just not working. Below is what I wrote.
<script type='text/javascript'>
rec(){
<?php
$myfilename = "info.txt";
if(file_exists($myfilename)){
echo file_get_contents($myfilename);
}
?>
};
</script>
<button onclick="rec()">Click me</button>
Not sure, what wrong. I also commented entire php and just tried to echo hi, that also didn't work.
Kindly request your advice. Thanks.
Try printing out your javascript rather than putting PHP inside your javascript. For example you can try.
<?php
$myfilename = "info.txt";
if(file_exists($myfilename)){
$file = file_get_contents($myfilename);
echo "<script type='text/javascript'> function rec(){ console.log($file); console.log('This is JS being printed by PHP'); }</script>";
}
?>
Please keep in mind you should declare your function with the function keyword and there is no way for us to tell what $myfilename returns without more information, but if you're just trying to print html inside of PHP this should work for you.
I'm using ng-bind-html to render a html code to my page, but my code is too long. So I put it in a HTML file. How can I do that?
This is my HTML and Js controller.My page include this:
<div ng-controller="modalPopup"><div ng-bind-html="renderHtml(message)"></div></div>
JS controller:
angular.module('mainApp', []).
controller('modalPopup', function($scope, $http,$sce) {
$scope.renderHtml = function(value) {
return $sce.trustAsHtml(value);
};
$scope.message = '';
});
I want to put a big block of code HTML to $scope.message
How can I do that. Thanks all :)
If you want to include content from the file into your HTML then you should use ngInclude:
<div ng-controller="modalPopup"><p ng-include="'path/to/file.html'"></p></div>
How to create new wordpress widgets for my themes ?
If you want to create a widget. Navigate to your plugins folder and create a blank file named as “sample.php” in “Sample” folder..
Copy below code and paste in sample.php file.
<?php
/*
Plugin Name: Widget
Description: Widget Description
*/
// Creating the widget
// Create a class named as "sample_widget" that is a child class of "WP_Widget".
class sample_widget extends WP_Widget
{
//Constructor of class
public function __construct()
{
parent::__construct(
// Id of our widget.
'sample_widget',
// This is the widget name that will be visible to user
__('Sample Widget'),
// Description of our widget
array(
'description' => __('Description of our widget.')
));
}
// Creating widget front-end
// This is where the action happens
// Creating function named as "widget", receiving two parameters.
public function widget($args, $instance)
{
/*Getting and assigning our widget title to wordpress hook "widget_title"
and passing its value to "$title" */
$title = apply_filters('widget_title', $instance['title']);
// Area, that is before the widget is diplayed
echo $args['before_widget'];
// Checking "$title" is empty or not
if (!empty($title)) /* If "$title" is not empty, below code will execute.
$args['before_title'] -> Displaying content before our widget title
$title -> Display our widget title
$args['after_title'] -> Displaying content after our widget title */ {
echo $args['before_title'] . $title . $args['after_title'];
}
// Displaying text of our widget
echo __('Hello, this is our widget text!');
// Displaying content after our widget
echo $args['after_widget'];
}
// This function naming our widget title
public function form($instance)
{
// If title is already set.
if (isset($instance['title'])) {
// $title is getting already assigned title
$title = $instance['title'];
}
// Otherwise our default title will be "Widget title"
else {
$title = __('Widget title');
}
?>
<!-- These are the settings and user interface that an admin will see -->
<p>
<!-- Already set title will be displayed at the top of our widget in admin panel -->
<label for="<?php
echo $this->get_field_id('title');
?>"><?php
_e('Title:');
?></label>
<input class="widefat" id="<?php
echo $this->get_field_id('title');
?>" name="<?php
echo $this->get_field_name('title');
?>" type="text" value="<?php
echo esc_attr($title);
?>" />
</p>
<?php
}
// This function will replace old title with new title of our widget
public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
}
// Function to register and load our newly widget
function sample_widget_load()
{
// Registering our widget named as "sample_widget"
register_widget('sample_widget');
}
// Calling our newly created function named as "sample_widget_load" to register our widget
add_action('widgets_init', 'sample_widget_load');
?>
This is my favourite tutorial about that:
http://justintadlock.com/archives/2009/05/26/the-complete-guide-to-creating-widgets-in-wordpress-28
I'm using it as a base to all my widgets.
Basically, the widget is a plugin, but you extend the class WP_Widget. It's quite easy, just follow that tutorial.
Also this is helpful http://codex.wordpress.org/Widgets_API
Good luck!
This is more a question for google than stackoverflow. You'll find tons of tutorials and examples on the web.
Widget API on wordpress site:
http://codex.wordpress.org/Widgets_API
Example of tutorial:
http://justintadlock.com/archives/2009/05/26/the-complete-guide-to-creating-widgets-in-wordpress-28
Another one:
http://www.lonewolfdesigns.co.uk/create-wordpress-widgets/