i have created some basic shortcodes [row],[cols] and [img]. I can use them like:
[row cols="2" ]
[col cols="2"]In faucibus[/col]
[col cols="2"][img src="../wp-content/uploads/2014/08/32-300x300.jpeg"] [/col]
[/row]
What this makes is simple, create the following bootstrap structure:
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">In faucibus</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12"><img src="../wp-content/uploads/2014/08/32-300x300.jpeg\"" alt="\"\""></div>
</div>
I have made this with do_shortcode($content) because in one shortcode can be another shortcode.
The question:
Is possible to take the html result and converted back to shortcode format based on the shortcodes functions i have already defined?
Thank you:)
I've been having the same problem to a simple front-end editor I'm building. I find Visual Composer very large for simple projects.
A possible solution is to use jQuery to read the attributes and contents of, say a div, and generate the resulting shortcode. So, in your case take the values of 'class' and convert to shortcode equivalent.
I hope this helps!
Related
I have a newsletter sign up form on a site and I can't seem to figure out why the email section input type is set to 'tel' meaning on mobile, users get only access to the numerical keypad and not the actual keyboard. I am quite new to this, which is why I am after some help.
It is the homepage to, the subscribe form down the bottom: https://www.australianwildlife.org/
Can someone please advise how I might be able to change it to input ="email"? I have attached a screenshot where I can see it is set to input="tel"
Here is the contact form 7 code:
<div class="form-content">
<div class="subscribe_form">
<div class="row">
<div class="col-md-4 col-lg-3">
<div class="form-group mb-20">
[awctext* first-name label "First name"]
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="form-group mb-20">
[awctext* last-name label "Last name"]
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="form-group mb-20">
[awcemail* email label "Email"]
</div>
</div>
.col-md
[submit class:bttn class:secondary-alt1-bg class:btn class:radius-none class:white-color class:submit-btn class:ripple "Subscribe"]
Site
I think this is part of your theme, not so much part of contact form 7. The shortcode starts with awc, which should stand for Australian Wildlife Conservancy. Somewhere in the theme’s files these shortcodes are added. The bug should be in there.
You can start searching for awcemail on your file system in both the wp-content/themes folder and wp-content/plugins folder (since it might have been implemented in a plugin). If you cannot find it, try searching for the add_shortcode and see whether you can find out whether awcemail is a shortcode and where it is added. You can also do a file search for the following:
type="tel"
type='tel'
If that doesn't work you should found out how the code for your contact form is actually parsed. If you know which file(s) are responsible for that you might find in them where the [awcemail part is converted to the actual html.
If that doesn't work, get in contact with the developer, or post (parts of) the code in a github, for example, so we can examine it. I'm sure that if you post all the code, we are able to help you fix this bug, but that is up to you, of course.
Starting with some basic Wordpress Bootstrap Themes I'd like to modify the width for Posts and Post links. This is more get-to-know-WP than heavy duty theme creation - I am mostly interested in how to apply minor customizations like this across different themes. I know each theme can kinda pick which PHP files it wants to provide, so I know what works in Theme A won't necessarily work in Theme B.
I've already done this once for one theme, but now the other theme doesn't have the same PHP file names.
For example, I know that to make the widget area narrower for posts, I want to override sidebar.php:
<!-- <div id="secondary" class="widget-area col-md-4" role="complementary"> -->
<div id="secondary" class="widget-area col-lg-2" role="complementary">
And modifying index.php makes the left-side wider:
<!-- <section id="primary" class="content-area col-md-8"> -->
<section id="primary" class="content-area col-lg-10">
<div class="tmarker">index.php</div> <!-- I added this! -->
This works fine when I am at the root of my site, as index.php is getting used.
However, when I navigate to a Post, I am back to:
<div id="primary" class="content-area col-md-8">
and my post area hasn't expanded. This makes sense - index.php isn't used here.
How do I know which PHP file is getting composed into that post detail view so that I can override it?
I've tried looking for 'index.php' in the page source, but I only saw the one I added myself on my child override.
I guess I could just look at all the PHPs in the editor and find all the class="content-area col-md-8" and trial and error them till I hit the right one. Not much fun. Are there better ways?
Could I at least dump all of those PHPs to files and grep for col-md-8? I'd need a text export for themes.
P.S. I know Wordpress child customizations are best done in style.css and functions.php, but unless I missed something, with Bootstrap, I think I really need to hit those class assignments for Bootstrap to do the work instead.
The question here addresses something similar.
You can store the template name into a global variable and echo it into the footer. This should tell you what template file is being loaded (index.php, page.php, etc).
The code below should be added to functions.php.
add_filter( 'template_include', 'var_template_include', 1000 );
function var_template_include( $t ){
$GLOBALS['current_theme_template'] = basename($t);
return $t;
}
add_action( 'wp_footer', 'get_current_template' );
function get_current_template() {
if( !isset( $GLOBALS['current_theme_template'] ) )
return false;
echo $GLOBALS['current_theme_template'];
}
There's lots of tips and strategies, but one that is a "A quick-and-dirty way":
Most decent themes add a class to the body element that reflects which theme template is being used. If you inspect the body element, you should be able to see which template is being used (for example page-template-default, etc).
If your theme breaks down further than simple template levels, then you'll have to start examining the code in the given template(s) to figure out which code is running, etc.
I am using the Wordpress theme Avada and I want to append a class to a pagination <div>. Currently it is like:
<div class="pagination clearfix"> and I would like to dynamically be able to add a class to this div like so: <div class="wp-pagenavi pagination clearfix">
Is there a way of doing this? I have searched the theme and cannot find where this <div> is so that's the reason for wanting to change it hopefully somehow dynamically. I hope it makes sense.
Thanks for any help in advance,
Peter
you can do it using javascript, idk about wordpress and if u can get access to the code, but with javascript you can do the following:
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('.pagination').classList.add('wp-pagenavi');
console.log(document.querySelector('div'));
});
<div class="pagination clearfix">
DOMContentLoaded
DOMContentLoaded wait until the Dom is ready and after execute the srcipt
I have tried overriding all of the following templates:
page.tpl.php
region.tpl.php
block.tpl.php
node.tpl.php
I still at the top of my content region have the following markup:
<div class="field field-name-field-content field-type-text-long field-label-above"><div class="field-label">content: </div><div class="field-items"><div class="field-item even">
Each of the above templates have nothing but the very minimum to spit out $content usually.
What am I missing?
Sounds like you're looking for field.tpl.php. It's one of those template files, like html.tpl.php, that common themes sometimes don't provide default implementations for, so it falls back on the "hidden" implementation that lives in modules/field/theme.
I was just wondering how to remove the default theming divs of a field in Drupal 7, from within a module (so not with a theme function!!).
In my case: I implemented my own field in a module, now I'm using hook_field_formatter_view to display it. I read here that you can implement your own MYMODULE_theme() function in your module to declare a new field formatter.. but some default divs are still there:
<div class="field field-name-field-myfield field-label-above">
<div class="field-items"> <-- this one
<div class="field-item even"> <-- and also this one
<div id="my-own-field-div">
Is there a way to hide/edit them? I know of the template functions but its better to have the code inside the module..
I think you should try Fences.