function pagination($pages = '', $range = 2)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "«";
if($paged > 1 && $showitems < $pages) echo "‹";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "".$i."":"".$i."";
}
}
if ($paged < $pages && $showitems < $pages) echo "›";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "»";
echo "\n";
}
}
STEP 2. To style it, add the following to your stylesheet (typically style.css).
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
.pagination a:hover{
color:#fff;
background: #3279BB;
}
.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}
STEP 3: Final step, Put in your template file:
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$arg= array('post_type' => 'post-type',
'taxonomy' => 'texonomy-slug',
'term'=> 'term-slug',
'paged' => $paged,
'posts_per_page' => 5,
'orderby' => 'date',
'post_status'=>'publish'
);
$loop = new WP_Query($arg);
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php endwhile; ?>
<?php if (function_exists("pagination")) {
pagination($loop->max_num_pages);
}
/wp-content/plugins/ directory. If you're uploading it make sure to upload
the top-level folder. Don't just upload all the php files and put them in /wp-content/plugins/.
if (function_exists('get_wp_term_image'))
{
$meta_image = get_wp_term_image($term_id);
//It will give category/term image url
}
echo $meta_image; // category/term image url
where $term_id is 'category/term id'
[wpaft_logo_slider]Call shortcode to your php template file using
echo do_shortcode('[wpaft_logo_slider]');
Carousel By category
*[wpaft_logo_slider category="SLUG OF CAROUSEL CATEGORY"]* And we can call shortcode to our php template file using
echo do_shortcode('[wpaft_logo_slider category="CAROUSEL CATEGORY SLUG"]');
NOTE: Be sure the 'SLUG OF CAROUSEL CATEGORY' is the slug of category.
There are multiple ways. For examples:-
1. http://yourdomain.com/
echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);
2. http://yourdomain.com/index.php/
echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK);
3.http://yourdomain.com/js/
echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);
4.http://yourdomain.com/media/
echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
5.http://yourdomain.com/skin/
echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN);
// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3; // 3 products per row
}
}
This is how you can zip a folder via SSH on your Linux server. Works on Debian and other servers.
zip -r filename.zip foldername/
//First get the iframe URL
var url = jQuery('#YourIFrameID').attr('src');
//Then assign the src to null, this then stops the video been playing
jQuery('#YourIFrameID').attr('src', '');
// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
jQuery('#YourIFrameID').attr('src', url);
Question: How can we show div on hover and hide div on mouseout ?
Answer: Using below example code we can do this.
HTMLhover anchorJSlorem ipsum dolor sit amet......
(function(){
var del = 200;
$('.icontent').hide().prev('a').hover(function(){
$(this).next('.icontent').stop('fx', true).slideToggle(del);
});
})();
To add "add to cart" button on upsell product page-
Follow below steps : -
STEP 1. open the upsell.phtml page:-
i.e.app/design/frontend/default/your theme/template/catalog/product/list/upsell.phtml
STEP 2. Put the code where button to show-
Enjoy:)
SCRIPT:Click 1
Click 2
jQuery(document).ready(function() {
jQuery('#faq-list h2').click(function() {
jQuery(this).next('.answer').slideToggle(500);
jQuery(this).toggleClass('close');
});
}); // end ready
Important: Please make sure, jQuery library is included in the page.
function createSlug($str, $delimiter = '-'){
$slug = strtolower(trim(preg_replace('/[\s-]+/', $delimiter, preg_replace('/[^A-Za-z0-9-]+/', $delimiter, preg_replace('/[&]/', 'and', preg_replace('/[\']/', '', iconv('UTF-8', 'ASCII//TRANSLIT', $str))))), $delimiter));
return $slug;
}
For example:
$str= 'this is slug'; //If this is the string which we have to convert as slug $createdSlug= createSlug($str); //Call funtion echo $createdSlug; // Print outputOutput:
this-is-slug
//disable src set
function aft_disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'aft_disable_srcset' );
Question: How can we customize custom logo dimension in child theme?
Answer: Putting following code/hook in child theme functions.php, logo dimension could be customized.
If we want to add width=500 and height=200 for logo, we can use below filter.
add_action( 'after_setup_theme', 'child_theme_logo_customize', 99 );
function child_theme_logo_customize() {
add_theme_support( 'custom-logo', array(
'width' => 500,
'height' => 200,
) );
}
CSSLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
--- Full width container ---Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
left: 50%;
background-color:red;
}
| SSH Command | Explanation |
|---|---|
ls | Show directory contents (list the names of files). |
cd | Change Directory. |
mkdir | Create a new folder (directory). |
touch | Create a new file. |
rm | Remove a file. |
cat | Show contents of a file. |
pwd | Show current directory (full path to where you are right now). |
cp | Copy file/folder. |
mv | Move file/folder. |
grep | Search for a specific phrase in file/lines. |
find | Search files and directories. |
vi/nano | Text editors. |
history | Show last 50 used commands. |
clear | Clear the terminal screen. |
tar | Create & Unpack compressed archives. |
wget | Download files from the internet. |
du | Get file size. |
CSSLorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.
*, *:before, *:after {box-sizing: border-box !important;}
article {-moz-column-width: 13em; -webkit-column-width: 13em;-moz-column-gap: 1em; -webkit-column-gap: 1em; }
section {display: inline-block;margin: 0.25rem;padding: 1rem;width: 100%; background: #efefef;}
find * -type d -print0 | xargs -0 chmod 0755 # for directories find . -type f -print0 | xargs -0 chmod 0644 # for filesFor WordPress -
All files should be 664. All folders should be 775. wp-config.php should be 660.
Question: How can we integrate pagination with list of categories in wordPress?
Answer: Below are code to integrate pagination with list of categories in wordPress.
$args = array(
'parent' => 0,
'hide_empty' => 0
);
$categories = get_categories( $args );
$cat = ceil(count( $categories )/5);
$j=0;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$posts_per_page = 5;
$offset = ($posts_per_page * $paged) - 5 ;
$args = array(
'orderby' => 'name',
'parent' => 0,
'hide_empty' => 0,
'number' => $posts_per_page,
'offset' => $offset,
'posts_per_page' => 5,
'paged' => $paged
//'exclude' => '1,3,24,9'
);
$categories = get_categories( $args );
foreach ( $categories as $category ) {
$j++;
echo '' . $category->name . '
';
}
$big = 999999999; // need an unlikely integer
echo '';
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'prev_text' => __('<<'),
'next_text' => __('>>'),
'current' => max( 1, get_query_var('paged') ),
'total' => $cat
) );
echo '';
$html_content = $content_from_db['content'];
$html_content = Mage::helper('cms')->getPageTemplateProcessor()->filter($html_content);
echo $html_content;
Rating:
CSS:
.starRating:not(old){
display : inline-block;
width : 7.5em;
height : 1.5em;
overflow : hidden;
vertical-align : bottom;
}
.starRating:not(old) > input{
margin-right : -100%;
opacity : 0;
}
.starRating:not(old) > label{
display : block;
float : right;
position : relative;
background : url('star-off.png');
background-size : contain;
}
.starRating:not(old) > label:before{
content : '';
display : block;
width : 1.5em;
height : 1.5em;
background : url('star-on.png');
background-size : contain;
opacity : 0;
transition : opacity 0.2s linear;
}
.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
opacity : 1;
}
Note: Make sure that two images 'star-off.png' and 'star-on.png' are existing, which you are using in CSS .Code 2: jQuery script
$(function() {
$(".choosen-select").chosen();
});
Code 3: HTMLOutput
Topic: 1.Character Counting Remaining on textarea using jQuery.
Topic: 2. jQuery- Count characters in textarea
Topic: 3. How can I count characters in textarea on onkeyup() event using jQuery?
Solution:
We can find above topics solutions in below code.
STEP 1: Include jQuery
STEP 2: Script
function countChar(val) {
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$('#charNum').text(500 - len);
}
};
STEP 3: HTML
Remaining limit:500 characters
1. Access monitor
mysql -u [username] -p; (will prompt for password)
2. Show all databases:
show databases;
3. Access database:
mysql -u [username] -p [database] (will prompt for password)
4.Create new database:
create database [database];
5.Select database:
use [database];
6. Determine what database is in use:
select database();
7. Show all tables:
show tables;
8. Show table structure:
describe [table];
9. List all indexes on a table:
show index from [table];
10. Create new table with columns:
CREATE TABLE [table] ([column] VARCHAR(120), [another-column] DATETIME);
11. Adding a column:
ALTER TABLE [table] ADD COLUMN [column] VARCHAR(120);
12. Adding a column with an unique, auto-incrementing ID:
ALTER TABLE [table] ADD COLUMN [column] int NOT NULL AUTO_INCREMENT PRIMARY KEY;
13. Inserting a record:
INSERT INTO [table] ([column], [column]) VALUES ('[value]', [value]');
14. MySQL function for datetime input:
NOW()
15. Selecting records:
SELECT * FROM [table];
16.Explain records:
EXPLAIN SELECT * FROM [table];
17. Selecting parts of records:
SELECT [column], [another-column] FROM [table];
18. Counting records:
SELECT COUNT([column]) FROM [table];
19.Counting and selecting grouped records:
SELECT *, (SELECT COUNT([column]) FROM [table]) AS count FROM [table] GROUP BY [column];
20. Delete all records in a table:
truncate table [table];
21. Removing table columns:
ALTER TABLE [table] DROP COLUMN [column];
22. Deleting tables:
DROP TABLE [table];
23.Deleting databases:
DROP DATABASE [database];
24. Custom column output names:
SELECT [column] AS [custom-column] FROM [table];
25. Export a database dump:
mysqldump -u [username] -p [database] > db_backup.sql
26. Import a database dump (more info here):
mysql -u [username] -p -h localhost [database] < db_backup.sql
27. Logout:
exit;
At See Coding, we simplify web development through practical tutorials and examples. Today’s post shows how to create a YouTube video modal that opens on a button click using jQuery. Perfect for websites, portfolios, or e-commerce platforms!
Here’s a basic structure for the button and modal. (Replace VIDEO_ID with your YouTube video’s unique ID.)
This CSS ensures your modal is responsive and visually appealing.
.video-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.modal-content {
width: 600px;
max-width: 90%;
background-color: #fff;
padding: 15px;
border-radius: 8px;
}
This script dynamically loads the video and handles modal events.
$(document).ready(function () {
$(".open-video").on("click", function () {
const videoUrl = $(this).data("video");
$("#videoIframe").attr("src", videoUrl + "?autoplay=1");
$("#videoModal").fadeIn();
});
$(".close, #videoModal").on("click", function () {
$("#videoIframe").attr("src", "");
$("#videoModal").fadeOut();
});
$(".modal-content").on("click", function (e) {
e.stopPropagation();
});
});
At See Coding, we love hearing from our readers.
💡 Have ideas for improvement?
📩 Need help customizing the code?
👉 Comment below or use our Conatct us.
Question: How can we remove payment method from emails in woocommerce?
Answer: We can use below woocommerce filter to remove payment method from emails in woocommerce.
add_filter( 'woocommerce_get_order_item_totals', 'custom_woocommerce_get_order_item_totals' );
function custom_woocommerce_get_order_item_totals( $totals ) {
unset( $totals['payment_method'] );
return $totals;
}