Avada theme, changing related project text - wordpress

Hi I have been trying to change 1 word of text within the Avada theme.
Here is the line of text: http://prntscr.com/ibac1t
This is on all gallery pages, but here is one page for example: http://preview.geomedia.co.uk/nursteadcourt/our-destination/wedding-5/?portfolioCats=24%2C21%2C23%2C22
I can't seem to find where it is to change, I would like to change the word 'Projects' to either: Pictures or Gallery's. This is probably more complex than I think it will be.
Any assistance in this would be great.
Thanks

You can find this in the file located at
/website_folder/wp-content/themes/Avada/includes/avada-functions.php.
It is in the "avada_render_related_posts" function and at/around line 327.
Copy the file to your child theme folder or else you will have to update this file after every theme update.
Hope this helps.

We use something similar to this:
<script type="text/javascript">
jQuery(document).ready(function() {
/*<![CDATA[*/
jQuery('.related-posts > div > h3').html('Posts Relacionados');
/*]]>*/
});
</script>

Related

NEED HELP - how to make an excerpt of the post clickable?

I am working in Wordpress, and I am using Elementor. Elementor has a native feature for the title of the posts and images to link to the post.
But if I add an excerpt text, it doesn't link to the post. It is not clickable. The read more button does, but not the excerpt of the post.
I am trying to create something like this: greatist.com Every post on their website is clickable - the excerpt, the title, and the image.
My excerpts are really short like on that website, and I would really like them to be clickable. I have absolutely no idea how to do this and I'm beginning to think it's not possible. I am using Hello Elementor theme.
I would deeply appreciate anyone's help. I just registered to ask this question.
You can always try to save text as an photo and make it clickable or make a full section clickable.To do this try to use plugin called "Make Column Clickable Elementor".
Add this code to your website:
const postExcerpts = document.querySelectorAll('.elementor-posts .elementor-post .elementor-post__excerpt');
postExcerpts.forEach(postExcerpt => {
const postUrl = postExcerpt.parentNode.querySelector('.elementor-post__title a').href;
postExcerpt.addEventListener('click', () => {
window.location.href = postUrl;
});
});
This can be added using a script tag. Choose from the following options:
Add this code as a script tag in your functions.php file, to be rendered at the end of the page (wp_footer action hook).
If you have Elementor Pro, use its built-in Custom Code feature to add the code in a script tag to the end of the body tag.
It's recommended to add a pointer cursor so the user will know the excerpt is a link. This can be achieved by adding the following CSS to your style.css file.
.elementor-posts .elementor-post .elementor-post__excerpt {
cursor: pointer;
}

Including CSS in my plugin shows up in source but does not apply to my elements

I'm including a .css file in my plugin and the files show up on my page and I can see the path and click through the path to see the raw .css content. However, It is not applying to my HTML elements.
I removed the wp_enqueue_style() that included my CSS file in my plugin and placed the code in my theme's custom CSS template I'm using (just the raw css) and refresh and that works; the CSS is applied to my HTML elements as expected.
One thing to note is that in the same plugin I'm returning HTML that I want this CSS to be applying to through a shortcode on a page.
Is it something with the CSS not being registered/applied in time to pick up or find the elements if it's adding from a plugin? I need the CSS to be added from the plugin and not from the theme's template. Is there something I'm missing?
Thanks!
I figured out my own problem.
My plugin code was:
wp_enqueue_style('nbfx-fs-css', plugins_url('/assets/css/nbfx-fs.css', __FILE__), array(), null, true);
I took a look at my HTML source and found this:
<link rel='stylesheet' id='nbfx-fs-css-css' href='MY-CORRECT-CSS-FILE-PATH' type='text/css' media='1' />
And I noticed the media='1'. So apparently I need to leave the 4th parameter blank or provide 'all'.
I hope this helps someone else who copy and paste the wp_enqueue_style() function with set parameters from someone else.

Change wordpress menu href

I wanna change the href of a specific menu item on all pages. Is this possible? Where should I put the code?
I also added this javascript to the end of a specific page:
<script type="text/javascript">
document.getElementById("menu-item-100").href="xyz.php";
</script>
It didn't work even though when I viewed the page source it showed that the script was placed after the original href of the menu.
I don't wanna use custom links.
Try putting this in your footer.php
<script>
jQuery(document).ready(function($) {
$("#menu-item-100").attr("href", new_href);
});
</script>
Wordpress a lot of the times needs to have jQuery(document).ready(function($) for no-conflict reasons.
Try it, may be helpful to you:
$("#menu-item-100").attr("href", new_href);
Apparently the element with the ID of menu-item-100 had an a tag inside of it; so I had to retarget the whole thing.
This fixed the whole thing.
document.getElementById('menu-item-100').getElementsByTagName('a')[0].href="THE LINK";
Thanks to #NooBskie I put it inside the footer.php and it affected all the pages.

How to remove unwanted <p> tags from WordPress editor using TinyMCE?

I am using WordPress editor TinyMCE. I have something like this:
<div class="TA_excellent" id="TA_excellent150"><ul>...</ul></div>
<script type="text/javascript" src="http://www.jscache.com/wejs?wtype=excellent&uniq=150&locationId=287500&lang=en_AU">
</script>
When I skipped to visual editor "script" tags are removed from the content. So I tried every kind plugin including Ultimate TinyMCE but this time "script" tags are wrapped by "p" tags.
So output is something like this:
...</ul></div>
<p>
<script type="text/javascript" src="http://www.jscache.com/wejs?wtype=excellent&uniq=150&locationId=287500&lang=en_AU">
</script>
<script src="http://www.tripadvisor.com.au/WidgetEmbed-excellent?uniq=150&locationId=287500&lang=en_AU"></script
</p>
I also tried plugin called "Advanced TinyMCE Settings" it allows me to change the default TinyMCE configuration. My config under TinyMCE settings is like this:
extended_valid_elements: script[type|src],a[*]
I spent hours and hours on it just won't work. I can't get rid of this "p" tags. They keep continue to publish automatically.
Here are screenshots from Ultimate TinyMCE:
Removing unwanted p and br tags (empty ) can be done by adding simple filter function to theme functions.php
Here is the code you need to add.
function remove_additional_p($content){
$content = forec_balance_tags($content);
return preg_replace('#<p>\s*+(<br\s*/*>)?|s*</p>#i','',$content);
}
add_filter('the_content','remove_additional_p',20,1);
Use this code to remove <p></p> before editor initialize.
function tinymce_remove_root_block_tag( $init ) {
$init['forced_root_block'] = false;
return $init;
}
add_filter( 'tiny_mce_before_init', 'tinymce_remove_root_block_tag' );
It can be done without code.
Go to Settings > TINYMCE Advanced and check
Stop removing the <p> and <br /> tags when saving and show them in the HTML editor
Whereas it is bad practice to put scripts in your text area, well you can remove <p> tags by doing this:
$text=str_ireplace('<p>','',$post->post_conent);
$text=str_ireplace('</p>','',$post->post_conent);

WordPress Editor Image for Shortcode

Quick question about WordPress. I've been Googling all over the place and cannot find an answer.
Basically I'm looking to replicate what happens when you add a gallery: have an image displayed as a stand in for the gallery shortcode [gallery]. The shortcode's visible when you go to edit HTML.
I'd like to exactly copy this effect: When a shortcode inserted into the editor I'd like for to to be rendered as an image.
Things I've Tried:
Inserting an element (image, div, I found an input is pretty unfuckwithable, etc) that's wrapped by a shortcode (This works ok, not great. The short code's still visible and WP will auto add paragraphs to the element to create space that users could, possibly, add content that'll be eaten by the short code) -
Inerting the short code as a < !-- --> comment (This also doesn't work great, WP will occassionally eat it moving between Visual/HTML. The comments ALSO eat your content < !-- [shortcode]--> placeholder < !--[/shortcode] --> = < !-- rendered shortcode -->)
That's the extent that I've thought of things. I cannot find a guide on how to do mimic the [gallery]'s behavior and can't find it by going through wp-admin's guts.
Thanks!
Alright, found the answer thanks to Dan's hint. Here's how to do it:
First (as Dan suggested) take a look at how they add the Gallery plugin to Tiny MCE. There's actually an uncompressed js file that will give you the overview you need, find it in:
/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin.dev.js
This goes over the basics on adding this type of plugin to TinyMCE (more info here). To get WP to load the .js file with your TinyMCE plugin, see this helpful guide.
Basically here's the code:
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "add_jolokia_tinymce_plugin");
//Applying the filter if you're using the rich text editor
}
function add_jolokia_tinymce_plugin($plugin_array) {
$plugin_array['example'] = '/path/to/example.js';
return $plugin_array;
}
Add this to a plugin or function.php in a theme And you're good!

Resources