Jump to content
Denis Ciumbargi

Google Custom Search v2 VERSUS Pagelines

Recommended Posts

Denis Ciumbargi



I have been trying to use Google Custom search on my pagelines enabled website. I have created the engine, I have created a custom page on my site for the search form and results. On the page template i have used custom template with content boxes where i have injected the script in one of the boxes as injecting the script directly in the page content is not really possible. Also, i would like not to edit any php files from the core as i just want control over the search page from dashboard.


As seen in other forums around here, there are some problems displaying the search button icon and on my case also a glow around the search input.


Check this link for the image please.






What is the best way to inject a script in pages / content boxes in order to have no conflicts with the preloaded styles from pagelines?


I want to use V2 of the script and not version 1 of the GCS as advanced css customization will offer some visual advantages but no functions advantages.


Can the framework have an update that will allow scripts injected in sections?


AS FOR AN EXAMPLE - Google Blogger on edit template has a button that just let's you select the section of the page you want to edit by selecting it from a drop down and displaying the php code from that region of the page so you can put your custom code scripts there. Would work great with custom templates in framework here. People could insert their ad scripts, search engines scripts or any other kind of scripts without the need of extra trouble.


For this problem I DO NOT WANT TO USE ANY MORE EXTRA PLUGINS that moderators usually recommend, I DO NOT WANT FOR EVERY PROBLEM to have an alternative in the PAGELINES SHOP to purchase  ;).


The framework should work on it's basic form with the most common scripts out there and have ways to read them and load their settings / styles instead of overriding them.


As for a P.S.


The theme still needs to better work with Jetpack (Downloads: 5,438,322 - YES 5 MILLIONS) and in my case better support for content width in galleries.




FONT AWESOME still not updated since the last 2 framework updates since font awesome major update.




Where there is love, I'll be there.

Share this post

Link to post
Share on other sites



Why not simply use the plugin?



Also the best method of inserting code is to use a hook, see here for more information - http://support.pagelines.me/docs/customization/hooks/


I also recommending looking at the Hooker plugin, if you're not comfortable using hooks.


The issue related to Jetpack galleries, from what I can remember of your topic, this requires custom CSS, I recommend you inspect the HTML using Firebug or your browsers built-in web dev tools and have a play with the CSS.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites
Denis Ciumbargi

As i was saying above, i do not want extra plugins. I just want a framework that works with most common scripts out there if possible. 


As i was saying above, i do not want to be redirected to buy more plugins from Pagelines store.


Do not take this personal but users are buying products with a promise of a good product not for the promise that the product will need more money to make it work with some basic functions that should be there.


As for the hooks. Please do create better support pages on how to use them if we, the customers, must be also programmers by default.


Thank you.


As for the Jetpack galleries, no, custom css solved partially a problem not the problem. The problem is the define width.

Where there is love, I'll be there.

Share this post

Link to post
Share on other sites



I use Google Custom Search on my own site and have tried to apply custom CSS to adapt it to look closer to my own.  You can find most of the elements of the Google Search using either Chrome's Inspection Tool or Firebug for Firefox. Once found, you can test changes, copy and paste to Dashboard > PageLines > Site Options > Custom Code.


No plugins, and no need for 3rd party or Store products.


I placed the Google code directly to a text widget in my sidebar, and directly to the Text editor in a page for the results. I did not need to customize the page for results, or the text widget for the form.


Yes, Google does add some styling.  Controlling that is possible using CSS.


The use of hooks is solely necessary for PageLines customers who wish to implement extreme customizations.  We design this product to make it possible for anyone to build a very nice, professional, and even customized site without programming skills.  However, if a customer insists on doing things the product wasn't designed for normally, essentially they are redesigning the code, and then skills with hooks become important. We provide documentation, which few read carefully, to help with the customizations.  We also provide answers to those with reasonable questions about customizations in the forum in a timely manner.  So, I'm unsure why you seem so unhappy, as we're not the ones insisting on using hooks. Rest assured, we will provide the best support possible.


To be very clear, we are not responsible for the way any 3rd party product, including Jetpack, behaves on your site.  There are too many variables for us to take on such responsibility.  Sometimes you just have to ask the 3rd party plugin developer for answers about their product.  Keep in mind, plugins often create conflicts with other plugins, not just PageLines, so we always recommend deactivation as a means of testing the cause of a problem.


As for galleries, I just implemented a gallery, directly from WordPress, without Jetpack, and it looks fine. I was able to establish settings via Media Gallery.  For the record, we work incredibly well with Jetpack, and have had no other complaints about its gallery that I know about.  Considering the volume of forum topics here daily, I would expect that if PageLines had an actual conflict with Jetpack, we'd be swamped with complaints.  So far, yours is the only one, which points to a non-PageLines conflict.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

If you want to include custom css and/or javascript here are your options:


1. Use the simple headerscripts/css area in the PageLines admin area. This will show your code on all pages.


2. Use the hooks plugin as recommended by Danny, its free for Plus members.


3. Use a WordPress hook to insert your css/javascript using WordPress page conditionals to target only your page. There are 100's of thousands of google results on wordpress hooks etc. If you tell us what page you want code on I can show you the code snippet required.


4. Create a custom section with your css/javascript files inside it and put that section on your page.




What thread?



FONT AWESOME still not updated since the last 2 framework updates since font awesome major update.

We bundle our own custom version of it, we will update it at some point, but its hardly mission critical.

Share this post

Link to post
Share on other sites



This is the CSS. You're free to edit it, but remember, this code is created by Google. I cannot guaranty that changes you make will work.  The glow effect is not created by, nor controlled by PageLines.

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;

It is the box-shadow which is set to create the glow.  I must point out, Google provides selections of style in their customization settings when creating the code for the search and results.   Google does not allow custom CSS changes for search results, for the record.  These are provided from Google, pre-styled, in an iFrame. You should know that you cannot style the content of an iFrame in the destination, only at the source.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites
Denis Ciumbargi

@Simon_P - Thank you.


Here is the link of the page -  http://www.sansapentrusansa.org/cautare/


I would love some help for steps 3 and 4 as they sound really good even if i am a stranger to hooks.


And, Simon, really Thank You for the way you answered. gave me hopes and a feeling of being listened. Thank you man!

Where there is love, I'll be there.

Share this post

Link to post
Share on other sites
Denis Ciumbargi



Ok, the page id is easy to get, i can also take that from the edit page dashboard.


To insert the script and to target that page id i need to create a hook. that means i will have to insert the script into that page or in the script section in pagelines dashboard section as i got confused. Or use the script and the page id in a hook?


I have to do this right and save you from myself :))

Where there is love, I'll be there.

Share this post

Link to post
Share on other sites

OK lets keep it simple with a fairly generic example. Im going to assume your page ID is 12 as i cant remember what it is ;) Were going to add css and js to that pages <head> area with one hook in pagelines-cusomize or a child theme functions.php like so....

add_action( 'wp_head', 'denis_custom_head' );

function denis_custom_head() {

    // If not on the page just return.
    if( ! is_page( 12 ) )

    // If we got this far it must be page ID 12
    // So lets break out of PHP and do the js and css.
/* css start */

    color: yellow;
/* css end */
<script type="text/javascript">
/* javascript start */

/* javascript end */
    // Now were back in php, function is finished.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • romanondrasek
      By romanondrasek+
      Hi, I just found that my site is not working - nothing to see what I have activated PL5 tap late (just white screen :-() , I can open just admin site . I tried to activate different template (tventy seventeen) and was working , but not with PL5. 
      could you pls let me know what is the problem ASAP 
      the site is : www.myfit.cz
      than you so much
    • Steve Webb
      By Steve Webb+
      I have a staging site up that I have been working on, and tonight was having PL5 account connection issues:
      I refreshed, didn't work, so I followed instructions and disconnected and clicked connect to get a new token, and got white screen with the following php error:
      Can someone tell me what I'm doing wrong?  
    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.