I tried to add a CTA to a WordPress site. I placed on the header and I added this HTML code to the header.php
<!-- This is my extra div element-->
<div class="extra-top"> <?php echo ' <a class="extra-topie" href="tel:6172010333">Call Us Now: (617) 201-0333</a> '; ?></div>
<!-- Ends extra div element-->
But the Anchor text is not working: it's not clickable yet.
For me work... But why you insert PHP echo if not use no variable?
Try this:
<!-- This is my extra div element-->
<div class="extra-top"><a class="extra-topie" href="tel:6172010333">Call Us Now: (617) 201-0333</a></div>
<!-- Ends extra div element-->
This suppose to work both the PHP and Direct HTML if you place it the right place.
If it is still not clickable, that mean you have issue with associated Application to handle dialer in Windows.. try from mobile and it should show its working.
Just tried that on my WordPress, it didn't work in desktop because I don't have default phone dialer ..but worked from mobile.
Related
I have been struggling with this problem for the last two weeks now, and the problem is that I am not able to display the ajax load more (and any of its post and even the button) on my custom archive page. I want to provide a sleek archive for my visitors, allowing them to just scroll in previous posts without having to use any pagination. And the strange thing is, when I echo the shortcode for the ajax load more, it doesn't display at all. When I inspect the code, it has been automatically set to visibility:hidden. What really seems to be the problem here?
How can I display this in my "page-arkiv.php"?
Plugin used: https://wordpress.org/plugins/ajax-load-more/
Code:
<h1>TEST PAGE </h1>
<?php echo do_shortcode('[ajax_load_more]'); ?>
Output:
<div id="ajax-load-more" class="ajax-load-more-wrap default" data-alm-id="" data-canonical-url="http://whatever.com/arkiv/" data-slug="arkiv" data-post-id="73">
<div class="alm-listing alm-ajax" data-repeater="default" data-post-type="post" data-order="DESC" data-orderby="date" data-offset="0" data-posts-per-page="5" data-scroll="true" data-scroll-distance="100" data-max-pages="0" data-pause-override="false" data-pause="false" data-button-label="Older Posts" data-transition="fade" data-images-loaded="false">
</div>
<div class="alm-btn-wrap" style="visibility: hidden;"><button class="alm-load-more-btn more " rel="next">Older Posts</button></div></div>
And this is my Reading settings:
I have a class called event-manager in a wordpress php file in the plugins folder. They are using this class to style the elements, and I am using a custom css to over-write this. The problem is I cannot overwrite their css so I had to remove this class all-together.
I need to remove this class dynamically, removing manually every-time is pointless, because every-time the plugin gets updated the class comes back.
And here the html structure. The class appears on two different pages and on both pages the image alignment is different.
<!-- Home page -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-image"> <!-- this image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
<!-- Blog single -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-img"> <!-- and image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
To acheive this I used jquery .removeClass method.
$(function(){
$(".featured-img > div, .featured-image > div").removeClass("event-manager");
});
I also tried this
$(function(){
$(".featured-img > div").removeClass("event-image");
$(".featured-image > div").removeClass("event-image");
});
And this
var featuredimg = ['.featured-img > div','.featured-image > div'];
$(featuredimg.join()).removeClass('event-image');
On all these methods, the class seems to be removed, because its on two different pages, when I load the homepage.php for the first time, the class is removed but when I go to single.php, it did not remove automatically and when I refresh the page, the class removes. I am not sure why.
Can anyone help me.
Thanks.
In my opinions it is related with caching. Do you have any? If yes disable it to test if works without it. If no you can check on developer console if do you have any errors. Issue can be also with place the script like this (prefer at the end of the page).
I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.
I know that if I just wanted to link it to the index I should use this:
<?php echo home_url(); ?>
But I want the link to send the user to the "About" section. Basically, I need to know how to do this:
index.php#about
but with PHP.
Thank you!
You're on the right track.
The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.
Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section "<a name="about">About</a>"' and then you'll be able to link to it using anchors like in your example-- About
If you are new to php, maybe you should use wordpress's editor ?
In your page (in the admin page), you can put any html you want.
In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.
So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !
You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.
In practice, you'll have some HTML containers that look something like this:
<!-- Your menu -->
<ul>
<li id="about-button"></li>
<li id="product-button"></li>
<li id="something-button"></li>
<li id="else-button"></li>
</ul>
<!--Your page sections-->
<main class="my-page">
<section id="about"></section>
<section id="product"></section>
<section id="something"></section>
<section id="else"></section>
</main>
Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:
$('#about-button').click(function() {
$.scrollTo($('#about'), {
duration: 800,
offset: -50
});
return false;
});
The JS is saying that once you click on the #about-button, take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.
Here;s the full header.php
http://collabedit.com/3au85
Here's the code that I added:
<!-- This is my extra div element-->
<div class="extra-top"><a class="extra-topie" href="tel:6172010333">Call Us Now: (617) 201-0333</a></div>
<!-- Ends extra div element-->
But the Anchor text is not working: it's not clickable yet. I mean its static and does nothing and it should show the tel: hyperlink .
Please share your thoughts!
Cheers
Im building a wordpress site which has a custom Tiny MCE style added to it, it gives the user a pre styles 'More' button containing an anchor, that goes at the bottom left of the post. The more button is formatted like this
<p><span class="moreButton"><a>Link here </a></span></p>.
My problem is styling the boxes to be dynamic in size, regardless of how much text is inside them and because the more button style is being inputted through a wordpress post, it is contained in a div that I cant seem to free it from.
All in all it looks like this:
<div class="newsBoxMore">
<div class="newsBoxMainHolder">
<div class="alumniHeading newsMainHeading">
<h4>21 Years of NCCA Masters</h4>
</div>
<div class="alumniContent newsMainContent">
<p>As a reminder of where we started out this example from 1990 won a special award at the CG90 Festival.</p>
<p>Text in here.</p>
<p><span class="moreButton"><a title="Video" href="" target="_blank">View Here</a></span> </p>
</div><!-- end newsMainContent -->
<div class="newsDateHolder">
<p>POSTED: 16.06.13</p>
</div><!-- end newsDateHolder -->
</div><!-- end newsBoxMainHolder -->
</div><!-- end news Box More -->
What i am trying to do is move
<p><span class="moreButton"></span></p>
out of the newsMainContent div and i want it to sit under it, just above the newsDateHolder div. I have tried using the following code :
$(".newsMainContent span").insertAfter($(".newsMainContent"));
The problem with this is that it duplicate the moreButton class with every anchor thats on the page. so i end up with a post that should have one moreButton but it now has 10 because the page is showing 10 posts.
Any help will be greatly appreciated!!
You need to give the element you want it to be after a unique ID, and use that instead of the class.