How to upload a video using ACF in WordPress?

2022-05-07 06:20 Reeju Ballabh imported from Stackoverflow

I am still at learning phase in WordPress. I cannot figure out in ACF which field type should I choose to upload a video file and which code should I write to show it at the front-end. Please look into the below code. I am using the_field('') but it isn't working. Can anyone help

                <video width="954" height="535" controls class="tm-mb-40">

                    <source src="video/wheat-field.mp4" type="video/mp4">   
                      
                    Your browser does not support the video tag.

                </video>

2 answers

answered 2022-05-07 07:46 Cristiano Reigns
I think choose file under the file type in ACF and Upload it. After that use the_field there in your above written code.
```
<video width="954" height="535" controls class="tm-mb-40">
  <?php the_field('video');?>

   </video>
```

answered 2022-05-07 11:54 Sanket Thakkar

You can use ACF Type Link in the backend to attach video link like these

    <?php 
    
    $link_data = get_field('video_link'); 
    
    if(!empty($link_data))
    { 
    $link = $link_data['url'];  
    
    ?>
    
    <video width="954" height="535" controls class="tm-mb-40">
      
        <source src="<?php echo $link; ?>" type="video/mp4">   
                          
        Your browser does not support the video tag.
    
    </video>

<?php } ?>

See also questions close to this topic

delete a table form a database using laravel command
i need to delete a database table using laravel artisan command . not like this command php artisan migrate:rollback --step=5

i need to create like this route or controller code .

Route::get('/clear/database', function () {
```
    Artisan::call('cache:clear');
    return redirect('/');
```
});

. i also try public function dd()
```
{
    Schema::drop('table_name');
}
```
but it not working . gives me error like this SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails (SQL: drop table table_name)

no foreign key for the table . what should i do ?

thanks in advance!

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

Can you add apps made from (js, nodejs, express and mongodb) in a wordpress website?

I already have a wordpress website. I studied web development using js, node.js, express and mongodb and build some projects. I would like to add it to my website. Is this possible or I just need to create a website without wordpress and add my projects?

Query to get Woo products in a parent-children order

I want to build a MySQL query for a Woo database schema to get simple/variable products, but in a specific order: I want to get them in an ID ASCending order, but when a variable product is met, I want to get the variations exactly below their parent.

So for a simple product, or the parent of a variable product, the post_type field is set to 'product' and the post_parent field is set to 0. For the children of a variable product (a.k.a variations) the post_type field is set to 'variable_product' and the post_parent field is set to the ID of the parent product.

So, imagine this desired order:

ID	post_title	post_type	post_parent
1100	title1	product	0
1104	title2	product	0
1130	title2 - variation1	variable_product	1104
1200	title2 - variation2	variable_product	1104
1208	title2 - variation3	variable_product	1104
1107	title3	product	0
1111	title4	product	0
1205	title4 - variation1	variable_product	1111
1210	title4 - variation4	variable_product	1111
1430	title4 - variation3	variable_product	1111
1432	title4 - variation2	variable_product	1111

So by the above table you see that I want products to be sorted by their ID, until the variation(s) of a product are met, which I want to be placed under their parent, and get sorted themselves by their ID also. So I don't care about titles not being sorted alphabetically (title4-variation4 is sorted above title4 - variation3 because the variations' IDs are sorted in an ascending order).

So I tried to play a little with ORDER BY ID ASC, post_parent ASC and also ORDER BY ID ASC, post_type ASC because product is sorted alphabetically above variation_product, but I couldn't get them sorted correctly. I always end up with parent products being sorted higher than variations, just because their IDs are smaller.

SELECT * FROM wp6c_posts WHERE post_type IN ('product', 'product_variation') ORDER BY ID ASC, post_parent ASC;

Obviously I have to query table wp6c_posts twice, once for the simple/parent products, and then for the variations of the variable products, but I can't think of the correct query.

Can someone help me with this?

Paragraph returns not being acknowledged in Wordpress Advanced Custom Fields

I have a WYSIWYG field setup via the Advanced Custom Fields plugin. The field itself is displaying on the frontend, but paragraph returns are not being acknowledged. For example if I write 4 sentences with a return key pressed between each one, the resulting frontend view is just one long line of text. If I view the backend editor in "Visual" tab I can see the paragraph returns, but if I change tab to "Text" there is no HTML "p" tags in place. Can anyone suggest a solution?

Use update_option to update a field in a block?

I need help with updating a field that's in a block. After doing some research, I think you can update a field that's in a block using update_option. This is something I'm unfamiliar with need help with updating a text field. I'm trying to add "first_name" to a text field and the code below doesn't work:

function post_extra_save( $post_id, $post) {
if ( has_blocks( $post->post_content ) ) {
    $blocks = parse_blocks( $post->post_content );
    foreach ( $blocks as $block ) {
        if ( $block['blockName'] === 'acf/opby-video' ) {
            $first_name = esc_attr($_POST["#youtube_title input"]);
            update_option("first_name", $first_name);
        }
    }
}
};
add_action( 'save_post', 'post_extra_save', 10, 2 );

The HTML code is this:

<div id="youtube_title" class="acf-field acf-field-text acf-field-6260f466f1667" data-name="youtube_title" data-type="text" data-key="field_6260f466f1667" data-conditions="[[{&quot;field&quot;:&quot;field_60c3cb8256cc7&quot;,&quot;operator&quot;:&quot;==&quot;,&quot;value&quot;:&quot;youtube_url&quot;}]]">
  <div class="acf-label">
  <label for="acf-block_6270be313faf7-field_6260f466f1667">Title</label></div>
  <div class="acf-input">
  <div class="acf-input-wrap"><input type="text" id="acf-block_6270be313faf7-field_6260f466f1667" name="acf-block_6270be313faf7[field_6260f466f1667]"></div></div>
</div>

Any idea of what I did wrong?

Change shipping cost depending on ACF field and exclude certain shipping methods
I'm trying to add an extra shipping cost for all the additional shipping fees that aren't calculated from the third party shipping company:
```
//add additional extra cost to shipping except for local pickup
    
        add_filter( 'woocommerce_package_rates', 'shipping_extra_cost' );
        function shipping_extra_cost( $rates ) {
        
            
            foreach($rates as $key => $rate ) {
                $rates[$key]->cost = $rates[$key]->cost + get_field('extra_cost', "51");
            }
    
        return $rates;
    }
```
But then the additional fee is also added on local shipping which is wrong.

I can't work with WC shipping classes because that messes with the third party shipping calculation program.

Is there a way I can check if "local pickup" exists and then exclude the extra fee from it?

Related questions

How to upload a video using ACF in WordPress?

2 answers

See also questions close to this topic