I want to add a button in my drupal website which can redirect me to any specified article/page. Any suggestion will be helpful.
Use the Link module.
It allows you to add a field to your content type that has an href value and a Text value. Then you can change it's display output to output title as link which will output a hyperlink with the text you selected, and once clicked will redirect you to whatever href you set.
If you want to style it to look like a button you can add a CSS class to the Link field you added in your content type under manage fields >> Edit the link field.
I am using Bootstrap subtheme so the button CSS classes are already there for me. i simply add btn btn-default if I want to show a button instead of a hyperlink.
PS: DO NOT CREATE BUTTONS IN A BLOCK. Classes should never go into a block. And if you have clients who are going to use that site, they can mess stuff up pretty fast.
Create Block and put html code for button in block. Enable block on pages where you want.
While putting html code of button into block, please make sure that you have selected "Full Html" filter.
Related
I am in the process of developing a block based form plugin for WP. The main form block will support nested blocks - the button core component being one of them.
Problem is that whenever I include the button component, the thing that gets rendered in the front-end is an anchor tag instead. I checked - the link & anchor options are empty in the button sidebar options (in editor).
So shouldn't a button have been rendered instead? What am I missing here?
The official Wordpress reference guide states the following -
The presence of a href prop determines whether an anchor element is rendered instead of a button.
Props not included in this set will be applied to the a or button element
Source: https://developer.wordpress.org/block-editor/reference-guides/components/button/#props)
Also, is there any way to disable the anchor options when I am inserting a button component inside my form?
Wordpress version: 5.8
The core/button block only renders an <a> tag. You can see for yourself in the source code. The core/button block was not intended to create an actual <button> element (for submitting a form like in your example).
What you'll need to do is create your own custom block that does output a <button> HTML element.
I have some text field i.e in custom size(length,with) of product.
I want include a check box , when i click on check box , custom size fields will show/hide on checkbox click.please help me how i can perform this without any code customization.
I had tried some plugins but they add text fields but not show/hide them on checkbox click
First of all you need to add some scripts to make the code work. That is, you need to capture the checkbox click and analysing checked is true or false, you have to write code to show or hide the fields. A simple jQuery function is sufficient.
Or you can use product option plugins to make it work. I don't know which plugin you have used. I have used this one for my client. Try this if you need a plugin.
I'm making a form using a purchased theme with bootstrap 3. The forms I like from the theme use a CSS class called ".smart-form *" which affects everything inside the form where it's being used. I'm also using Summernote inside the form and, as shown in the picture below, everything seems ok:
The problem comes when opening the image or link attachment modal window. Here's a picture of the class:
And here's a picture of how the modal looks:
Now, if I uncheck those 3 attributes from that class, I get a perfect modal window but the rest of the form gets broken. Here's the correct modal window:
Is there any way of telling Summernote NOT to inherit those 3 CSS attributes?
Thanks!!!
I have created a page containing a list of items. Each item has an image corresponding to it which when clicked directs the user to a new page containing more information about the item. For some reason, when I asked my friends to go through the site, most of them thought that these were non-clickable images. What can I do to make it more obvious that a user can actually click on the image? Below you can find a screenshot of the page I am talking about and this is a link to the actual page. Thanks in advance for your help.
1.You can add a title attribute to a link, like this:
<a title="Read more" href="https://thechallengeclub.wordpress.com/challenge-1-just-water/">
Then when user hover over the image a tooltip will appear:
2.You can add an easy to see "More" button. It's up to you where you add this button, but it may be necessary to change the layout a little bit.
For example:
My client wants to edit pages content in Wordpress. I had to disable visual editor because it ruins custom html. The problem is my client isn't familiar with HTML.
What I want is to lock part of source code in WP editor for ex. in line
<div class="whatever">Lorem ipsum</div>
I want to allow him to modify only "Lorem ipsum" part.
How can I do that?
well you can provide a textarea for him to enter text and then replace html inside element with class whatever, so basically you control regions of html where modifications can be made instead of whole page, of-course you need to write some code to do so.
I would simply mark the editable regions with some kinda class, and then on page load add some script which will pick all regions with that clas and show a small editable button there, on click of those button a shim with text area would pop up where user can add his text/html and on done, the markup would be injected inside the element. Later on save, the whole page would can be saved, little tricky but can work :)