{"id":2612,"date":"2015-03-15T11:18:23","date_gmt":"2015-03-15T11:18:23","guid":{"rendered":"https:\/\/docs.wpgeodirectory.com\/?p=2612"},"modified":"2017-08-27T12:07:24","modified_gmt":"2017-08-27T12:07:24","slug":"custom-field-examples","status":"publish","type":"post","link":"https:\/\/wpgeodirectory.com\/docs\/custom-field-examples\/","title":{"rendered":"Custom field examples"},"content":{"rendered":"<h4>On this page:<\/h4>\n<ul>\n<li><a href=\"#special-icons\">Special icons<\/a><\/li>\n<li><a href=\"#logo\">Adding customer logos<\/a><\/li>\n<\/ul>\n<h3><a id=\"special-icons\"><\/a>Special icons<\/h3>\n<p><img loading=\"lazy\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special1.png\" alt=\"\" width=\"681\" height=\"214\" class=greenborder \/><\/p>\n<p><strong>The icons you see above are created using\u00a0<a href=\"\/docs\/core-place-settings\/#custom\">custom fields<\/a> and some <a href=\"\/docs\/customizing-your-style\/\">CSS styling<\/a>.<\/strong><\/p>\n<p><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special3.png\" alt=\"\" \/> is created using a checkbox custom field and an image background.<br \/>\n<img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special5.png\" alt=\"\" \/> is created using a <a href=\"\/docs\/core-place-settings\/#select\">select custom field<\/a>.<br \/>\n<img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special4.png\" alt=\"\" \/> is created using a <a href=\"\/docs\/core-place-settings\/#text\">text custom field<\/a>.<br \/>\n<img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special2.png\" alt=\"\" \/> is created using a checkbox custom field and a FontAwesome background.<\/p>\n<h4>Creating the custom fields<\/h4>\n<p>The above examples all use these settings:<\/p>\n<ol>\n<li>Is active: <em><strong>Yes<\/strong><\/em><\/li>\n<li>Show on listing page: <em><strong>Yes<\/strong><\/em><\/li>\n<li>Complete any other fields as you wish<\/li>\n<\/ol>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special3.png\" alt=\"\" \/> Custom field settings:<\/h5>\n<ol>\n<li>Choose a <em><strong>Checkbox<\/strong><\/em>\u00a0field<\/li>\n<li>HTML variable name: pool (example only &#8211; needs to be a unique name)<\/li>\n<\/ol>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special5.png\" alt=\"\" \/> Custom field settings:<\/h5>\n<ol>\n<li>Choose a\u00a0<em><strong><a href=\"\/docs\/core-place-settings\/#select\">Select<\/a>\u00a0<\/strong><\/em>field<\/li>\n<li>HTML variable name: range (example only &#8211; needs to be a unique name)<\/li>\n<li>Option values:\u00a0<strong>Cheap\/$,Modest\/$$,Expensive\/$$$,Rip-Off\/$$$$\u00a0<\/strong>\n<ol>\n<li>Example only<\/li>\n<li>The text before the<strong> \/<\/strong>\u00a0is the choice your users will see, and the\u00a0text after the<strong>\u00a0\/<\/strong>\u00a0is the text displayed on your site.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special4.png\" alt=\"\" \/> Custom field settings:<\/h5>\n<ol>\n<li>Choose a\u00a0<a href=\"\/docs\/core-place-settings\/#text\"><em><strong>Text<\/strong><\/em><\/a>\u00a0field<\/li>\n<li>Field data type: NUMBER<\/li>\n<li>HTML variable name: discount (example only &#8211; needs to be a unique name)<\/li>\n<\/ol>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special2.png\" alt=\"\" \/> Custom field settings:<\/h5>\n<ol>\n<li>Choose a\u00a0<em><strong>Checkbox<\/strong><\/em>\u00a0field<\/li>\n<li>HTML variable name: parking (example only &#8211; needs to be a unique name)<\/li>\n<\/ol>\n<h4>Styling your custom field output<\/h4>\n<p>To style the result of your custom fields on your website, add the following to your child theme&#8217;s <em><strong>style.css<\/strong><\/em> file:<\/p>\n<p>[css].geodir-entry-meta {clear: both;}[\/css]<\/p>\n<p>Then also add the relevant codes below:<\/p>\n<ol>\n<li>Examples only.<\/li>\n<li>Adjust to suit your site etc.<\/li>\n<li>Every custom field automatically is asigned a CSS class like <em><strong>geo_HTML variable name<\/strong><\/em><\/li>\n<\/ol>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special3.png\" alt=\"\" \/> CSS code:<\/h5>\n<p>[css]<br \/>\n\/* Pool label style *\/<br \/>\n.geodir_pool {<br \/>\nfloat: left;<br \/>\ndisplay: inline;<br \/>\nclear:none !important;<br \/>\nmargin: 3px 3px 3px 0px;<br \/>\nborder-radius: 5px;<br \/>\nborder: 1px solid blue;<br \/>\nbackground: white;<br \/>\nbackground-image: url(&quot;\/img\/pool.png&quot;);<br \/>\nbackground-repeat: no-repeat;<br \/>\ncolor: transparent;<br \/>\nfont-weight: 400;<br \/>\nwidth: 38px;<br \/>\ntext-align: center;<br \/>\nbackground-position: 3px;<br \/>\n}<br \/>\n.geodir_pool .geodir-i-checkbox {<br \/>\n    display: none;<br \/>\n}<br \/>\n[\/css]<\/p>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special5.png\" alt=\"\" \/> CSS code:<\/h5>\n<p>[css]\/* Range label style *\/<br \/>\n.geodir_range {<br \/>\nfloat: left;<br \/>\ndisplay: inline;<br \/>\nclear:none !important;<br \/>\nmargin: 3px 3px 3px 0px;<br \/>\nborder-radius: 5px;<br \/>\nbackground: none repeat scroll 0 0 green;<br \/>\ncolor: #fff;<br \/>\nfont-weight: 400;<br \/>\nwidth: 40px;<br \/>\ntext-align: center;<br \/>\npadding: 6px 0 !important;<br \/>\n}<br \/>\n.geodir_range .geodir-i-select {<br \/>\n    display: none;<br \/>\n}[\/css]<\/p>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special4.png\" alt=\"\" \/> CSS code:<\/h5>\n<p>[css]\/* Discount label style *\/<br \/>\n.geodir_discount:after {<br \/>\n    content: &quot;%&quot;;<br \/>\n}<br \/>\n.geodir-i-text {<br \/>\n    display: none;<br \/>\n}<br \/>\n.geodir_discount {<br \/>\nbackground: none repeat scroll 0 0 red;<br \/>\nborder-radius: 5px;<br \/>\ncolor: #fff;<br \/>\nfont-weight: bold;<br \/>\ntext-align: center;<br \/>\npadding: 6px 0 !important;<br \/>\nwidth: 40px;<br \/>\nfloat: left;<br \/>\ndisplay: inline;<br \/>\nclear:none!important;<br \/>\nmargin: 3px 3px 3px 0px;<br \/>\n}[\/css]<\/p>\n<h5><img class=\"image\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/special2.png\" alt=\"\" \/> CSS code:<\/h5>\n<ol>\n<li>This button uses <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\">FontAwesome<\/a> to create the images.<\/li>\n<li>If you look at the code below, you&#8217;ll see <em><strong>content: &#8220;\\f1b9&#8221;<\/strong><\/em><\/li>\n<li>That is the FontAwesome code for the image \u00a0of the car.<\/li>\n<li>To find the CSS code for any\u00a0FontAwesome &#8220;letter&#8221;, have a look at the\u00a0<a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/cheatsheet\/\" target=\"_blank\">FontAwesome cheatsheet<\/a>.<\/li>\n<li>There you will find all\u00a0FontAwesome &#8220;letters&#8221;, and to get the CSS code, remove\u00a0<em><strong>&amp;#x<\/strong><\/em> from the beginning of the code, and <em><strong>;<\/strong><\/em> from the end of the code, and add a <strong>\\<\/strong>\u00a0in front.<\/li>\n<li>For example the CSS code for <em><strong>fa-car\u00a0[&amp;#x<span style=\"color: #ff0000;\">f1b9<\/span>;]<\/strong><\/em> is <em><strong>\\f1b9<\/strong><\/em><\/li>\n<\/ol>\n<p>[css]\/* Parking label style *\/<br \/>\n.geodir_parking {<br \/>\nfloat: left;<br \/>\ndisplay: inline;<br \/>\nclear:none !important;<br \/>\nmargin: 3px 3px 3px 0px;<br \/>\nborder-radius: 5px;<br \/>\nborder: 1px solid #990099;<br \/>\nbackground: white;<br \/>\ncolor: transparent;<br \/>\nwidth: 38px;<br \/>\ntext-align: center;<br \/>\nbackground-position: 3px;<br \/>\nheight: 29px;<br \/>\n}<br \/>\n.geodir_parking:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: &quot;\\f1b9&quot;;<br \/>\ncolor: #990099;<br \/>\nfont-size: 18px;<br \/>\npadding-left: 8px;<br \/>\n}<br \/>\n.geodir_parking .geodir-i-checkbox {<br \/>\ndisplay: none;<br \/>\n}[\/css]<\/p>\n<h3><a id=\"logo\"><\/a>Adding customer logos<\/h3>\n<h4>Creating the custom field<\/h4>\n<ol>\n<li>Create a <em><strong><a href=\"\/docs\/core-place-settings\/#file\">File Upload<\/a><\/strong><\/em> custom field<\/li>\n<li>For the HTML variable name, the below example uses <em><strong>logo<\/strong><\/em> (example only \u2013 needs to be a unique name)<\/li>\n<li>For this example we have added it to the sidebar<\/li>\n<\/ol>\n<h4>Styling your custom field output<\/h4>\n<p>If you now upload a file as a logo, it will look like this, so we will need to add some CSS to make it look a bit better:<\/p>\n<p><img loading=\"lazy\" class=\"greenborder\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/css3.png\" alt=\"\" width=\"681\" height=\"122\" \/><\/p>\n<h5>Removing &#8220;Logo:&#8221;<\/h5>\n<p>Adding this CSS will remove the label:<\/p>\n<p>[css].geodir_logo .geodir-i-select span { display: none !important;}[\/css]<\/p>\n<p>Adding this CSS will resize the logo:<\/p>\n<p>[css].geodir_logo .geodir-custom-post-gallery .geodir_thumbnail {background-size: initial;}<br \/>\n.geodir_logo .geodir-custom-post-gallery {width: 100% !important;}<br \/>\n.geodir_logo .geodir-custom-post-gallery {<br \/>\nborder: none;<br \/>\nmargin-bottom: -10px;<br \/>\nmargin-top: -10px;<br \/>\n}[\/css]<\/p>\n<p>And this is the result:<\/p>\n<p><img loading=\"lazy\" class=\"greenborder\" src=\"https:\/\/wpgeodirectory.com\/docs\/wp-content\/uploads\/sites\/3\/2015\/03\/css4.png\" alt=\"\" width=\"682\" height=\"217\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On this page: Special icons Adding customer logos Special icons The icons you see above are created using\u00a0custom fields and some CSS styling. is created using a checkbox custom field and an image background. is created using a select custom field. is created using a text custom field. is created using a checkbox custom field &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wpgeodirectory.com\/docs\/custom-field-examples\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Custom field examples&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1676,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,15],"tags":[],"amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/posts\/2612"}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/users\/1676"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/comments?post=2612"}],"version-history":[{"count":0,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/posts\/2612\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/media?parent=2612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/categories?post=2612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/tags?post=2612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}