{"id":24343,"date":"2012-09-28T05:16:23","date_gmt":"2012-09-28T09:16:23","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=24343"},"modified":"2017-09-07T05:25:49","modified_gmt":"2017-09-07T09:25:49","slug":"wordpress-how-to-make-portfolio-images-not-clickableremove-hover-effect","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-make-portfolio-images-not-clickableremove-hover-effect.html","title":{"rendered":"WordPress. How to make portfolio images not clickable&amp;remove hover effect"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>In this tutorial you will learn how to control wordpress portfolio images &#8211; remove hover and link functionalities<\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<ol>\r\n<li>\r\n\t\t\t\tFirst you need to do is to open wordpress theme folder: <strong>wp-content\/themes\/your_theme_folder<\/strong><\/p>\r\n<\/li>\r\n<li>\r\n<p>You will be able to locate several pages related to portfolio:<\/p>\r\n<ul class=\"list\">\r\n<li>page-Portfolio4Cols.php<\/li>\r\n<li>page-Portfolio3Cols.php<\/li>\r\n<li>page-Portfolio2Cols.php<\/li>\r\n<li>page-Portfolio1Cols.php<\/li>\r\n<\/ul>\r\n<p>\t\t\t\tEach one is for different portfolio page with different number of columns.\r\n\t\t\t<\/li>\r\n<li>\r\n\t\t\t\tLocate the one you use  for the page you need to update and open it with any text editor. You will be able to see a lot of coding but the only stuff you need should look like it follows:<\/p>\r\n<pre class=\"brush:xhtml\">\r\n\t\t\t\t&lt;a class=&quot;image-wrap touch-item&quot; href=&quot;&lt;?php echo $lightbox;?&gt;&quot; title=&quot;&lt;?php the_title();?&gt;&quot;&gt;&lt;img src=&quot;&lt;?php echo $image ?&gt;&quot; alt=&quot;&lt;?php the_title(); ?&gt;&quot; \/&gt;&lt;span class=&quot;zoom-icon&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\r\n\t\t\t\t<\/pre>\r\n<\/li>\r\n<li>\r\n\t\t\t\tTo remove roll over effect you just need to remove the following script from the block you&#8217;ve seem before:<\/p>\r\n<pre class=\"brush:xhtml\">\r\n &lt;span class=&quot;zoom-icon&quot;&gt;&lt;\/span&gt;\r\n\t\t\t\t<\/pre>\r\n<\/li>\r\n<li>\r\n\t\t\t\tRemoving link attribute is same easy. You need to leave image only in the block so it should look like:<\/p>\r\n<pre class=\"brush:php\">\r\n &lt;img src=&quot;&lt;?php echo $image ?&gt;&quot; alt=&quot;&lt;?php the_title(); ?&gt;&quot; \/&gt;\r\n\t\t\t\t<\/pre>\r\n<\/li>\r\n<li>\r\n\t\t\t\tAfter you&#8217;ve edited page template &#8211; save it and test your website. It will work like a charm.<br \/>\r\n<a href=\"\/help\/wp-content\/uploads\/2012\/09\/wordpress_how_to_make_portfolio_images_not_clickable_remove_hover_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/09\/wordpress_how_to_make_portfolio_images_not_clickable_remove_hover_1-300x104.jpg\" alt=\"\" title=\"wordpress_how_to_make_portfolio_images_not_clickable_remove_hover_1\" width=\"300\" height=\"104\" class=\"alignnone size-medium wp-image-24344\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/09\/wordpress_how_to_make_portfolio_images_not_clickable_remove_hover_1-300x104.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/09\/wordpress_how_to_make_portfolio_images_not_clickable_remove_hover_1-150x52.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/09\/wordpress_how_to_make_portfolio_images_not_clickable_remove_hover_1.jpg 945w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Thank you for paying attention to our video tutorials. Please contact us if you have any issues in editing the template. Good Luck!!!<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"\/help\/files\/wordpress\/wordpress_how_to_make_portfolio_images_not_clickable_remove_hover.htm\" target=\"blank\">WordPress. \u0420ow to make portfolio images not clickable&amp;remove hover effect<\/a><\/p>\r\n<\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>In this tutorial you will learn how to control WordPress portfolio images &#8211; remove hover and link functionalities<\/p>\n","protected":false},"author":29,"featured_media":24348,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[499,521,592,642,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/24343"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=24343"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/24343\/revisions"}],"predecessor-version":[{"id":83101,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/24343\/revisions\/83101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/24348"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=24343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=24343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=24343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}