I would like to customize the HTML output of a Wordpress Contact Form 7 (WPCF7) shortcode itself, i.e. the [file] shortcode. I do not want to modify the surrounding HTML.
So far I've modified the HTML output by changing the contents of the file /contact-from-7/modules/file.php.
My changes will be lost when I update the plugin. So I'd like to implement a more permanent and robust solution, like adding a filter in my functions.php.
What I would like to do (pseudo code - untested code):
add_filter('wpcf7_file_shortcode_handler', 'my_file_sc_handler');
function my_file_sc_handler($html) {
$html = sprintf('<div>my own html</div>');
return $html;
}
I only not need to change the $html returned - no need to touch the remaining code of the wpcf7_file_shortcode_handler function.
My question: How can I customize the Wordpress Contact Form 7 HTML output of the [file] shortcode so that my changes will not get lost when I update the plugin?
Based on the comments and such, although I do not have a solid answer, I think you may find the answer you're looking for with this link:
http://www.featheredowl.com/contact-form-7-submit-button-element/
This tutorial explains how to manipulate the [submit] shortcode from using <input type="submit"> to a <button> element.
Using this basis, you may be able to customise your [file] output to how you want.
Although this does require editing core files, it also seems to set about handing upgrades of the plugin through functions.
Hope it helps somewhat!
Firstly it is a very bad idea to change the core files of any plugin.
If it is simply the HTML output that you want to change, why don't you change it in the provided editor, see below example:
<div class="row">
<div class="col-md-6">
<p>Name<br />
[text your-name] </p>
</div>
<div class="col-md-6">
<p>Email*<br />
[email* your-email] </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Enquiry<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>
</div>
</div>
You can pretty much change everything!
you cannot insert a contact form shortcode into your template file directly. You will need to pass the code into do_shortcode() function and display its output like this
<?php echo do_shortcode( '[contact-form-7 id="7" title="Contact"]' ); ?>
Related
I am using WMD editor. This one.
It is working fine. But issue is, i want to get it working with edit form.
Right now i am getting html instead of markdown text.
My code is like following in my edit page.
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input"><?php echo $row['description']?></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
Not sure what is wrong here.
First off: the repository is not maintained (and apparently has not been updated for over 7 years) so you should consider switching to an active branch. WMD was renamed to Page Down but there are many alternative editors out there you can use.
As timclutton commented you are probably storing HTML in your database. WMD does not support conversion from HTML to Markdown. So the best solution would be to store the content as Markdown.
To do this change your create page. Since I have no code I'll just give you an example on how it could look:
<form action="/create" method="POST">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea name="content" id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
<button type="submit">Send</button>
</form>
Server-side you can now store the content of $_POST['content'] in your database and later output it exactly the way you are doing it right now to the edit page.
Lastly a security note from the Page Down wiki:
It should be noted that Markdown is not safe as far as user-entered input goes. Pretty much anything is valid in Markdown, in particular something like <script>doEvil();</script>. This PageDown repository includes the two plugins that Stack Exchange uses to sanitize the user's input; see the description of Markdown.Sanitizer.js below.
Is there a quick way, via script maybe, to remove a certain pair of div's out of all my wordpress posts? For example:
I want to go from this:
<div class="single_textimage">
<div class="youtube_play"><iframe src="-,-"></iframe></div>
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<div class="youtube_play"><iframe src="-,-"></iframe></div>
AND
From this:
<div class="single_textimage">
<img class="aligncenter size-full wp-image-1700" src="-,-" />
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<img class="aligncenter size-full wp-image-1700" src="-,-" />
So I want the divs: single_textimage, single_textimage_text and single_textimage_copyright to go.
I hope there is an easy script, or difficult for that matter. Via "php", "mysql" or "jquery" for example, that I can put in test.php in the root or something...
I hope I supplied you with enough information. If I haven't made myself clear enough, please reply. :)
Seems to me like you should be able to take those out of whatever template your using - probably in a PHP include, but I don't really use WordPress, so I wouldn't know where without seeing all your files. If you're bent on using jQuery instead of modifying the template, I would throw in some CSS too, to hide the elements that will be removed:
.single_textimage, .single_textimage_text, .single_textimage_copyright{
display:none;
}
Then you can take the elements you want to keep out of their parent DIVs, and place them right after (or before):
$('.youtube_play, .wp-image-1700').each(function(){
$(this).parent().after($(this));
});
Then you can remove the elements you don't want from the page:
$('.single_textimage, .single_textimage_text, .single_textimage_copyright').remove();
Here's a fiddle: https://jsfiddle.net/3uztorzL/
I would use this search and replace utility to update all of the content in the DB:
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
You'll need a regex to replace <div class="single_textimage_text">Some text.</div> (assuming the "some text" is different in each post). The utility supports regex replace. This may do it:
<div class="single_textimage_text">(.*?)</div>
Make sure you make a backup before you do the replace.
I am trying to add
<div class="menu-toggle">
<label for="checkbox" id="checkboxLabel">Menu</label></div>
<input type="checkbox" id="checkbox">
to a wordpress menu. I am using the the custom menu widget, but have no idea how to add this piece of code above
<div class="menu-main-menu-container">
The reason why I would like to do this is because I have some css which allows me to toggle the menu on and off on smaller screen sizes. When I add the code above in the correct place using google chrome inspector it works perfectly, I am now stuck trying to implement this 'live'. I know it will be editing one of the wordpress .php files, but that is not my strong point. Any help would be appreciated.
Depends on your theme but there might be a chance it's located inside header.php. Go to Appearance > Editor and select header.php. Do a search for the menu.
Make sure you have closing div tags like this.
<div class="menu-toggle">
<label for="checkbox" id="checkboxLabel">Menu</label></div>
<input type="checkbox" id="checkbox">
<div class="menu-main-menu-container">
...
</div>
</div>
I have a web page I am working on in WP which needs some customization.
Firstly I have created a page template that will be used over and over again, only changing parts of the content. I am wondering about available options for me when enabling this fact, through the Admin panel in the HTML Editor(if possible)...
Hope my question is clear enough for you all.
Let me add some code to show what I am trying to accomplish.
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
//This is what i want to be able to edit
</div>
<div id="features">
//This is what i want to be able to edit
</div>
</div>
Dino:
There are lots of ways you could do this. The main question I would ask you is, who is going to be adding/editing this content? If you're going to have a community of people adding content, the input needs to be stripped and sanitized (to avoid injecting tags or other harmful content). If its just going to be you, then here's the easiest/fastest solution:
Use custom fields. If you can't see them in the post/page edit screen, go to the little tab on the top right of the post-edit screen that says Screen Options (or something like that) and click "Custom Fields".
Once you can see the Custom Fields edit box, you can add as many fields as you want. These are stored as post meta data. You can use the <?php the_meta(); ?> function in the loop to display all of your custom fields.
You can access a specific field by using get_post_meta(). You pass in the postID and the key of the meta field:
<?php echo get_post_meta(get_the_ID(), 'my_key'); ?>
So, for your example, you would add in the post-edit screen:
about: Some text to go in the about section.
features: Some text to go in the features section.
Then, you would access these on your page like so:
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
<?php echo get_post_meta(get_the_ID(), 'about'); ?>
</div>
<div id="features">
<?php echo get_post_meta(get_the_ID(), 'features'); ?>
</div>
</div>
I added a field on the page content type called 'Page Title' (machine name field_machine_name).
I want to modify the markup for this field on the page. The default markup is something like this:
<div>
<div>
<div>FIELD VALUE</div>
</div>
</div>
I want it the markup to be
<div>
<div></div>
<div>FIELD VALUE</div>
<div></div>
</div>
I tried creating a file in my templates folder called field--field_page_title.tpl.php, but I'm not sure how to print the value of the field.
Check the documentation on field.tpl.php. Looks like the info you want will be in the $items array.
If you're not sure how that array is structured, the devel module will help you. Or you can just tell your template to dump the contents of the array onto the page (or into a log file) and find out what it looks like that way.