I am trying to add a code snippet in Wordpress using the Code Snippet plugin (https://nl.wordpress.org/plugins/code-snippets/).
I want it to make a DIV on my homepage clickable so it will hyperlink to another page. The DIV I want to make clickable is <div class="row theme-project-row"></div>
Screenshots:
Rendered page: https://snipboard.io/AUDaho.jpg
DIV in DevTools: https://snipboard.io/zh9VZj.jpg
Any suggestions on the PHP snippet to add? I already tried finding the DIV in my theme's PHP files but I can not locate it. Sorry in advance for asking stupid questions, I am really not an advanced user but I sincerely would like some help.
Thanks in advance I would really appreciate it.
This is how I would attempt it using a snippet. Make sure to 'activate' it when you save.
add_action( 'wp_head', function () { ?>
<script>
window.onload=function() {
console.log("WE GOT window.onload")
let div = document.getElementById('theme-project').querySelector('.theme-project-row');
console.log("WE GOT div:", div)
// give it a clickable style
div.style.cursor='pointer';
div.addEventListener('click', function() {
location.href='home-page.html'; // or whatever link
}
}
</script>
<?php } );
Related
I'm trying to add a tooltip function (on hover) to the following shortcode:
<?php
echo do_shortcode('[um_loggedout]Accedi /<br>Registrati[/um_loggedout]');
?>
I've already created a css class with all the parameters needed, but since I am not
big with php I don't really know how I can make it work.
Anyone can help me? If this detail can be useful I am working via Wordpress.
Thanks,
Ivan
What does that output to the frontend? Can you apply your hover styles to one of the classes generated by the shortcode?
---Update---
So you're trying to create a login form appear when they hover over the logged out text?
If so, I think you can use [ultimatemember form_id=####] to display the login form, you'll need to replace the #### with the login form ID. If the <br> tag in the above example works, why can't you wrap the text in a div?
<?php
echo do_shortcode('[um_loggedout]<div id="display-login-form">Accedi /<br>Registrati</div>[/um_loggedout]'); ?>
Then with jQuery/JavaScript, on hover make the box display?
$('#display-login-form').on('mouseover', function() {
$('[insert form container id here]').show();
})
You'll need some logic/ability to hide it if they change their mind.
I am looking to find a solution for the following problem:
Via a plugin i would like to add a black bar to the very top of every page (similar to the wordpress admin bar you can see when you are logged in at wp-admin).
A solution I was looking into was to just add the code via a javascript file and append the html to the header. However this does not sound like the right way to do it. Unfortunately I haven't found any references on google on how to effictively do this the right way.
I was looking into register_my_menus() function but the function description did not promise the desired efforts.
Can anyone point me into the right direction please?
Thanks!
I think javascript would be better to append the html for a admin bar. If these users aren't affiliated with a wp backend you don't need any wp functions to display the desired links.
Another option ( I would say better then appending with JS ) would be to hook into the wp_footer hook and just create the HTML you need and use a CSS position:fixed; or position:absolute; with top: 0;
Example:
// Enqueue styles for top-bar
add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_style( 'style1', plugin_dir_url( __FILE__ ) . 'css/top-bar.css' );
});
// Add HTML for top-bar
add_action( 'wp_footer', function(){
echo '<div class="top-bar">Some content</div>';
});
Best way is to add a function to your theme's functions.php file
function header_notification()
{
echo '<div><strong>Any html goes here</strong></div>';
}
add_action('wp_head', 'header_notification');
I was wondering could you help me, we currently have an announcement banner across the top of all our webpages which I want to remain apart from one page. A couple of guys did a bit of work for me a put an announcement in which I can edit via Custome Content Type Manager on Wordpress.
In the Header.php the code is there and I'm not sure how to get it to stop appearing on a particular page, the id of the page I DONT want it on is 2664. The code is shown below:
<?php
$gathering_page = get_the_ID();
if( ($gathering_page == 3001 || $gathering_page ==2664) && !(is_front_page()) ){ ?>
I'm not sure if the guys have tried to block it or what this code means.
Any feedback would be appreciated. Thanks
EDIT: This may make it easier; I would like to make a div class disappear on the page named above. the div class is
<div class="snippetHomeTop">
I'm sorry if I did wrong, but have you tried using the is page?
<?php if (is_page('2664')) {
// don´t show content for page ID 2664
} else {
// show content for other pages
}?>
Good Luck
I need to add a menu on a wordpress page but on the tinymce editor. I know there are a couple of tags ["example"=something] for plugins so I would like to know if there's anything similar to load a menu.
this is how I'm loading the menu on the editor (php)
<?php wp_nav_menu( $args ); ?>
and what I need is to load the menu between content that is editable for a specific page.
I am not sure what is your exact requirement. If you need a button on your editor you can use the below code to your themes functions.php. This code will add a button tag creator to the editor. Similarly you can add anything in the editor.
<?php
// Add buttons to html editor
add_action('admin_print_footer_scripts','eg_quicktags');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
button = edButtons.length;
edButtons[edButtons.length] = new edButton('ed_paragraph','button','<button>','</button>','button');
jQuery(document).ready(function($){
jQuery("#ed_toolbar").append('<input type="button" value="p" id="ed_paragraph" class="ed_button" onclick="edInsertTag(edCanvas, button);" title="p" />');
});
</script>
<?php
}
?>
First off, as the other answer suggests, you're likely going about this the wrong way. BUT : to solve your problem, wordpress provides a custom menu widget, and there is a plugin to put any widget you like on any page vai the editor, using a shortcode.
Have a look at this:
https://wordpress.org/plugins/widget-shortcode/
How do I add a div between the header area and content area of a thesis theme. What is the code I need to write in custom_functions.php file to do this? If that's not the place, where do I need to make changes to get this done?
In your custom_functions.php file add the following code:
function my_div()
{
echo '<div>Some new DIV between the header and content</div>';
}
add_action('thesis_hook_after_header', 'my_div');
You my want to reference Thesis Hooks and the DIYThemes site for more specific Thesis help.
You'll need to edit the theme files. Probably the header.php and the one where the one which contains the body. Before you fire off questions like this, please read through http://codex.wordpress.org/Theme_Development.
One really easy way, is to use Thesis Openhooks. Select the one that's between the header and the content area. I use that method all the time, especially for images. Inside the hook, all you have to do is type the HTML code for the DIV (I tried to type it here, but the code disappeared after I posted the comment) and then I can add CSS code to it in custom.css. Hope this helps :)