How To Add A Button Anywhere In Your Theme

This tutorial shows you how to display a button in any theme.

Here’s the question this post answers from the forums:

How do I create a custom text button and place it under the Home Top #1 area in the Enterprise child theme? I imagine that a text button should not be a difficult code… but I’m not a programmer, however, can cut’n paste. I need to display this button float right.

There’s at least 3 ways to do this:

1. Hard code it directly into the front-page.php file
2. Hook it in from functions.php
3. Add it to a text widget after your Home Top widget

1. Hard Code Button In Template File

For Genesis users, simply add this code directly into the file in the position you want it to display:

For non Genesis users, change the hook in the above code or use this code below directly in your file.

2. Hook Button From functions.php

Simply copy this PHP code from the view raw link in the Gist and paste it at the end of your child themes functions.php file using a code editor.

How To Modify The Code

• The code includes a conditional tag so it only displays on the front page which you can change is_front_page()
• The code includes the genesis_before_loop hook which you can change to any WordPress or theme specific hook.
• The code includes the button class so it uses the CSS in your style.css file. You can also change this class and add your own button CSS to your child themes style.css file.

3. Add Button HTML to Text Widget

If your theme already includes widgets or you want to add a widget, you can then add the button HTML wrapped in a custom class, directly to a text widget.

This method will display your button within the div of the widget you add it to.

Sample CSS

Simply paste this CSS at the end of your child themes style.css file and modify to your own styling preferences.

Related Tutorials

Источник

php — How to align radio buttons dynamically in center with same button position?

I am setting up an online quiz with bootstrap, where the user gets a question with 4 different answer possibilities. Each answer is a radio button with the according answer, echoed by PHP. My goal is to center each of the answer possibilites in the middle of a card body, but have the circles of the radio buttons on the same margin.

Just an example with 2 hardcoded radio buttons:

   
 
 
 
 
  Long answer, normally echoed by php 
 
  answer echoed by php 
 
 
 
 Copy code

Answer

Solution:

You can easily do that by adding d-flex and justify-content-center classes in the card body

   
 
 
 
 
  Long answer, normally echoed by php 
 
  answer echoed by php 
 
 
 
 Copy code

Answer

Solution:

 
 
 
 
 
  Long answer, normally echoed by php 
 
  answer echoed by php 
 
 
 
 
 Copy code

I made each form-check a row and added col-xs-4 col-xs-offset-4 in parent div with class «card-body» .

I tried this code myself and I think this is what you need.

Share solution ↓

Additional Information:

Didn’t find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Similar questions

Find the answer in similar questions on our website.

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

About the technologies asked in this question

PHP

PHP (from the English Hypertext Preprocessor — hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites. The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/

CSS

CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language. It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css

Bootstrap

Bootstrap is not exclusively a CSS framework, but its most popular features are CSS-centric. These include a powerful grid, icons, buttons, map components, navigation bars, and more.
https://getbootstrap.com/

HTML

HTML (English «hyper text markup language» — hypertext markup language) is a special markup language that is used to create sites on the Internet. Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/

Welcome to programmierfrage.com

programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.

Get answers to specific questions

Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.

Help Others Solve Their Issues

Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.

Источник

Как спозиционировать кнопку?

Что пробовал
Вариант1 — не особо подходит, тк кнопка должна занимать две колонки по макету
Кнопка спозиционирована относительно header

Вариант 2 — кнопка внутри контейнера—row—col-2
Кнопка размещаться сразу под header-top, несмотря на то что у header задана высота в 900 px
(из за того что кнопка обернута в container позиционирование происходит не отношению к header а по отношению к container)

Подобная ситуация и с соц кнопками, они спозиционированы относительно своего родителя (wrap) который также absolute его стили

&-wrap position: absolute padding-top: 800px right: 0 top: 0 &-social position: absolute right: 0 bottom: 0 justify-content: flex-end

Кнопку спозиционировать таким же способом как и кнопки соц сетей?

 
+38(095)668-55-55
Архитектура
Cпособ сделать жизнь лучше
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
КНОПКА

Кнопка имеет стиль описанный в варианте 2

/*HEADER*/ .header position: relative z-index: 5 height: 980px border: 5px solid red .button position: absolute bottom: 0 left: 0

Простой 4 комментария

Источник

How to make vertical alignment top to bottom buttons like vertical menus with bootstrap.

Bootstrap .btn-group-vertical class gives us the facility to design vertical buttons in top to bottom groups same as vertical menus. We can use this class to create multiple type of button menus with also supports responsive feature. So here is the complete step by step tutorial for Create vertical menu Button groups using Bootstrap classes in HTML,PHP.

How to Create vertical menu Button groups using Bootstrap classes in HTML,PHP.

Code for vertical-button-groups.html file.

         
Vertical Button Groups
 
 
Android PHP Bootstrap WordPress


 
Android PHP Bootstrap WordPress


 
 
Android PHP Bootstrap WordPress


 
Android PHP Bootstrap WordPress


 
Android PHP Bootstrap WordPress


 
Android PHP Bootstrap WordPress
 
  

Источник

php — change quantity button position in woocommerce

Answer

Solution:

After you have copied your template you can edit it freely

Replace your code piece with this

 
 apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ), 'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ), 'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok. ) ); do_action( 'woocommerce_after_add_to_cart_quantity' ); ?>
 Copy code

Now we have wraped our qty in extra div. Depending on your theme may or may not need additional css.

.qty-row < display: block; float: left; width: 100%; >.qty-row span Copy code

if you want text and qty lined remove width from .qty-row span . By default quantity is float left so we need span to be floated too. Like i said you may not need any additional css changes.

Share solution ↓

Additional Information:

Didn’t find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Similar questions

Find the answer in similar questions on our website.

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

About the technologies asked in this question

PHP

PHP (from the English Hypertext Preprocessor — hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites. The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/

CSS

CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language. It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css

Welcome to programmierfrage.com

programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.

Get answers to specific questions

Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.

Help Others Solve Their Issues

Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.

Источник